JavaScript won't work in IE

[smichael05]

I made a script that animates the papers in to make it look like they are falling onto a desk. Also my javascript controls the slide out page for the navigation. The site works fine in all other browsers except Internet Explorer. In IE neither the papers nor the slide out page show up.

My site is:
http://www.preservingfamilystories.com

Here is my javascript used

$(document).ready(function() {

$.loadImages(['images/paper.png', 'images/paper2.png', 'images/paper3.png', 'images/paper4.png', 'images/paper6.png', 'images/paper7.png'], function() {

$("#paper1").animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1,
position: "relative",
zIndex: 4
}, { queue: true, duration: 300});
$("#paper2").delay(200).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper3").delay(400).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper4").delay(600).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper5").delay(800).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper6").delay(1000).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper7").delay(1200).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});

$("#paper8").delay(1800).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});

$("#contentarea").delay(2000).animate({ opacity: 1}, 500);
$("#footer").delay(2000).animate({ opacity: 1}, 500);
$("#quote").delay(2000).animate({ opacity: 1}, 500);
$("#nav").delay(2000).animate({ opacity: 1, left: '240px'}, 500);
$("#menu").delay(2500).animate({ opacity: 1}, 500);
});

$("#menu").live('click', function() {
if ($("#nav").css("left") != "400px") {

$(this).animate({ left: '+=160px'}, 500);
$("#nav").animate({ left: '400px'}, 500, function() {
$("#nav-items").fadeIn(500);
});
}
else {
$("#nav-items").fadeOut(500, function() {
$("#menu").animate({ left: '665px'}, 500);
$("#nav").animate({ left: '240px'}, 500);
});
}
});
});


If anyone could help me I would greatly appreciate it. Thanks

[smichael05]

On IE I am getting an error that says "Could not get the position
property. Invalid argument.
Line: 144
Char: 219
Code: 0
URI: https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"

[m444w]

Fairly sure you are probably missing a position property not being set somewhere along the way before you try to animate it (and check to make sure your containing element is not set to relative). I had this problem recently myself with a different sort of position animation, but it was failing in the same way.

IE doesn't like to improvise.

[venegal]

Please put your code in [CODE]your code here[/CODE] tags.

The real error isn't easy to track down, because you're using a minified version of jQuery. Change that to a readable one, and your stacktrace will give you better information.

A thing at the bottom of your stacktrace that definitely doesn't look right is this:

PHP Code:

        $("#paper1").animate({
                width: '719px',
                height: '794px',
                top: 0,
                left: 0,
                opacity: 1,
                position: "relative",
                zIndex: 4
            }, { queue: true, duration: 300}); 


jQuery doesn't animate "position" or "zIndex" properties, so you should definitely take them out and use the jQuery.css method for those instead.

Also, what's with the PNGs? Those images are *huge*, and definitely the wrong format for what you're doing. Use JPGs instead.

[smichael05]

$(document).ready(function() {
    
    $.loadImages(['images/paper.png', 'images/paper2.png', 'images/paper3.png', 'images/paper4.png', 'images/paper6.png', 'images/paper7.png'], function() {
    
        $("#paper1").animate({
                width: '719px',
                height: '794px',
                top: 0,
                left: 0,
                opacity: 1,
                position: "absolute",
                zIndex: 4
            }, { queue: true, duration: 300});
        $("#paper2").delay(200).animate({
                width: '719px',
                height: '794px',
                top: 0,
                left: 0,
                opacity: 1,
                position: "absolute",
                zIndex: 5
            }, { queue: true, duration: 300});
        $("#paper3").delay(400).animate({
                width: '719px',
                height: '794px',
                top: 0,
                left: 0,
                opacity: 1,
                position: "absolute",
                zIndex: 6
            }, { queue: true, duration: 300});
        $("#paper4").delay(600).animate({
                width: '719px',
                height: '794px',
                top: 0,
                left: 0,
                opacity: 1,
                position: "absolute",
                zIndex: 7
            }, { queue: true, duration: 300});
        $("#paper5").delay(800).animate({
                width: '719px',
                height: '794px',
                top: 0,
                left: 0,
                opacity: 1,
                position: "absolute",
                zIndex: 8
            }, { queue: true, duration: 300});
        $("#paper6").delay(1000).animate({
                width: '719px',
                height: '794px',
                top: 0,
                left: 0,
                opacity: 1,
                position: "absolute",
                zIndex: 9
            }, { queue: true, duration: 300});
        $("#paper7").delay(1200).animate({
                width: '719px',
                height: '794px',
                top: 0,
                left: 0,
                opacity: 1,
                position: "absolute",
                zIndex: 10
            }, { queue: true, duration: 300});
            
        $("#paper8").delay(1800).animate({
                width: '719px',
                height: '794px',
                top: 0,
                left: 0,
                opacity: 1,
                position: "absolute",
                zIndex: 11
            }, { queue: true, duration: 300});
        
        $("#contentarea").delay(2000).animate({ opacity: 1}, 500);
        $("#footer").delay(2000).animate({ opacity: 1}, 500);
		$("#quote").delay(2000).animate({ opacity: 1}, 500);
        $("#nav").delay(2000).animate({ opacity: 1, left: '240px'}, 500);
        $("#menu").delay(2500).animate({ opacity: 1}, 500);
    });
    
$("#menu").live('click', function() {
        if ($("#nav").css("left") != "400px") {
        
            $(this).animate({ left: '+=160px'}, 500);
            $("#nav").animate({ left: '400px'}, 500, function() {
                $("#nav-items").fadeIn(500);
            });
        }
        else {
            $("#nav-items").fadeOut(500, function() {
                $("#menu").animate({ left: '665px'}, 500);
                $("#nav").animate({ left: '240px'}, 500);
            });
        }
    });
});

[smichael05]

I used the png images because I needed the papers that are falling to be angled. With a jpg image there would be a white box around each page. Also, I am new to using jQuery and am not familiar with the jQuery.css method that you are referring to. Could you possibly let me know what I need to do in order to make this work. Thank you.

[venegal]

There's not much to say about that. It works just like the jQuery.animate method, only without the animation. Here's the documentation: http://api.jquery.com/css/

And my previous suggestion still stands: Don't use minified scripts in development, or the stacktraces your debugger (I do hope you use one!) gives you will be useless.