Question

ok so i created a function in jQuery called $.fn.customTabs and i am setting variables inside of it to certain elements within the DOM. when i call it the second time, the variables are being set to different DOM elements and effecting my first call to the function.

Any idea how to have certain instance variables with in each function call?

EDIT

$.fn.customTabs = function(data,user_options) {
    $this = $(this);
    alert($this.attr('id'));
    var options = 
        {
            speed : 750,
            startIndex : 0,
            duration : 10000,
            height : "300px"
        },
        final_options = {
            "width" : "100% - 5px",
            "position" : "relative",
            "margin" : "0",
            "padding" : "5px"
        };
    $.extend(options,user_options);
    var tabPadding = parseInt(final_options.padding,10);
    var cssTabHeight = parseInt(options.height,10) - tabPadding + "px";
    $this.css(final_options);
    var num = data.length - 1;
    if(data) {
        $container = $('<ul class=\"tabsContainer\">').css({
            height : options.height,
            position : "relative",
            "list-style" : "none",
            padding : "0",
            margin : "0"
        });
        for(var count = 0; count <= num; count++) {
            $object = data[count];

            $tab = $('<li id=\"tab_' + count + '\" class=\"tab\">').css({
                height : cssTabHeight
            });

            if($object.element) {
                $object.element.css({
                    margin : "0",
                    padding : $object.element.css('padding') || "0"
                });
                if($object.element.is('a')) {
                    $tab.css({
                        "text-align" : "center" 
                    });
                    $object.element.find('img').css({
                        "max-height" : "100%",
                        "max-width" : "100%"
                    });
                } else if($object.element.is('img')) {
                    $tab.css({
                        "text-align" : "center" 
                    });
                    $object.element.css({
                        "max-height" : "100%",
                        "max-width" : "100%"
                    });
                } else {
                    $object.element.css({
                        width : "100% - " + tabPadding,
                        height : "100%"
                    });
                }
                $object.element.appendTo($tab);
            } else {

            }

            $container.append($tab);
        }
        $tabWrapper = $('<div>').html($container).css({
            overflow: "hidden"
        });
        $this.html($tabWrapper);
    } else {

    }

    var tabIndex = options.startIndex,
        x,
        tabHeight = parseInt(cssTabHeight,10) + tabPadding;

    var interval = setInterval(function() {
        makeInterval();
    },options.duration);

    $('.tabMenuButton').click(function() {
        clearInterval(interval);
        var element = this;
        var index;
        $('.tabMenuButton').each(function(i, ele) {
            if(ele == element) {
                index = i;
            }
        });
        var diffrence = index - tabIndex;
        if(diffrence < 0) {
            x = "-=" + (tabHeight*parseInt(diffrence,10));
            changeTab(x);
        } else if(diffrence > 0) {
            x = "-=" + (tabHeight*diffrence);
            changeTab(x);
        }

        tabIndex = index;
        interval = setInterval(function() {
            makeInterval();
        },options.duration);
    });

    var makeInterval = function() {
        if(tabIndex != num) {
            tabIndex++;
            x = "-=" + tabHeight;
        } else {
            tabIndex = 0;
            x = "+=" + (tabHeight*num);
        }

        changeTab(x);
    }

    var changeTab = function(distance) {
        $container.animate({
            "top" : distance + "px"
        }, options.speed);
    }

    return $this;
}

after the second call to this function is made, the $container is being set to the element created in the second call for both Intervals.

BTW this code works just gets messed up when there are two of them on the same page.

Answer 1

(…) when i call it the second time, the variables are being set to different DOM elements and effecting my first call to the function. Any idea how to have certain instance variables with in each function call?

The problem you are facing is the usage of global variables in places where you should use local ones. As a result, all the elements on which you execute the jQuery function, share the same variables.

These variables are:

• $this,
• $container,
• $object,
• $tab,
• $tabWrapper,
• and possibly other.

So it looks like you are treating normal variables with names beginning with $ as if they were special, automatically local. They are not local: you are just creating global variables with dolar sign at the beginning of their names.

There are two solutions for you:

• add var keyword in places where you first define it, or even put all variables at the beginning of appropriate functions, with var keyword in front of them, or
• follow the guide of code quality tools such as JSLint: http://www.jslint.com/,

And remember: your jQuery function must work independently between elements, so you must not use global variables. Instead, if you need to somehow store data between calls or for some reason within the code, use one of two options:

• use closures (storing variables in outer scope, yet within the scope of jQuery function),
• use jQuery’s .data() to attach data to specific elements (use your own function-specific naming to not interfere with other functions and/or plugins used by the user of your script),