Can someone clarify this variable thing for me?

How come this works:

$(document).ready(function(){
   docReady();
});

var docReady = function(){
  if($('.page').length > 0){
    sideScroll();
  }
}

var sideScroll = function(){

    var $bl    = $(".grid-wrapper"),
        $th    = $(".grid"),
        blW    = $bl.outerWidth(),
        blSW   = $bl[0].scrollWidth,
        wDiff  = (blSW/blW)-1,  // widths difference ratio
        mPadd  = 60,  // Mousemove Padding
        damp   = 20,  // Mousemove response softness
        mX     = 0,   // Real mouse position
        mX2    = 0,   // Modified mouse position
        posX   = 0,
        mmAA   = blW-(mPadd*2), // The mousemove available area
        mmAAr  = (blW/mmAA);    // get available mousemove fidderence ratio

	$bl.mousemove(function(e) {
        mX = e.pageX - this.offsetLeft;
        mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
	});

    setInterval(function(){    
		posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
		$th.css({
			"-webkit-transform": "translate3d(" + -posX*wDiff +"px,0,0)",
			"-moz-transform": "translate3d(" + -posX*wDiff +"px,0,0)",
			"transform": "translate3d(" + -posX*wDiff +"px,0,0)"
		});
    }, 10); 

}

but this don’t, it gives me “Uncaught TypeError: Cannot read property ‘scrollWidth’ of undefined”.

var myPage = $('.page').length > 0;

$(document).ready(function(){
   docReady();
});


var docReady = function(){
  if(myPage){
    sideScroll();
  }
}

var sideScroll = function(){

    var $bl    = $(".grid-wrapper"),
        $th    = $(".grid"),
        blW    = $bl.outerWidth(),
        blSW   = $bl[0].scrollWidth,
        wDiff  = (blSW/blW)-1,  // widths difference ratio
        mPadd  = 60,  // Mousemove Padding
        damp   = 20,  // Mousemove response softness
        mX     = 0,   // Real mouse position
        mX2    = 0,   // Modified mouse position
        posX   = 0,
        mmAA   = blW-(mPadd*2), // The mousemove available area
        mmAAr  = (blW/mmAA);    // get available mousemove fidderence ratio

	$bl.mousemove(function(e) {
        mX = e.pageX - this.offsetLeft;
        mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
	});

    setInterval(function(){    
		posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
		$th.css({
			"-webkit-transform": "translate3d(" + -posX*wDiff +"px,0,0)",
			"-moz-transform": "translate3d(" + -posX*wDiff +"px,0,0)",
			"transform": "translate3d(" + -posX*wDiff +"px,0,0)"
		});
    }, 10); 

}

Shouldn’t the variable be considered a global variable, thus working everywhere? What am I missing?

Just guessing but I assume the script is at the end of the html as .page won’t exist if you have the script in the head or before the html.

If the script is in the head then put var myPage = $('.page').length > 0; inside the document ready function

Just to clarify, this will work:

<body>
<div class="page"></div>
<script>
var myPage = $('.page').length > 0;
</script>
</body>

But this won’t work, because when the script runs, it cannot see the rest of the page below it:

<body>
<script>
var myPage = $('.page').length > 0; // Cannot see elements below the script
</script>
<div class="page"></div>
</body>

And for similar reason this won’t work either, when the script is in the head:

<head>
<script>
var myPage = $('.page').length > 0; // Doesn't yet know about the body
</script>
</head>
<body>
<div class="page"></div>
</body>

So the lesson to take on here, is to place your scripts at the end of the body, just before the tag.

Thx for clarifying. However, the scripts are before the closing body tag, but the variable still wont work, even tho it’s global. If the page has “.page” the function should run, if not…well it shouldn’t. But when I go to the next page i get the console message I wrote above, IF using the variable… but if i just use $(‘.page’).length > 0, it works. This seems strange to me since the two blocks of code i showed in my first post should do the exact same thing yes?

It’s not crucial by any means, just curious why it’s like this.

Can you please provide more of the code, such as the HTML, so that this issue can be more fully explored?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.