jQuery Global variables are not accessible by functions

Question

I have a snippet of code, to calculate the width of some child items and instead of declaring the parentWidth and other variables in EVERY function.. I am trying to create Global variables to be re-used.. but, its not working.

Here is a portion of my code:

$(document).ready(function(){

parentWidth = $(this).parent().width();     // parent width in pixels
margin = parentWidth/100;               // pixel equivalent of a 1% margin
border = 6;                 // 6px total border for each input field 


    $(".element.twoinone input").each(function() {
        $(this).css( 'width',
            (((parentWidth - (margin * 2)) - (border * 2))  / 2)
            + 'px' );
    });
});

The parentWidth, margin and border variables are NOT accessed by the 'each' function (which I have multiple of). I've tried using live(), livequery(),.. etc.. but, no dice. I know its probably something simple that this noob is overlooking.. so any help is greatly appreciated !! Thanks! Also, if you have any input on calculating width percentages based on a parent containers width and accounting for each elements border, margin and qty,.. I'm all ears :D

UPDATE Isn't this: $(document).ready(function(){

parentWidth = $(this).parent().width();     

    $(".element.twoinone input").each(function() {
        $(this).css( 'width',
            (((parentWidth - (margin * 2)) - (border * 2))  / 2)
            + 'px' );
    });
});

The same as this:

$(document).ready(function(){

    $(".element.twoinone input").each(function() {
        $(this).css( 'width',
            (((     $(this).parent().width()     - (margin * 2)) - (border * 2))  / 2)
            + 'px' );
    });
});

What are you expecting this to be when calculating the parent width? — Nick Craver
– Nick Craver, Commented Jul 31, 2010 at 3:10
I am expecting 'this' to be the element I am using the variable IN.. so, when using parentWidth inside $(".element.twoinone input"), I am wanting 'this' == $(".element.twoinone input") — revive
– revive, Commented Jul 31, 2010 at 3:37
Isn't this: parentWidth = $(this).parent().width(); $(".element.twoinone input").each(function() { $(this).css( 'width', (((parentWidth - (margin * 2)) - (border * 2)) / 2) + 'px' ); }); the same as this: $(".element.twoinone input").each(function() { $(this).css( 'width', ((( $(this).parent().width() - (margin * 2)) - (border * 2)) / 2) + 'px' ); }); — revive
– revive, Commented Jul 31, 2010 at 4:01

Nick Craver · Accepted Answer · 2010-07-31 03:13:17Z

2

When you're declaring this:

parentWidth = $(this).parent().width();

You're not getting the width of the parent of that element (the <input>), it's using document for this, since that's the context you're in. You need to get the width inside the function, either inside each or as a plugin, but not "globally" like this.

answered Jul 31, 2010 at 3:13

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

3 Comments

revive Over a year ago

ah.. gotcha.. so, there is not way to make a variable using 'this' and when using that variable inside of a function, have 'this' == the element we are in at that time ???

Nick Craver Over a year ago

@revive - You could make $(this).parentWidth() a function shortcut if you wanted, like this: $.fn.parentWidth = function { return this.parent().width(); }; But I'm not sure that buys you much, so up to you :)

revive Over a year ago

haven't tried this yet.. I just want to be able to access the variables in all the functions within that docready... will this achieve that?

Amr Elgarhy · Accepted Answer · 2010-07-31 03:13:17Z

0

parentWidth is not a global variable it exist in the document.ready function but its not a global variable for any function.

Except if you declared this variable before the document.ready:
Something like this:

var parentWidth;
$(document).ready(function(){
parentWidth = $(this).parent().width();
....

The same goes with the other 2 variables.

answered Jul 31, 2010 at 3:13

Amr Elgarhy

69.2k70 gold badges193 silver badges312 bronze badges

4 Comments

Nick Craver Over a year ago

This isn't the problem, the variables are accessible, scoping isn't an issue here :)

revive Over a year ago

I tried both - adding it as a Var before the docready.. and also changing the name of parentWidth to elementWidth.. nothing changed and not widths were calculated.. they DO calculate properly when I include the variables in each of the functions.. but, I am hoping to learn a way to re-use code better than that LOL :D Thanks!

Amr Elgarhy Over a year ago

yes i got it, @Nick Craver is taking you to the right solution.

revive Over a year ago

see clarification in orig post

Starx · Accepted Answer · 2010-07-31 03:17:35Z

0

Try putting the variables outside the $(document).ready()

answered Jul 31, 2010 at 3:17

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Collectives™ on Stack Overflow

jQuery Global variables are not accessible by functions

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related