Ask your WordPress questions! Pay money and get answers fast! (more info)

Javascript organic tabs does not work anymore WordPress

Suddenly Organic tabs (Chris Coyer) script stops to work.
Now in i click in the right sidebar tab "Da non perdere" nothing happens.
Insteadm it should be display with a smooth transition an other block of links as in this page:

http://css-tricks.com/examples/OrganicTabs/

You can check out here:

http://www.progettobenesserecompleto.it/

Thanks

Answers (2)

2012-12-05

Arnav Joy answers:

did you added anything like slider or anything else when it stopped working?


maryhellen comments:

Until few days ago both anything slider and organic tabs works.


maryhellen comments:

What i do is switch many times from a theme to another to do tests.

2012-12-05

webGP answers:

Hello!

Your tabs markup doesn't suit to organicTabs function, please replace content in http://www.progettobenesserecompleto.it/nonabusaredegliunderscore/wp-content/themes/twentyeleven/js/organictabs.jquery.js file with code below:


(function($) {

$.organicTabs = function(el, options) {

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

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 > h4 > a", "click", function(e) {
e.preventDefault();
// Figure out current list via CSS class
var tmp = base.$el.find("a.current").attr("href").split("#");
var curList = tmp[1];

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

// Figure out ID of new list
tmp = $newList.attr("href").split("#");
listID = tmp[1];

// Set outer wrapper height to (static) height of current inner list
$allListWrap = base.$el.find(".content-nov"),
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(".tab h4 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);


maryhellen comments:

Great! Now it works again. naut i can't see where was the missed piece. Can you tell me please?


maryhellen comments:

Now i see It was this one:

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

thanks


webGP comments:

There was also a problem with tab href parameter, it should be #tab-content, but you had full url page + #tab-content, so i chanded also this part of code:


var tmp = base.$el.find("a.current").attr("href").split("#");

var curList = tmp[1];



// List moving to

$newList = $(this),



// Figure out ID of new list

tmp = $newList.attr("href").split("#");

listID = tmp[1];


maryhellen comments:

Thanks a lot