I have this simple piece of code that for some reason works on all browsers except for Mozilla.
This is my HTML:
<img src="{{#asset}}menu_button.svg{{/asset}}" id="menu_button"></img>
<img src="{{#asset}}exit.svg{{/asset}}" id="exit"></img>
Here is my code:
$(document).ready(function(){
$("#menu_button").click(function(event){
show();
});
$("#exit").click(function(event){
hide();
});
});
function show(element){
event.preventDefault();
$('#background_mobile_portrait').addClass('blur');
$('#background_mobile_landscape').addClass('blur');
$('.links').css('opacity', '1');
$('#menu_button').css('opacity', '0');
$('#exit').css('opacity', '1').css('z-index', '999');
}
function hide(){
event.preventDefault();
$('#background_mobile_portrait').removeClass('blur');
$('#background_mobile_landscape').removeClass('blur');
$('.links').css('opacity', '0');
$('#exit').css('opacity', '0').css('z-index', '-1');
$('#menu_button').css('opacity', '1');
}
When clicking on the image in Firefox, nothing happens. All other browsers works like a charm. I have been following this post that refer to problems with onclick execution: Div onclick event not called in Mozilla
I have applied the changes suggested but with no success.
Any ideas?
Thanks, Matan