jQuery plugin variables

Question

I have the following code

(function($) {
    // carousel
    var Carousel = {
        settings: {
            itemsPerPage: 1,
            itemsPerTransition: 1,
            noOfRows: 1,
            pagination: true,
            nextPrevLinks: true,
            speed: 'normal',
            easing: 'swing',
            loop: false,
            auto: true,
            autoTime: 4000,

            maxHeight: 300,
            maxWidth: 500
        },
        init: function(el, options) 
        {
            if (!el.length) 
            { 
                return false; 
            }

            this.options = $.extend({}, this.settings, options);

            this.container = el;

            this.panelHeight = 0;
            this.panelWidth = 0;
            this.numPanels = 0;

            // Find biggest panel in set
            this.container.find(".tinycarousel > li > div").each(function() 
            {
                if($(this).outerHeight() > this.panelHeight)
                {
                    this.panelHeight = $(this).outerHeight();
                }

                if($(this).outerWidth() > this.panelWidth)
                {
                    this.panelWidth = $(this).outerWidth();
                }

                this.numPanels++;
            });

            alert(this.numPanels);
        },
        autoSwitch: function()
        {
            this.container.find(".tinycarousel").animate({marginLeft: -panelWidth});
        }
    };

    // bridge
    $.fn.tinycarousel = function(options) {
        return this.each(function() {
            var obj = Object.create(Carousel);
            obj.init($(this), options);
            $.data(this, 'carousel', obj);
        });
    };
})(jQuery);

The problem I'm having here is that this.numPanels gives a result of 0 (and I know it should be 3). It worked before I used this. and just had numPanels as an ordinary variable, but now it doesn't. I'm sorry I can't offer any more information, but my question is this: how can I make variables inside a jQuery plugin 'editable'.

EDIT My apologies for any confusion - I just didn't want to post a silly amount of code and make it unreadable. Please see my full code above.

EDIT 2 I feel like suck a pillock... Take a look at the autoSwitch function - this is where I get an error: panelWidth is not defined which is why I tried using this.

Josiah Ruddell · Accepted Answer · 2011-03-09 21:08:39Z

9

this.numPanels++ is local in scope to the anonymous function called in your each(). If you replaced your initial declaration to var numPanels = 0; and accessed it within your function (or passed in numPanels by reference) you'll get the expected result.

Do it like this:

this.panelHeight = 0;
this.panelWidth = 0;
this.numPanels = 0;
var self = this; // reference to this
// Find biggest panel in set
this.container.find(".tinycarousel > li > div").each(function() {
    if($(this).outerHeight() > self.panelHeight) { // use self
        self.panelHeight = $(this).outerHeight();  // use self
    }

    if($(this).outerWidth() > self.panelWidth){    // use self
        self.panelWidth = $(this).outerWidth();    // use self
    }
    self.numPanels++; // use self
});

edited Mar 9, 2011 at 21:08

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

answered Mar 9, 2011 at 20:41

iivel

2,57623 silver badges19 bronze badges

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

1 Comment

Bojangles Over a year ago

My apologies for the confusion - please see my OP for the whole code. I should have been clearer.

ChevCast · Accepted Answer · 2011-03-09 20:41:09Z

2

It sounds like you were using a global variable when it worked. That's not good practice. this might need to be wrapped in a jquery function call. Try doing $(this).numPanels first. I can't see the rest of your code so I don't know if that will work. If it doesn't then try storing the variable by attaching it to a DOM element. Like this quick example:

$('#myElement').data('numPanels', 0); // Storing the data.

var numPanels = $('#myElement').data('numPanels'); // Retrieving the data.
numPanels++; // Do work.
$('#myElement').data('numPanels', numPanels); // Storing the new data.

answered Mar 9, 2011 at 20:41

ChevCast

59.4k66 gold badges223 silver badges331 bronze badges

1 Comment

Bojangles Over a year ago

My apologies for the confusion - please see my OP for the whole code. I should have been clearer.

Gergely Fehérvári · Accepted Answer · 2011-03-09 20:46:00Z

0

the problem with the this scope.

you created a this variable outside of everithing, and then you want to call the this variable inside of an each function.

they have different scopes.

you need to create a global variable wich accesible in every object.

var numPanels = 0;

and then yo can use numPanels++;

answered Mar 9, 2011 at 20:46

Gergely Fehérvári

7,9816 gold badges52 silver badges77 bronze badges

1 Comment

Bojangles Over a year ago

Edited my OP (See the EDIT 2 bit) - sorry.

Collectives™ on Stack Overflow

jQuery plugin variables

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related