Javascript variable not working. Why?
I'm not understanding something about variables in javascript. I am trying to change/calculate "offset" (with the variable "theOffset") either before the localScroll function occurs, or more preferably when you resize the window. None of the instances below work, accept for the "//initialize offset".
How do I get the variable "theOffset" inside "$.localScroll" to change?
jQuery(function( $ ){
//initialize offset
开发者_Go百科 var windowWidth = $(window).width();
if (windowWidth < 900) {
theOffset = 0;
} else {
theOffset = ($(window).width() - 900) / -2;
}
$(window).resize(function() {
//calculate offset
var windowWidth = $(window).width();
if (windowWidth < 900) {
theOffset = 0;
} else {
theOffset = ($(window).width() - 900) / -2;
}
});
$.localScroll({
target: '#content',
queue:true,
duration:1500,
hash:true,
stop:true,
onBefore:function( e, anchor, $target ){
//calculate offset
var windowWidth = $(window).width();
if (windowWidth < 900) {
theOffset = 0;
} else {
theOffset = ($(window).width() - 900) / -2;
}
},
offset: {top:0, left: theOffset,
onAfter:function( anchor, settings ){
if (windowWidth < 900) {
theOffset = 0;
} else {
theOffset = ($(window).width() - 900) / -2;
}
}
});
});
If need to know, I am centering a div container to the window with the offset in a fancy side scrolling website ;)
You could declare a myOffset
object that will be passed by reference to offset:
You can also refine the almost quadruplicated function into a single named function:
var myOffset = {top: 0, left: theOffset};
function calcOffset() {
var windowWidth = $(window).width();
if (windowWidth < 900) {
myOffset.left = 0;
} else {
myOffset.left = (windowWidth - 900) / -2;
}
}
calcOffset();
// note leaving off the () will pass the function as a parameter instead of calling it
$(window).resize(calcOffset);
$.localScroll({
target: '#content',
queue: true,
duration: 1500,
hash: true,
stop: true,
onBefore: calcOffset,
offset: myOffset,
onAfter: calcOffset
});
declare theOffset outside the jquery function
var theOffset = 0;
jquery( function ( $ ) {
} )
I think your problem is here:
offset: {top:0, left: theOffset,
First off, you are missing a trailing }.
Secondly, you are doing what is called "passing by value" - the value that is sent when you call $.localscroll() is actually a copy of the value specified in theOffset.
Which version of localScroll are you using? I downloaded the latest source I could find, which was 1.2.7, and I see nothing about offset anywhere.
There is no immediate way I can think of addressing your problem without seeing the localScroll source. Sometimes authors of jQuery plugins like this provide a means of updating options. If that is not the case, you may have to modify the localScroll source to grab the offset value via a function callback instead of via an object property:
offset: {top:0, left: function() { return theOffset; } }
Note that the above will not work without modifying the localScroll source to get this data via a function call instead of options property.
Note that in the above example, if you call setupSomeGlobals()
again, a new closure (stack-frame!) is created. The old gLogNumber
, gIncreaseNumber
, gSetNumber
variables are overwritten with new functions that have the new closure. (In JavaScript, whenever you declare a function inside another function, the inside function(s) is/are recreated again each time the outside function is called.)
精彩评论