Internet Explorer 7 8 : jQuery UI effects work only once

Question

Context

I use jQuery UI effects (slide and drop) to open and close a slide.

The following code works on Chrome, Firefox and IE 9.

On IE 7 and 8, I can open and close the slide only once. After the slide stays hidden.

Any idea to resolve that?

jQuery : 1.8.0/1.8.1
jQuery UI : 1.8.23

Code + JSFiddle

// Opens a slide
$('a[data-toggle="slide"]').click(function (e) {
    e.preventDefault(); 

    currentSlide = $(this).attr('href');

    $(currentSlide).show('slide', { direction: 'right' }, _config.effectDuration);
    $('div.modal-backdrop').fadeIn(_config.effectDuration);
});

// Closes the current slide
$('div.modal-backdrop, button.close').click(function () {
    $(currentSlide).hide('drop', { direction: 'right' }, _config.effectDuration);
    $('div.modal-backdrop').fadeOut(_config.effectDuration);
});

@Ibu : our customers use IE 7. I use jQuery 1.8.0 and jQuery UI 1.8.23, are they compatible? — GG., Sep 04 '12 at 20:51
According to their blog, no they haven't dropped support for IE 7/8 or even 6 for that matter. http://blog.jquery.com/2012/08/09/jquery-1-8-released/ — Henrik Ammer, Sep 04 '12 at 20:52

score 2 · Accepted Answer · answered Sep 04 '12 at 21:16

2

The inline style of the slider (on the second time it shows) is the following in IE8 (compatible mode from IE9):

zoom: 1; filter:  alpha(opacity=0); display: block;

Which means that it's the filter that sets the opacity to 0 that is the culprit.

answered Sep 04 '12 at 21:16

Henrik Ammer

1,889
13
26

So weird. I will try to change the filter value when opening the slide. – GG. Sep 04 '12 at 21:25
As seen in this answer to a related question, http://stackoverflow.com/a/1333389/600101, it should use `-ms-filter` for IE8, not `filter`. Might be fixed in jQuery 1.8.1 released the 30th of august. – Henrik Ammer Sep 04 '12 at 21:33
And just quickly checking the jQuery UI code the bug must come from jQuery and not the UI extension. – Henrik Ammer Sep 04 '12 at 21:33
Did you try to update jQuery to 1.8.1? I saw in the changelog that some issues with IE had been handled. I don't know if they're related but could be worth a shot. – Henrik Ammer Sep 04 '12 at 21:51
Yes I updated my source but no changes. I just added a .css(//filter) after the slide effect. – GG. Sep 04 '12 at 21:53
It's like you said: weird. Anyhow; glad I could help. – Henrik Ammer Sep 04 '12 at 22:00

GG. · Answer 2 · 2012-09-05T00:11:21.870

1

With the help of Henrik Ammer, the solution:

$(currentSlide)
    .show('slide', { direction: 'right' }, _config.effectDuration)
    .css({ '-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)', 'filter':'alpha(opacity=100)'});

edited Sep 05 '12 at 00:11

answered Sep 04 '12 at 21:50

GG.

21,083
14
84
130

Internet Explorer 7 8 : jQuery UI effects work only once

Context

Code + JSFiddle

2 Answers2

Linked