StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think I've solved it. Not in the way that I like it (with CSS), and perhaps a bit overkill, but it works nonetheless. The problem is indeed the left margin, and you really don't want to set that when dealing with variable content that you want to center. Also: I noticed Safari (for Windows) has the same problem.</p> <p>See it working here: <a href="http://jsfiddle.net/c_kick/tuu4Q/" rel="nofollow">http://jsfiddle.net/c_kick/tuu4Q/</a></p> <p>So what I did is write a custom BounceMe() function, to which you pass the element(s) to be bounced. What it does:</p> <ol> <li>checks if we're in Firefox or Safari and if not: regular bounce (skips steps below)</li> <li>get the current (actual) left offset of the element</li> <li>apply that offset to the element as a margin-left</li> <li>bounce it</li> <li>reset the margin left to auto</li> </ol> <p>Also, it sets a 'bouncing' flag on the element, to prevent the function from bouncing something that is already bouncing.</p> <p><strong>Important</strong> all elements should get </p> <pre><code>position: relative; </code></pre> <p>or the offset calculations will be off.</p> <p>The jQuery:</p> <pre><code>var userAgent = navigator.userAgent.toLowerCase(); $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());//to prevent Chrome from being detected as safari function BounceMe($this) { if($.browser.mozilla || $.browser.safari && !$.browser.chrome){ if (!$this.data('bouncing')) { $this.each(function(){ //run on each img $pos = $(this).position(); // get position of image $(this).css({marginLeft: $pos.left}); //'hard' set the margin left }); $this.data('bouncing', true).effect("bounce", function(){ $this.css({marginLeft: 'auto'}) //reset the margin left after animation .data('bouncing', false); }); } else { //images are still animating, do nothing } } else { //no Firefox or Safari? No problem, do a regular bounce. $this.stop().effect("bounce"); } } $(document).ready(function() { BounceMe($("img")); //bounce on pageload $("#bounce").click(function() { BounceMe($("img")); //bounce on click on link }); }); </code></pre> <p>You can rewrite the function to an .extend() so it can be chained like the regular Bounce().</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload