Javascript does not run on load. How can I fix in HTML?
Question
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.
3 answers
solution1
2 ACCPTED 2014-03-03 12:46:22
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/
solution2
0 2014-03-03 12:51:25
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
});
solution3
0
You may following these steps to get your expected result
- You have to ensure , your document include jquery library.
Then you may write your code like this way. Bydefault this function will be invoked
script tag start
organicTabs();
script tag end
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.