IE8 jQuery text changes on z-index divs

Question

I'm using the jQuery Cycle plugin to cycle through some images on a webpage.

Each image also has various meta-data (title, description) that is also displayed on the page. Whenever the image changes, the title and description text also change to the title and desc for that image.

<div id='slides'> 
    <a href="http://whatever.com"&gt;
         <img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide1.jpg"/&gt;
    </a>
    <a href="http://somewhere.com"&gt;
        <img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide2.jpg"/&gt;
    </a>
    <a href="http://nowhere.com"&gt;
         <img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide3.jpg"/&gt;
    </a>
</div> 
<div id='slideshow_text'> 
    <div id='ss_title'>The title goes here</div> 
    <div id='ss_desc'>The description goes here</div> 
</div>

The javascript is pretty simple:

jQuery(document).ready(function(){
    jQuery('#slides').cycle({
        fx:         'fade',
        speed:      1000,
        timeout:    10000,
        after:     alterSlideText,
    });
});

The alterSlideText javascript function is very simple. Basically its just running this:

jQuery('div#ss_title').html(slides_array[slideNum]['title']);
jQuery('div#ss_desc').html(slides_array[slideNum]['desc']);

The slides_array is simply an array of the title and description for each slide. So depending on what slide is currently being shown, it picks the appropriate title and description to put in the divs.

So overall the setup is very simple and straightforward. Image changes. Then the text changes.

Now the problem - This all works perfectly in Moz and Webkit. But in IE, the text div's will not change UNTIL I move my mouse over the slides div or slideshow_text div. The text will just not change at all if I just let it sit there. Once I move my mouse into that div, boom it changes to the appropriate text.

One maybe important note, the slideshow_text div has a very high z-index value (1000) and it actually floating over part of the image. I have just confirmed that text in other div's with normal z-index values changes just fine. It's only these divs with the high z-index value that aren't changing until I mouse over it.

Does anyone have any clue as to why this is and how to fix it?

Answer 1

I fixed this by adding the following to the end of the alterSlideText function:

// Force IE to refresh itself
jQuery('div#slides').blur();
jQuery('div#slides').focus();

Great job IE developers. Go find a different job.