CODEWITHSUNDEEP
jqueryjquery-animateinternet-explorer-7
skribbz14
skribbz14

Reputation: 895

IE7 jQuery.animate() cannot slide everything to the left

I am designing a site where the front navigation involves sliding the entire page's contents to the left, right, and down. This works correctly in everything except IE7. The strangest part is that one of the three animations works perfectly (as if it were a modern browser), but for some reason the other two functions do not work.

Here is the function that works:

jQuery('#block-block-16 p').live('click',function(){ FadeHeaderFooter();

var $structure = jQuery('#structure');
var $colorBlock = jQuery('#news-color-block');  
var colorHeight = parseInt($colorBlock.css('margin-top'));
var w = jQuery(window).width(); //major difference
var slideHeight = FindSweetSpot('#news-color-block');

$structure.animate({ marginLeft: (w+2000) + "px" }, //math is different
                        1500, function(){
    $colorBlock.animate({ marginTop: (colorHeight - slideHeight) + "px" }, 
                        1000, function(){
        window.open (fakeurl.com','_self',false);
    });
});

});

Here is the one that does not:

jQuery('#block-block-18 p').live('click',function(){ FadeHeaderFooter();

var $structure = jQuery('#structure');
var $colorBlock = jQuery('#about-color-block');
var colorHeight = parseInt($colorBlock.css('margin-top'));
var w = jQuery("#main-content").width();
var slideHeight = FindSweetSpot('#about-color-block');


$structure.animate({ marginLeft: ((w/2)*-1) + "px" }, //
                        1500, function(){
    $colorBlock.animate({ marginTop: (colorHeight - slideHeight) + "px" }, 
                        1000, function(){
        window.open ('fakeurl.com','_self',false);
    });
});

});

Both are nearly identical. You'll see that variable w is declared with a different element, but that doesn't seem to be the problem (and works in EVERY other browser). What seems to be the problem is where I calculate what the new marginLeft will be.

i.e. This one works: marginLeft: (w+2000) + "px"

This one does not: marginLeft: ((w*.5)*-1) + "px"

The first one slides the page to the right and the second is trying to slide everything to the left.

It seems that IE7 is having trouble with sliding things left? I thought this may be from multiplying by -1, so I tried this:

var dist = (w*.5); var slide = dist - dist - dist;

No avail. Any help would be appreciated, thanks!

Upvotes: 0

Views: 266

Answers (1)

skribbz14
skribbz14

Reputation: 895

I discovered the problem! The element that was defined as w ( var w = jQuery("#main-content").width(); ) had the position value of "relative" and by switching that value to "absolute" I was able to get the desired effect across the board.

Lesson learned:

When using jQuery.animate() in IE7 be sure to have the parent element absolutely positioned. This applies when the children, that you are animating, are absolutely positioned as well.

Upvotes: 1

Related Questions