I have a scenario that when I mouse down onto a li element and at the same time mouse move on other li element call css active for that.
like a piano that we press multi keys at the same time. and active effect show for all of them.
thanks and sorry for my bad english.
First, you cannot track if a mouse button is pressed with CSS, JS is needed for that anyways. For example check JQuery mouse events documenattion.
Second, I believe "the piano-like" behavior means you need to press keys, not just put you fingers over it. And a mouse cursor makes you a "single-finger pianist". So, if I get your idea right (which I'm not sure), here is a simple JQuery snippet you may start with:
$('li').on('click', function(){
$(this).toggleClass('active');
})
See it in action here: https://jsfiddle.net/uL5506xg/
Related
I was wondering if there was a way to get the nz-popover to center on another element.
I basically have a text input followed by two buttons in a div, I would like to center the popover on the div rather than on the button that triggers it.
I found that i could add the popover to the actual div and then use the nzVisible to trigger it but then i loose the ability to close the popup when the user leaves the area (prob when they hover over the mask or click it). I tried many ways to close it once the popover looses focus etc but that would cause the popover to close if the popover contains a menu or datepicker (when they are used).
Anyone got any ideas? (i used to use angular material and i believe they had something similar (think it was called target or something).
Thanks in advance,
For anyone who is interested in this, we have submitted a PR to provide this feature. You would be able to use this in 9.x (and future) versions.
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 button which is styled for various states. Particularly, pressed (:hover:active) and focussed (:focus).
But if the button was focussed and is pressed, it changes to :hover in Google Chrome / Safari or :hover:active in Firefox. Neither go to :hover:active:focus as expected.
HTML test case:
<button>Test</button>
CSS:
button{background:#000000;color:#FFFFFF;border:1px solid #000000;padding:10px}
button:hover{background:#FF0000;color:#000000}
button:active{background:#00FF00}
button:hover:active{background:#FFFF00}
button:focus{background:#0000FF}
button:hover:focus{background:#FF00FF}
button:active:focus{background:#00FFFF}
button:hover:active:focus{background:#FFFFFF}
And here it is in a simple test fiddle: http://jsfiddle.net/CtKs8/. Note that after focussing the button using the keyboard (so it goes blue), pressing it makes it go red in Chrome, or yellow in Firefox (instead of white).
My question is: how can I detect a pressed, focussed element (like :hover:active:focus), or at a minimum get Chrome to use the :active:hover state as Firefox does?
I believe that focus, generally as an event, is not fired at all when you click on a button. It is fired when you keep pressing Tab until you reach desired element.
Text input's and textarea's are exceptions, since they're focused when clicked.
I couldn't find clear explanation in events documentation but HERE you can see Focus Event Types documentation. One chapter down there is completely separate chapter Mouse Event Types which suggests that mouse behaviours are not related to focus events.
EDIT:
I read your question carefully once again and now I think I finally understand your problem.
When it comes to a button, there is no such state as :active:hover:focus. If a button is focused it becomes blur immediately after you clik on it (to be precise - after you just mousedown on it). So there's no way to put button both in active and focus states together.
According to the red color on Chrome/Safari when you click on a focused button, I guess this is a bug. If you bind a simple handler to the button click like here you'll see that clicking on a focused button works. I don't know why :active is not triggered.
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.
So when I quickly move my mouse over an object, it wont fire it's animation, not until the user hold their mouse over that object for a specified number of ms. I don't believe this can be done with just CSS3, but maybe I'm wrong?
This effect is for if I have something like a bunch of links, and each link launched a little tooltip bubble, if the user moves their mouse across the screen to click on something, we don't want all of those tooltip bubbles to show.
Wow, this would be great! But it's not possible since you can't hold an animation with CSS3. Since you've hovered an element, all animations binded to it will be fired :S
Why don't you suggest it as a Chrome Feature?