How should I be sharing Javascript functions across multiple pages?

Question

I don't completely understand how javascript works in an OOP model, so I come to stack overflow for wisdom.

My example code:

(function($) {
var $container = $('#container');
var $sidebar = $('#sidebar');


// Sidebar  
var currTab = $('#s1');

if(currTab) {
    currTab.parent().parent().parent().addClass('selectedTop');
    currTab.find(".sideContent").delay(300).slideToggle("slow");
    currTab.addClass('selected');
}

$('#sideTop').delegate('li', 'hover', function(event) {
    var $this = $(this);
    if (event.type == 'mouseenter') {
        if(!$this.hasClass("selected")){
            $this.siblings(".selected").children(".sideContent").toggle();
            $this.siblings(".selected").removeClass('selected');
            $this.find(".sideContent").toggle().addClass('selected');
            $this.addClass('selected');
        }
    }
});


})(this.jQuery);

This code caches my container and sidebar div and controls the hovering of tabs on my sidebar. These will be on every page, so I originally just included the js file on each page and it works as usual. Now I've gotten to a point where I want to customize each page with a specific tab of the sidebar open by default (defined by the currTab variable). When set, it will open by default, and stay open after the mouse leaves the sidebar.

I haven't found a way to customize currTab on each page without having to completely re-paste all the code associated with the sidebar, making any updates to the script cumbersome.

How should I be approaching this? Thanks

Don't think this is really about OOP.. – gnur Jul 07 '11 at 17:29 — gnur, Jul 07 '11 at 17:29
sorry, I didn't know how else to categorize it. – Steve Kelly Jul 07 '11 at 17:36 — Steve Kelly, Jul 07 '11 at 17:36

score 3 · Accepted Answer · edited May 23 '17 at 10:34

I'm sorry to have caused confusion with my lack of understanding, but one of the related questions answered mine in a way I didn't know how to search for:

He setup a "class" first, which could be included as a seperate JS, then communicated using jQuery.ClassName(options)

I've tried it and it works perfectly, seperating the code that is consistent, with the values that will change on each page.

(function($){
var undefined;

$.ClassName = function(options){
    var self = this;
    var cfg = $.extend(true, {}, this.defaults, options);

    // ********************
    // start:private
    // ********************
    function _init(){

    };

    // ********************
    // start:public
    // ********************
    this.methodName = function(){

    };

    _init();
};

$.ClassName.prototype.defaults = {};
})(jQuery);

score 1 · Answer 2 · answered Jul 07 '11 at 17:31

1

With classes. Just add a class such as "currTab" to whichever tab is active. In your JS, check for that class on the tab, and when the tab is changed, remove that class from the old one and add it to the new one.

answered Jul 07 '11 at 17:31

Chris Pratt

232,153
36
385
444

This and other solutions so far would all work in this instance, I'm just curious as to how I could achieve this with javascript for future use. I'm frustrated because it seems so simple in actionscript, but I'm stumped in JS – Steve Kelly Jul 07 '11 at 17:38
@Steve Well, you need *some* way of identifying the particular page, external to the Javascript that's remaining the same. How about giving each page an ID/class of "pagename1", "pagename2", etc., attached to the `body`, say. Then grab that ID with your jQuery and use that to determine which tab to open? – Matt Gibson Jul 07 '11 at 17:45
This scenario is usually handled on the server side. You make the determination of which page to assign the class to when your writing/generating the navigation for the response. – Chris Pratt Jul 07 '11 at 19:12

score 0 · Answer 3 · answered Jul 07 '11 at 17:32

0

Add a class to the item you want to be active by default. Use JS to detect the class and react accordingly.

answered Jul 07 '11 at 17:32

zzzzBov

174,988
54
320
367

score 0 · Answer 4 · answered Jul 07 '11 at 17:33

0

One way is, to declare currTab differently inside each HTML page, and remove "var currTab = $('#s1');" from your JavaScript file. The rest of currTab occurences in the JavaScript file are still able to reference it.

answered Jul 07 '11 at 17:33

Grace Huang

5,355
5
30
52

How should I be sharing Javascript functions across multiple pages?

4 Answers4