Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Location
    Indianapolis, IN
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript won't work in IE

    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

  • #2
    New to the CF scene
    Join Date
    Jan 2011
    Location
    Indianapolis, IN
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Additional Info

    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"

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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',
                    
    top0,
                    
    left0,
                    
    opacity1,
                    
    position"relative",
                    
    zIndex4
                
    }, { queuetrueduration300}); 
    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.

  • #5
    New to the CF scene
    Join Date
    Jan 2011
    Location
    Indianapolis, IN
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    $(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);
                });
            }
        });
    });

  • #6
    New to the CF scene
    Join Date
    Jan 2011
    Location
    Indianapolis, IN
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by smichael05; 02-07-2011 at 07:54 PM.

  • #7
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •