CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
ChevCast
ChevCast

Reputation: 59254

jQuery UI bounce effect aligns elements left in Firefox and IE8

There is an issue with JQuery UI's bounce effect in both Firefox and IE8 or lower. IE9, Chrome, and Safari render the bounce effect properly. Any ideas what is causing this?

The problem is exhibited in Firefox and Chrome. The popup asks if you received an invitation. In Firefox/IE8 the box jumps to the left-hand side when it bounces.

Here is the jQuery that is running the bounce:

            if ($.readCookie('noticehidden') == null)
            {
                $('#notice').show('drop', { direction: 'left' }, 2000)
                .data('bounceinterval', setInterval(function ()
                {
                    $('#notice').effect("bounce", { times: 3, distance: 10 }, 300);
                }, 5000));
                $('#dismissnotice').click(function (e)
                {
                    clearInterval($('#notice').data('bounceinterval'));
                    $('#notice').hide('drop', { direction: 'right' }, 2000);
                    $.setCookie('noticehidden', 'true', { duration: 365 });
                    e.preventDefault();
                    return false;
                });
            }

I am using jQuery 1.4.4 and jQuery UI 1.8.6

Upvotes: 3

Views: 5918

Answers (1)

Alexey Lebedev
Alexey Lebedev

Reputation: 12197

Bounce effect applies this style to the element:

element.style {
    bottom: auto;
    left: 0;
    position: relative;
    right: auto;
    top: 0;
}

Firefox disregards margin:auto in favor of left:0. This fixed the problem:

#notice {
  margin-left: 300px;
}

And for variable-width box:

#notice-container {
  text-align: center;
}

#notice {
  display: inline-block;
}

EDIT: For anyone that uses this answer I wanted to add a couple minor tweaks that made it work.

First

    #notice-container
    {
      text-align: center;
      display: none; /*Add this to make the parent invisible until the show effect is used.*/
    }

Next, the above JQuery in the question should be modified to use the parent container, not the centered child.

$('#notice-container').show('drop', { direction: 'right' }, 2000);
$('#notice-container').effect('bounce', { times: 3, distance: 10 }, 300);
// etc...

Upvotes: 10

Related Questions