Is there any way to restart a CSS3 animation when clicked without using JavaScript?
there is a css-trick summarizing some methods of doing this. You can try the :target pseudo-class instead of the checkbox-hack.
Edit:
Made a fiddle of the example using the :target pseudo-class.
You could do it with the Checkbox Hack though it generally isn't encouraged.
Might be worth looking into however. It is an intriguing use of html and css.
EDIT
After a bit of play, I came up with this example. The hardest part is actually just resetting the animation without javascript, not registering the click event. To get around it I duplicated the animation to a second css rule that begins when the checkbox is hit.
There may be a better way to do it, but this would theoretically work, aside from being a bit unconventional :)
Related
When dynamically adding custom css classes to a dc.selectMenu IE11 kicks them out when filters are applied. For now I push them in again using a renderlet. This causes "glitches"/moves content around due to added padding or widths/heights.
You can reproduce the issue by selecting an option from the select box in my block.
Is this a bug? Does anyone know a cleaner workaround not causing these glitches to appear?
We found that IE11 actually crashes on Win8 if you try to update a selectMenu! So we only render, don't attempt to redraw selectMenu on that browser.
So that's why you need to re-apply it.
In experimenting with this, I found that it was enough simply to move
.on('renderlet', ...
to the selectMenu, where it arguably belongs (because it's modifying that widget). I think this works because the select menu doesn't use any transitions, and there is no delay.
More generally, though, in any modern version of dc.js, you should really use the pretransition event, which fires before any transitions. In sum:
selectMenu.on('pretransition', function(chart){
selectMenu.select('select').classed('uk-select', true);
});
Although it's a really cool word, renderlet is rarely the right event to listen to. You'll see it in a lot of examples because it goes way back to early releases of dc.js, but it occurs after all transitions have finished.
If you use pretransition you'll have a chance to change things before the browser even refreshes at all.
The question is pretty straight forward. Should I use CSS or JQuery when styling elements that are in the hover state (does one have any real advantage over the other)? To me, using JS seems like a hassle since the pseudo-classes are so easy to use. Thank you!
You should use CSS wherever possible; it's more efficient.
It also works better with property cascade and with elements created later.
Well it depends. If you want your website also displayed on mobile devices it is wiser to make a hover class and attach it with jquery because mobile browser handle hover very sketchy and different.
How can I position an element--such as a complex cursor unsuitable for the cursor property--relative to the mouse position using CSS 3?
I know how to do this with JavaScript, but it appears too choppy; I'd rather use CSS and fall back to jQuery when support is lacking. (Event when I work with elements directly and bypass jQuery, it's too slow.)
JavaScript can be used to make preparations and such, if necessary. While not preferable on principal, JavaScript is acceptable as long as it isn't in charge of updating the element every time the mouse moves.
I kindly request that answers not be used to reason why this cannot be achieved, as CSS is rapidly evolving, and the future potential of solving this problem may change. Feel free to speculate all you want in comments.
I am using Sass (SCSS) with Compass and jQuery, along with my own JavaScript framework.
As of today, CSS does not support positioning elements relative to mouse pointer.
So if you're not satisfied with cursor: url('pointer.cur') (thanks #ilya-streltsyn), then JavaScript is the only solution for you.
Or maybe you shouldn't do that in the first place. When an SWF uses a custom cursor, this freaks me out a lot.
I am following a CSS3 transition tutorial: here
I cant manage to get this to work without having to hover. Does anyone have any idea how I could have this same effect from this tutorial without having to hover on the body?
Thanks
You can simplify the answer from #Rufus by simply putting the 'test' class on the body directly in the markup. There's no reason to add it with javascript later.
If you were using css3 transition, then you WOULD need to add the transitioned class after page load, but since you are using keyframe animation, you don't need to wait before adding it.
Here's the example from #Rufus modified to show what I'm talking about: http://jsfiddle.net/mALEC/2/
What is the simplest and most elegant way to simulate the hover pseudo-class for non-Anchor tags in IE6?
I am specifically trying to change the cursor in this instance to that of a pointer.
I think the simplest way is to use the hover.htc approach. You add the hover.htc file to your site, then reference it in your stylesheet:
body { behavior:url("csshover.htc"); }
If you want to keep things as clean as possible, you can use IE conditional comments so that line is only rendered users with IE6.
Regarding your request -- I am specifically trying to change the cursor in this instance to that of a pointer -- the easiest way is to specify cursor:pointer in your css. I think you will find that works in IE 6.
Try this to verify (where div can be any element):
<div style="background:orange; cursor:pointer; height:100px; width:100px;">
Hover
</div>
I would say that the simplest method would be to add onmouseover/out Javascript functions.
Another alternative that will fix many more issues in one go is to use IE7.js.
Another approach, depending on what the item is, is to add a non link anchor and set its display to block. Either put the anchor within or surrounding the item you want the pseudo hover behavior on.
Aside:
I actually already needed to swap the image anyhow
Make sure you take a look at Image Sprites. Sometimes its much nicer to use one image and "shift" the image then to use two separate images and "toggle" or "swap" between them. In my experience its been much nice when as user interacts with it is sometimes an advantage that there is a single request for the 1 image then multiple requests for multiple images.
I liked the mouseover/out best since I actually already needed to swap the image anyhow. I really should have thought of doing this with javascript to begin with.
Thanks for the quick answers.
#Joseph
Thanks for that link. I had never heard of this technique before and really like the idea.
I will definitely try that out and see how I fare with it.
If your willing to use JQuery, I would use Set Hover Class for Anything technique.