How to prevent a button from hanging
(See this link for the jsfiddle - http://jsfiddle.net/AshThomas/742tvhqy/1/ )
Hello,
If this code works on a computer ... when you press a menu button, the button still appears "hangs" until you move the cursor (i.e. if you press the button and don't move the cursor, the button still appears "hangs")
Also, if this code is run on a standard Samsung Galaxy S3 Mini internet browser (it might be the same for other Android phones), the menu opens and then closes instantly, even if the menu button is only pressed once.
I believe the two events are related, but I can't seem to find a solution.
Basically, I want the menu button to appear "hover" after the button is pressed (and without moving the cursor), and I would like the menu to remain open when the menu button mentioned above is pressed on the phone ... hopefully the two are related !
<body>
<div id="menu" class="panel" role="navigation" style="overflow-y: scroll; position: fixed;
top: 0px; bottom: 0px; width: 15.625em; height: 100%; -webkit-transition: right 300ms ease;
transition: right 300ms ease; right: -15.625em; -webkit-overflow-scrolling: touch;">
<div id="menuWrapper">
<ul>
<li class="boldMenu"><a href="#">Home</a>
</li>
<li class="boldMenu"><a href="#">About</a>
</li>
<li class="boldMenu"><a href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div class="wrap push" style="right: 0px; -webkit-transition: right 300ms ease; transition: right 300ms ease;">
<a href="#menu" class="menu-link">☰</a>
</div>
source to share
I fixed your problem. I am guessing this is a browser bug because it is not re-rendering of DOM elements after animation.
http://jsfiddle.net/742tvhqy/4/
Check line # 104
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.fadeOut(5).fadeIn(10);
});
Can you see the last line with fadeOut / fadeIn? Fix it. I've tried with hide (). Show (); but it doesn't work, even if I use fadeOut (1) it doesn't work :) But overall, 5ms is the same as 1ms. I cannot find a better solution right now. He works.
BTW. If I were you, I would just do the whole thing with a few lines of jQuery code, rather than all that fantastic css stuff.
source to share
maybe do this ... add another class to the button and let the class hover properties in css ...
menu-link-class:hover {...}
then do it in js
$('.menu-link').click(function() {
var me = $(this);
me.removeClass('menu-link-class');
setTimeout(function() {
me.addClass('menu-link-class');
},1);
});
UPDATE: Special thanks to @Lukas Liesis
you have 2 options :)
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.fadeOut(5).fadeIn(10);
});
or
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.removeClass('menu-link-class');
setTimeout(function() {
menuLink.addClass('menu-link-class');
},1);
});
source to share