JQuery Not Working in IE8

[ibchrisb81]

Hi all,

Firstly, please be gentle. You are about to be exposed by some of the most ugly jquery you have ever seen.

This is my first foray into Javascript/JQuery past using plugins, so it’s been a steep learning curve for me.

I’ve created an opening animation (on client’s insistence) that uses jquery to animate and fade out a few divs.

The script works fine in chrome, firefox and safari, but does not work in IE8… the divs just hang out very lazily.

Here’s what I’ve done so far in my research, with no joy:

latest jquery (1.5)
script wrapped in $(document).ready(function() {…
type=text/javascript
Also, I’m also using some other javascript (a slideshow and a media player) that work fine in IE8.

Any ideas on how to get this script working in IE would be much appreciated.

Also, please feel free to offer any suggestions on cleaning up this hacky code… like I say, it’s ugly.

Onto the code:

script, located in the head of the document

HTML

/* ANIMATION */



#intro_container {background-color:white; min-width:100%; min-height:100%; display:block; padding:0; margin:0 auto; position:fixed; left:0%; top:0%; z-index:1000;}



#intro_white_div {width:100%; background-color:white; margin:-20px 0 auto; display:block; min-height:900px; position:absolute; left:0%; margin-left:0px; overflow:hidden; background-image:url(../images/container_bg.jpg); background-repeat:repeat-x; margin-top:-15px;}



#intro_black_bar {width:0px; height:55px; display:block; background-color:none; background-image:url(../images/intro_black_strip.png); background-repeat:no-repeat; position:absolute; top:150px; left:50%; margin-left:-495px; z-index:1200;}



#intro_unique_fitouts {width:500px; float:right; background-image:url(../images/Unique_Fitouts_intro.png); background-repeat:no-repeat; z-index:1500; height:50px; background-color:none; margin-top:138px; margin-left:2097px; position:absolute;}



#intro_finger_print {height:580px; position:absolute; width:960px; left:50%; margin-left:-480px; background-image:url(../images/ThumbA4Black.png);background-position:bottom left; background-repeat:no-repeat;}

Thanks in advance!

CB

[hero]

If its not running it usually means either you forgot to include the jquery library or are missing a bracket. See if you can execute the code in parts. Take all of it out and slowly put the blocks back in to see where the problem is.

[hero]

From looking at it I cant really tell :(

[noahgelman]

Are you calling different animations on the same elements? Are they supposed to work one after another or at the same time? Either way they should be chained together not written out separately. IE probably can’t read it because of that.

Chain the animations that relate to the same element together and then check if IE still has that problem. Here’s some info on how to do it.

http://api.jquery.com/animate/

[ibchrisb81]

Thanks for the advice.

Basically I’ve had a tonne of trouble trying to chain the animations together — like I said, I’m a complete newbie.

To add some more info….

….Jquery library is included (v1.5)
… the initial fadeOut() function WORKS in IE8 when everything else is taken out. The problem lies with my abysmal execution of the .animate() blocks.

To give you an idea of what I want to do with a particular div (#intro_black_bar), I want the steps to go like this:

1: Slide in from the left (increase width by 1000px)
2. Hang out for a few seconds (i.e. do nothing for a bit)
3. Slide up the page (decrease margin-top by 83px)
4. Repeat step 2
4. Slide out to the right (increase margin-left by 1683px)

Now, I’m pretty sure I should be using .delay() for #2, but can’t get this to work for the life of me, so I’m using an animation that does nothing (increase width by 0) for this second step.

Would the chained code look like this?

$(document).ready(function(){





$('#intro_black_bar').animate({

width: '+=1000',}, 1000,

width: '+=0',}, 1000,

marginTop: '-83',}, 1000,

width: '+=0',},1000,

marginLeft: '+1683',1000,

function() {

// Animation complete.

});

That’s all that I can divine from the jquery tuts, but I’m obviously doing something wrong… when I try to execute this, it won’t work anywhere – so there’s no doubt a syntax error of some type.

Any more advice would be great!

[ibchrisb81]

Okeedokee,

The fix seemed to be in dropping the trailing comma for the .animate() blocks.

This is what I mean…

DOES NOT WORK IN IE8

$('#intro_black_bar').animate({

marginLeft: '+=1683',

}, 1000, function() {

// Animation complete.

})

WORKING CODE

$('#intro_black_bar').animate({

marginLeft: '+=1683'

}, 1000, function() {

// Animation complete.

})

Note the removal of the comma after the ‘+=1683’

Hope this helps someone in the future!

[ibchrisb81]

Hi @ChristopherBurton,

Live site here.

Still in dev, but functional.

Feedback appreciated!

[ibchrisb81]

Yes, it’s working, but there’s something funny going on with the image load queue.

I’m using a preload plugin, but I don’t think it’s doing exactly what it should — the animation doesn’t seem to be waiting for the images to load. OK on quick connections, but probs not the best for a slower connection.

Trying to fire:

For this plugin:

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Any other ideas appreciated…

[Author]

Posts