Skip to content

Instantly share code, notes, and snippets.

@jorgepinon
Created September 9, 2012 15:43
Show Gist options
  • Save jorgepinon/3685151 to your computer and use it in GitHub Desktop.
Save jorgepinon/3685151 to your computer and use it in GitHub Desktop.
@chriscoyier's organic-tabs with minHeight added
// Thanks to Chris Coyier: http://css-tricks.com/organic-tabs/
// I added a quick minHeight option and a check for it on line 50
(function($) {
$.organicTabs = function(el, options) {
var base = this;
base.$el = $(el);
base.$nav = base.$el.find(".nav");
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();
// ADDED CHECK FOR HEIGHT
if (base.options.minHeight && newHeight < base.options.minHeight) { newHeight = base.options.minHeight };
$allListWrap.animate({
height: newHeight
});
// Remove highlighting - Add to just-clicked tab
base.$el.find(".nav 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,
"minHeight": 400
};
$.fn.organicTabs = function(options) {
return this.each(function() {
(new $.organicTabs(this, options));
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment