Question

OK, apologies in advance for posting a huge chunk of code!

My problem is this: I’m not an expert on the small development cycles of jQuery, can anyone spot anything in this code that would make it incompatible with jQuery 1.6.4?

The code was originally written for jQuery 1.4.4 so I’m looking for any changes between 1.4.4 and 1.6.4 that would affect the following code:

$(document).ready(function() { //when the document is ready...


//save selectors as variables to increase performance
var $window = $(window);
var $firstBG = $('#first');
var $firstGrid = $('#first .grid');
var $secondBG = $('#second');
var $thirdBG = $('#third');
var $fourthBG = $('#fourth');
var trainers = $("#second .bg");

var windowHeight = $window.height(); //get the height of the window


//apply the class "inview" to a section that is in the viewport
$('#first, #second, #third, #fourth').bind('inview', function (event, visible) {
        if (visible == true) {
        $(this).addClass("inview");
        } else {
        $(this).removeClass("inview");
        }
    });

//function that is called for every pixel the user scrolls. Determines the position of the background
/*arguments: 
    x = horizontal position of background
    windowHeight = height of the viewport
    pos = position of the scrollbar
    adjuster = adjust the position of the background
    inertia = how fast the background moves in relation to scrolling
*/
function newPos(x, windowHeight, pos, adjuster, inertia){
    return x + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
}

//function to be called whenever the window is scrolled or resized
function Move(){ 
    var pos = $window.scrollTop(); //position of the scrollbar

    //if the first section is in view...
    if($firstBG.hasClass("inview")){
        //call the newPos function and change the background position
        $firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 750, 0.3)}); 
    }

    //if the second section is in view...
    if($secondBG.hasClass("inview")){
        //call the newPos function and change the background position
        $secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
        //call the newPos function and change the secnond background position
        trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6)});
    }

    //if the third section is in view...
    if($thirdBG.hasClass("inview")){
        //call the newPos function and change the background position
        $thirdBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 2850, 0.3)});
    }

    //if the fourth section is in view...
    if($fourthBG.hasClass("inview")){
        //call the newPos function and change the background position for CSS3 multiple backgrounds
        $fourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 200, 0.9) + ", " + newPos(50, windowHeight, pos, 0, 0.7) + ", " + newPos(50, windowHeight, pos, 0, 0.5) + ", " + newPos(50, windowHeight, pos, 700, 0.3)});
    }

    $('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page
}

$window.resize(function(){ //if the user resizes the window...
    Move(); //move the background images in relation to the movement of the scrollbar
});     

$window.bind('scroll', function(){ //when the user is scrolling...
    Move(); //move the background images in relation to the movement of the scrollbar
});

});

Answer 1

In the case of this particular issue, the plugin jQuery Parallax was outdated. Updating to jQuery parallax v1.1 fixed the issue but the author has since removed it (I think). So that’s a word to the wise if you are using the plugin.