I'm playing around with apps on Phonegap, and ran into something that's bugging me.
When I put :hover on a class and change the background, it looks like a real button being pressed on a touchscreen, which is good, yeah.
But if I push the button, then slide my finger off the button (without actually clicking it), it still thinks I'm hovered over it so the background stays changed.
Is there another thing I can use besides :hover that won't stay? Only triggered when it's actually clicked?
Hopefully you get what I'm trying to explain.
You could try using the :active psuedoclass:
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
Related
I'm creating this toggle component but as you can see in the gif whenever I press it on a mobile device there's this flashing shadow behind it, which is probably some native behaviour to indicate the button is being pressed.
I'm trying to get rid of it as it makes the component look kinda clunky and not very smooth. I tried several combinations of props like changing the background color, shadow, transitions, pseudo selectors like :active and others, even changing the element from <button> to <div>, nothing really works and I couldn't find a solution for this anywhere.
Thanks in advance for any help!
I am creating a simple mobile app with Cordova. For good user experience I would like there to be instant feedback whenever a user presses a button. This should be accomplished with the :active pseudoclass. It mostly works, but it's not quite 'instant'.
See the jsbin here.
With desktop Chrome, clicking the button produces absolutely instant feedback, no question.
With Chrome for Android, tapping the button quickly feels pretty quick, but a slow tap or holding on the button causes a delay (it might be hard to notice, but it is there and it's bugging me).
I think this is something to do with scrolling. If you go to the Android settings, there is a scrolling list of options. These options seem to highlight with a similar delay. However, any native Android buttons which are not within a scrolling list are absolutely instant (for example, the back button in the top right, or save/cancel on a popup dialog).
Is there some way I can convince Chrome that these buttons are not on any kind of scrolling pane and should just be highlighted instantly?
This is probably unrelated, but I have also noticed that holding on an html button highlights it, but then moving your finger (still within the button) causes the highlight to disappear. This does not match the behaviour of native Android buttons, which would stay highlighted so long as you stay within the button.
Edit: I should add that -webkit-tap-highlight-color (which only works with cursor: pointer) is a bit faster than :active, but it's not an acceptable solution, for a few reasons:
The highlight disappears if you hold on the button for more than one second
It clashes with :active - to get sensible results with -webkit-tap-highlight-color you would have to remove :active, which makes no sense
There is no way to control the size/shape of the highlight, which might not match the actual button (sometimes it bleeds around the edge, or has mismatching rounded corners)
The correct HTML way of solving this is :active, and I would like to use that if at all possible.
It seems the best way to solve this is to listen for touch events and set a class:
$('button').on('touchstart', function(e){
$(this).addClass('active');
});
$('button').on('touchend', function(e){
$(this).removeClass('active');
});
To keep this as closely related to the :active pseudoclass, I opted to use a class of active and add styles for both like this:
button:active, button.active {
// active style
}
For more information, see: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/
I have a bit of a IE8 problem (sound familiar?)
I have a button. when you hover over the button the hover state produces a larger box that has html inside. in this particular case, it's a small music player.
so it goes like this, when you hover over the button it produces a small music player with clickable links and some text. you can move your mouse anywhere inside this box, but as soon as you leave the box/music player, the hover state goes away again.
sorry but I don't know how else to explain it.
this all works a treat except for IE8.
in IE8, the hover state disappears as soon as the mouse leaves the original small button. so navigating around the music player becomes impossible.
now I have noticed that when there is no html in the hover box, it works fine, but when there is html (in this case an iframe) it loses the hover as soon as I touch any html inside the hovering box. so it looks like the problem is not the hover box, but the code inside the box that makes it lose focus
what I would like to know is, is this a known issue in IE8, or could it just be bad coding from my side. in which case i can post the css.
I've had problems with :HOVER states in IE8 too and I noticed that the same CSS (even pointing to the same external CSS file) worked on some pages but not others. The solution for me was to consistently add a DOCTYPE to the top of all pages (above the starting HTML tag).
It seems obvious now, but sometimes (especially when editing old sites) the DOCTYPE is not always specified.
I hope this helps!
Your problem doesn't seem to lie in hover itself. Firstly you assume some window height and your project just look weird if the height is different. Assuming you did some very exact calculations on such assumptions your problem is probably the box model problem. box-sizing:border-box might help, but you would have to recalculate everything.
Also you can use timeout before the elements gets hidden/drop down so that micro mouse movements don't shake elements and maybe allow to "catch" them.
Having both things in mind all hovering problems should be fixable.
EDIT: For iframe hover have a look at: Iframe hover not working in IE (all versions).
I have a "follow" button that has "Follow" which when clicked, changes a class and the text visible is "Following". On hover this changes to "Unfollow".
Works just fine. On mobile (phone), clicking it seems to lock it into the "hover" state. As a result, it completely bypasses "Following" and shows "Unfollow". If I tap somewhere else on the screen, it "fixes" itself.
Is there any way to make this happen automatically? $('body').click() did nothing for me...
You can use the touchstart/touchend events in jquery. If you are using only CSS, I don't know of a solution, but what you can either bind your normal functions to touchstart/touchend events in addition to hover events or do something like the following.
$('.button').bind('touchstart',function(){
$(this).addClass('hoverClass');
});
$('.button').bind('touchend',function(){
$(this).removeClass('hoverClass');
});
This just make your "hoverClass" change the button as you need to via CSS. I hope that is clear enough. Basically, touchstart/touchend are similar to hover, but as far as I know not accessible via CSS exclusively.
I've tried the traditional Javascript rollover method and CSS background switching method, but nothing seems to work -- apparently when you're hovering over the close button you're actually...not.
Using Lightbox Gallery plugin in Wordpress.
Any suggestions?
Have a good one,
Andrew
button you're actually...not.
Indeed, You're actually hovering the whole picture (except the right and left third which is for next/prev button).
Try using FireBug, Use it and you'll know what are you really hovering over.