I have a website which takes some weight from the user's shoulders
by fitting text in containers, changing the layout depending on the
amount, etc. Some functions react to window sizes and viewport size.
How do I make sure they run for the printer's media size?
And then, how do I stop some of those functions from running for
the printed version?
First, preventing defaults on focus doesn't work, and preventing defaults on keydown still fails for the first field focus (with tab). As explained below.
A form partially hidden inside a container with overflow:hidden SCROLLS to make the field visible, RUINING the css animation I setup specifically to reveal it. If i remove the overflow property it works like charm.
I used jQuery only to change the parent's class, and depending on that class, a top-margin is added to review the right field.
The problem is:
Before the animation occurs, the form is pseudo-scrolled to reveal the field, but there's NO actual property changed that I can fix/force. Nothing changes: Top, top-margin, padding, NOTHING, but the form STILL scrolls!
I also tried to get rid of the click events and just fire the class change (what makes the form to animate inside the container) with the field's .focus() event, but the jump always happens BEFORE the css animation.
Then, I made EVERYTHING animated by jQuery, preventing the default focus events and and firing them manually with the TAB keydown AFTER the animation, but the first event STILL jumps to the field, rather than animating.
So so far all the methods fail, and the cleanest method (if it worked) would be the CSS animation, just changing the class of the parent.
I need to add a delay to jFlow, so something else runs one second before it stransitions, and I can't find the way through.
Here's a link to the documentaiton for the timer, where I think is the way to go, but I'm affraid it's intended for step animations, rather than what I want.
I'll try preventing the auto-play and setting my own timer in the while, but I'll leave this posted since I suck at managing JS timers and I'm affraid the pause and other features won't work if I use my own external timer.
I want to build a circular menu, with bouncing bubble-like elements all positioned around a central item, kind of prezi editor navigation, but with faces.
There's probably some existing plugin but I haven't found any yet, so I'll build it.
Now, since every new item added or rollovered I want it to displace the others along the circle, I was thinking of rotating the items with simple css positioning, rather than calculated position around a path, because at some point all the images would moving to a new position calculated frame by frame.
The css option would just rotate a "ray" parent and then I'd rotate the content in the opposite direction (hoping the graphics acceleration won't blur out the image)
So can anybody give me some advice for the best approach to prevent animation stuttering or mobile slowness?
I have a perfectly working pair of animations on mouseenter and mouseleave.
The problem is on mouseenter, the hovered image moves away the pointer and the mouseleave event triggers, stuttering the image several times until the user re-positions the pointer where he guesses the image will land. Chasing the motion.
I tried stopping or not the current animation when the other event triggers
I tried unbinding and re-binding the other event only AFTER the current event's animation finishes…
The closest I got is the mouseleave waits until the mouseenter animation finishes… fine so far. No stuttering. BUT if you leave wile the mouseenter animation finishes, the mouseleave won't trigger because you are not "leaving" the image, and the event doesn't trigger because you "left" or "you are out".
So, again: if you are not there to chase the image and to be there there when the mouseenter animation finishes, you CAN'T be there to mouseleave it.
Mouseleave doesn't fire like a "the mouse moved and is not over the image".
I nead a way to DELAY the mouseleave "detection", not the "animation".
I need something getting aware of the past mouseleave, or awakening the detection even if I'm not moving the mouse.
The right event would be "if the mouse IS out NOW, regardless of it BEING leaving now or before"