jQuery Forum

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.

Is that a chrome bug? jQuery limitation? or what?

I made an live example at http://jsfiddle.net/dNk9v/

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.

Any ideas?

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.

Thanks.

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?

Thanks.

I'd appreciate comments to prevent that, or any other way to improve it.

I'm just starting with jQuery and my code is basic. e.g. I don't know which processes are faster than others.

PS: It doesn't always happen, but the most times won't work.

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 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"

Have you stumbled upon this scenario?