How to execute a jquery UI effect without losing component positioning?

Navigation
1

The idea is that the div is always centered on the page, even though it is performing the effect, and this behavior is not observed in Firefox , where the component appears vibrating on the left instead of vibrating where it is positioned (although it is ok using Chrome 35 and Internet Explorer 11). 

<div id="divEsquerda" style="background-color:#ffd800; width:50%; height:200px; margin:auto;">  

</div>

<script type="text/javascript">

    $(document).ready(function () {

        $(document).click(function () {
            $("div").effect("bounce");
        });

    });

</script>

My code on JFIDDLE

    
asked by anonymous 03.11.2014 / 20:12

1 answer

1

This behavior is specific to Firefox (I tested it in version 23) and apparently in earlier versions of Internet Explorer (I tested it in version 11 and it works). Chrome 35 also works ok.

Reading the comments of this answer: JQuery UI bounce effect aligns elements left in Firefox and IE8 , I noticed a workaround that looks like work in both Firefox and Chrome and IE 10:

Instead of doing bounce directly in div , position it in another div (a parent ) and bounce on this parent div. So:

Html: 

<div id="parent">
    <div id="divEsquerda" 
        style="background-color:#ffd800; 
        width:50%; 
        height:200px; 
        margin-left: auto; 
        margin-right: auto">  
    </div>
</div>

JavaScript: 

$(document).ready(function () {

    $(document).click(function () {
        $("#parent").effect("bounce");
    });
});

See the Fiddle: link

    
03.11.2014 / 20:47
Fill in a jquery combobox Problem attaching value to array in Python 2