Javascript variable not working. Why?

Question

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
    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 ;)

Even without the error, the same problem persists ... {top:0, left:theOffset} is evaluated when executed, so no amount of closures of variable scope will fix the behavior and make it dynamic without knowing/[ab]using the scroll-to API/internals or re-invoking the localScroll function. — user166390
– user166390, Commented Nov 18, 2010 at 22:53

gnarf · Accepted Answer · 2010-11-18 23:39:44Z

1

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
});

answered Nov 18, 2010 at 23:39

gnarf

107k26 gold badges129 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Jackman · Accepted Answer · 2010-11-18 21:23:42Z

0

declare theOffset outside the jquery function


var theOffset = 0;

jquery( function ( $ ) {
} )

answered Nov 18, 2010 at 21:23

Andrew Jackman

14k8 gold badges38 silver badges44 bronze badges

4 Comments

Dave Over a year ago

can you explain why so I can understand?

user447356 Over a year ago

@Dave by doing this "theOffset" will gain global scope, and changing it in once place should be "visible" in all other places.

user166390 Over a year ago

The problem is value of theOffset is passed.

Dave Over a year ago

If the localScroll function is getting loaded before my init.js file (which contains the above code), do I need to declare the variable before localScroll loads, or just before "jQuery(function( $ ){});" which is inside init.js (which loads after localScroll plugin).

Matt · Accepted Answer · 2010-11-18 23:31:18Z

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.

quinz · Accepted Answer · 2017-08-30 12:22:18Z

0

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.)

edited Aug 30, 2017 at 12:22

quinz

1,3384 gold badges22 silver badges34 bronze badges

answered Aug 30, 2017 at 10:33

user8537459

1

Collectives™ on Stack Overflow

Javascript variable not working. Why?

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related