CODEWITHSUNDEEP
javascripthtml
Mohammed Hassan
Mohammed Hassan

Reputation: 3

Javascript does not run on load. How can I fix in HTML?

I have used Javascript for tabs but it's not working on document load. When I put it in (No wrap - in ) in jsfiddle, it's working fine with out any error. How can I make it run on load?

I'm not very good in Javascript.

My Javascript code is as follows:

$(function() {
    $("#content-switch").organicTabs();
});


// organicTabs plugin below
// http://css-tricks.com/organic-tabs/
(function($) {

    $.organicTabs = function(el, options) {

        var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find("#menunav");

        base.init = function() {

            base.options = $.extend({},$.organicTabs.defaultOptions, options);

            // Accessible hiding fix
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            }); 

            base.$nav.delegate("li > a", "click", function() {

                // Figure out current list via CSS class
                var curList = base.$el.find("a.current").attr("href").substring(1),

                // List moving to
                    $newList = $(this),

                // Figure out ID of new list
                    listID = $newList.attr("href").substring(1),

                // Set outer wrapper height to (static) height of current inner list
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                $allListWrap.height(curListHeight);

                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {

                    // Fade out current list
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {

                        // Fade in new list on callback
                        base.$el.find("#"+listID).fadeIn(base.options.speed);

                        // Adjust outer wrapper to fit new list snuggly
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        });

                        // Remove highlighting - Add to just-clicked tab
                        base.$el.find("#menunav li a").removeClass("current");
                        $newList.addClass("current");

                    });

                }   

                // Don't behave like a regular link
                // Stop propegation and bubbling
                return false;
            });

        };
        base.init();
    };

    $.organicTabs.defaultOptions = {
        "speed": 300
    };

    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };

})(jQuery);

Working fiddle by using JS in <body> is here: http://jsfiddle.net/wsk78/

And non-functional JS when I change it on load is here: http://jsfiddle.net/mAm6x/

I want it to work in HTML...

Thanks in advance.

Upvotes: 0

Views: 178

Answers (3)

user1400699
user1400699

Reputation:

You may following these steps to get your expected result

  1. You have to ensure , your document include jquery library.

  2. Then you may write your code like this way. Bydefault this function will be invoked

    script tag start

    organicTabs();

    script tag end

Upvotes: 0

gpgekko
gpgekko

Reputation: 3616

The problem is that you're defining the organic tabs plugin below the call to it. This works in body wrapped mode because the plugin code gets executed immediately while the call to the plugin is postponed till the document is ready by your jQuery wrapper (the $(function() { ... }) code).

With onLoad, the plugin code doesn't get executed because it waits on the onLoad event. So when the event fires, it doesn't know about the plugin and can't call it.

Also be aware that the jQuery wrapper is deemed incompatible with the onLoad event, so I removed that piece of code as well.

Fix it like this:

// organicTabs plugin below
// http://css-tricks.com/organic-tabs/
(function($) {
    $.organicTabs = function(el, options) {

        var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find("#menunav");

        base.init = function() {

            base.options = $.extend({},$.organicTabs.defaultOptions, options);

            // Accessible hiding fix
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            }); 

            base.$nav.delegate("li > a", "click", function() {

                // Figure out current list via CSS class
                var curList = base.$el.find("a.current").attr("href").substring(1),

                // List moving to
                    $newList = $(this),

                // Figure out ID of new list
                    listID = $newList.attr("href").substring(1),

                // Set outer wrapper height to (static) height of current inner list
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                $allListWrap.height(curListHeight);

                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {

                    // Fade out current list
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {

                        // Fade in new list on callback
                        base.$el.find("#"+listID).fadeIn(base.options.speed);

                        // Adjust outer wrapper to fit new list snuggly
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        });

                        // Remove highlighting - Add to just-clicked tab
                        base.$el.find("#menunav li a").removeClass("current");
                        $newList.addClass("current");

                    });

                }   

                // Don't behave like a regular link
                // Stop propegation and bubbling
                return false;
            });

        };
        base.init();
    };

    $.organicTabs.defaultOptions = {
        "speed": 300
    };

    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };

})(jQuery);

$("#content-switch").organicTabs();

Fiddle: http://jsfiddle.net/mAm6x/3/

Upvotes: 2

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28588

Usually developer assumed :

(function($) {
})();

it is equivalent to document.ready() but it is not. Here it is not necessary DOM is ready. It is anonymous function it invoke itself as soon as possible when the browser is interpreting your ecma-/javascript. It is a technique to define a scope. To make it run use:

$(document).ready(function(){
    //your code
});

Upvotes: 0

Related Questions