jquery shake effect and margin-auto

Question

Having a spot of bother with this... shake effect example

in firefox if I omit the line

$this.css({'margin-left':$this.position().left});

then the box is animated over to the left instead of in the centre. If I keep that line of code to fix firefox then chrome has the same problem.

Any tips on getting round this would be grand.

thanks in advance

Answer 1

the solution (not a happy one but it 'works' cross browser - I say cross browser, got ie9 and my work machine can't run virtual PC!!!!);

var options = {
              direction: 'left',
              distance: 10,
              times: 2
              };
var left = $this.position().left > parseInt($this.css('margin-left')) ? $this.position().left : $this.css('margin-left');
$this
    .css({'margin-left': left})
    .effect('shake' , options , 75 , function(){
        $this.removeAttr('style');
});

Answer 2

Think i got what you were asking, is this it?

http://jsfiddle.net/mwVkm/3/

Please bring the answer you're demonstrating in-line with the answer here. JS Fiddle is a resource for demonstration, not somewhere to host the whole of the answer. – David Thomas 20 mins ago

As per the above comment here is what i changed:

jQuery:

$this.css({'margin-left':$this.position().center});

CSS - Made some tweeks to the containing <div>:

#box{ width: 20px; height: 20px; margin:auto auto;}

Hope that helps?

Answer 3

You can detect Firefox or Chrome with $.browser in jQuery.

You could then decide whether or not to apply that CSS.

Answer 4

The easiest solution is probably to introduce an additional inner div to shake. For example, if the div you want to shake (and that has "margin 0 auto") has the id "centered", then do not shake this div, but add an inner div "shake" and shake that div.

<div id="centered">
    <div id="shake">
        <div>the content</div>
    </div>
</div>

http://jsfiddle.net/yAjHa/