/**
* SCROLL TABS
*
* JQuery Plugin to manage scrollable tabs. See the 'defaultOptions' data structure for available options for configuration. The plugin is configured jointly via
* these Javascript options and CSS classes to style how it is displayed. Some of the CSS is set here in the javascript so that users will have minimal
* configuration to make the tabs themselves work, and should only have to do configuration on how they want it styled.
*
* Known Limitations:
* IE6 problems, it does not properly apply scrolling and therefore is always the 'full width.' Additionally, the multiple-class CSS styling does not work
* properly in IE6. We can work around this in the future by apply distinct class stylings that represent all the combinations.
*
* Version: 2.0
* Author: Josh Reed
*/
(function($) {
$.fn.scrollTabs = function(opts){
var initialize = function(state){
opts = $.extend({}, $.fn.scrollTabs.defaultOptions, opts);
if($(this).prop('tagName').toLowerCase() === 'ul'){
this.itemTag = 'li';
} else {
this.itemTag = 'span';
}
$(this).addClass('scroll_tabs_container');
if($(this).css('position') === null || $(this).css('position') === 'static'){
$(this).css('position','relative');
}
$(this.itemTag, this).last().addClass('scroll_tab_last');
$(this.itemTag, this).first().addClass('scroll_tab_first');
$(this).html("
"+$(this).html()+"
");
$('.scroll_tab_inner > span.scroll_tab_left_finisher', this).css({
'display': 'none'
});
$('.scroll_tab_inner > span.scroll_tab_right_finisher', this).css({
'display': 'none'
});
var _this = this;
$('.scroll_tab_inner', this).css({
'margin': '0px',
'overflow': 'hidden',
'white-space': 'nowrap',
'-ms-text-overflow': 'clip',
'text-overflow': 'clip',
'font-size': '0px',
'position': 'absolute',
'top': '0px',
'left': opts.left_arrow_size + 'px',
'right': opts.right_arrow_size + 'px'
});
// If mousewheel function not present, don't utilize it
if($.isFunction($.fn.mousewheel)){
$('.scroll_tab_inner', this).mousewheel(function(event, delta){
// Only do mousewheel scrolling if scrolling is necessary
if($('.scroll_tab_right_button', _this).css('display') !== 'none'){
this.scrollLeft -= (delta * 30);
state.scrollPos = this.scrollLeft;
event.preventDefault();
}
});
}
// Set initial scroll position
$('.scroll_tab_inner', _this).animate({scrollLeft: state.scrollPos + 'px'}, 0);
$('.scroll_tab_left_button', this).css({
'position': 'absolute',
'left': '0px',
'top': '0px',
'width': opts.left_arrow_size + 'px',
'cursor': 'pointer'
});
$('.scroll_tab_right_button', this).css({
'position': 'absolute',
'right': '0px',
'top': '0px',
'width': opts.right_arrow_size + 'px',
'cursor': 'pointer'
});
$('.scroll_tab_inner > '+_this.itemTag, _this).css({
'display': '-moz-inline-stack',
'display': 'inline-block',
'zoom':1,
'*display': 'inline',
'_height': '40px',
'-webkit-user-select': 'none',
'-khtml-user-select': 'none',
'-moz-user-select': 'none',
'-ms-user-select': 'none',
'-o-user-select': 'none',
'user-select': 'none'
});
var size_checking = function(){
var panel_width = $('.scroll_tab_inner', _this).outerWidth();
if($('.scroll_tab_inner', _this)[0].scrollWidth > panel_width){
$('.scroll_tab_right_button',_this).show();
$('.scroll_tab_left_button',_this).show();
$('.scroll_tab_inner',_this).css({left: opts.left_arrow_size + 'px', right: opts.right_arrow_size + 'px'});
$('.scroll_tab_left_finisher',_this).css('display','none');
$('.scroll_tab_right_finisher',_this).css('display','none');
if($('.scroll_tab_inner', _this)[0].scrollWidth - panel_width == $('.scroll_tab_inner', _this).scrollLeft()){
$('.scroll_tab_right_button', _this).addClass('scroll_arrow_disabled').addClass('scroll_tab_right_button_disabled');
} else {
$('.scroll_tab_right_button', _this).removeClass('scroll_arrow_disabled').removeClass('scroll_tab_right_button_disabled');
}
if ($('.scroll_tab_inner', _this).scrollLeft() == 0) {
$('.scroll_tab_left_button', _this).addClass('scroll_arrow_disabled').addClass('scroll_tab_left_button_disabled');
} else {
$('.scroll_tab_left_button', _this).removeClass('scroll_arrow_disabled').removeClass('scroll_tab_left_button_disabled');
}
} else {
$('.scroll_tab_right_button',_this).hide();
$('.scroll_tab_left_button',_this).hide();
$('.scroll_tab_inner',_this).css({left: '0px', right: '0px'});
if($('.scroll_tab_inner > '+_this.itemTag+':not(.scroll_tab_right_finisher):not(.scroll_tab_left_finisher):visible', _this).size() > 0){
$('.scroll_tab_left_finisher',_this).css('display','inline-block');
$('.scroll_tab_right_finisher',_this).css('display','inline-block');
}
}
};
size_checking();
state.delay_timer = setInterval(function(){
size_checking();
}, 500);
var press_and_hold_timeout;
$('.scroll_tab_right_button', this).mousedown(function(e){
e.stopPropagation();
var scrollRightFunc = function(){
var left = $('.scroll_tab_inner', _this).scrollLeft();
state.scrollPos = Math.min(left + opts.scroll_distance,$('.scroll_tab_inner', _this)[0].scrollWidth - $('.scroll_tab_inner', _this).outerWidth());
$('.scroll_tab_inner', _this).animate({scrollLeft: (left + opts.scroll_distance) + 'px'}, opts.scroll_duration);
};
scrollRightFunc();
press_and_hold_timeout = setInterval(function(){
scrollRightFunc();
}, opts.scroll_duration);
}).bind("mouseup mouseleave", function(){
clearInterval(press_and_hold_timeout);
}).mouseover(function(){
$(this).addClass('scroll_arrow_over').addClass('scroll_tab_right_button_over');
}).mouseout(function(){
$(this).removeClass('scroll_arrow_over').removeClass('scroll_tab_right_button_over');
});
$('.scroll_tab_left_button', this).mousedown(function(e){
e.stopPropagation();
var scrollLeftFunc = function(){
var left = $('.scroll_tab_inner', _this).scrollLeft();
state.scrollPos = Math.max(left - opts.scroll_distance,0);
$('.scroll_tab_inner', _this).animate({scrollLeft: (left - opts.scroll_distance) + 'px'}, opts.scroll_duration);
};
scrollLeftFunc();
press_and_hold_timeout = setInterval(function(){
scrollLeftFunc();
}, opts.scroll_duration);
}).bind("mouseup mouseleave", function(){
clearInterval(press_and_hold_timeout);
}).mouseover(function(){
$(this).addClass('scroll_arrow_over').addClass('scroll_tab_left_button_over');
}).mouseout(function(){
$(this).removeClass('scroll_arrow_over').removeClass('scroll_tab_left_button_over');
});
$('.scroll_tab_inner > '+this.itemTag+(this.itemTag !== 'span' ? ', .scroll_tab_inner > span' : ''), this).mouseover(function(){
$(this).addClass('scroll_tab_over');
if($(this).hasClass('scroll_tab_left_finisher')){
$('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).addClass('scroll_tab_over').addClass('scroll_tab_first_over');
}
if($(this).hasClass('scroll_tab_right_finisher')){
$('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).addClass('scroll_tab_over').addClass('scroll_tab_last_over');
}
if($(this).hasClass('scroll_tab_first') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).hasClass('scroll_tab_first')){
$('.scroll_tab_inner > span.scroll_tab_left_finisher', _this).addClass('scroll_tab_over').addClass('scroll_tab_left_finisher_over');
}
if($(this).hasClass('scroll_tab_last') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).hasClass('scroll_tab_last')){
$('.scroll_tab_inner > span.scroll_tab_right_finisher', _this).addClass('scroll_tab_over').addClass('scroll_tab_right_finisher_over');
}
}).mouseout(function(){
$(this).removeClass('scroll_tab_over');
if($(this).hasClass('scroll_tab_left_finisher')){
$('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).removeClass('scroll_tab_over').removeClass('scroll_tab_first_over');
}
if($(this).hasClass('scroll_tab_right_finisher')){
$('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).removeClass('scroll_tab_over').removeClass('scroll_tab_last_over');
}
if($(this).hasClass('scroll_tab_first') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).hasClass('scroll_tab_first')){
$('.scroll_tab_inner > span.scroll_tab_left_finisher', _this).removeClass('scroll_tab_over').removeClass('scroll_tab_left_finisher_over');
}
if($(this).hasClass('scroll_tab_last') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).hasClass('scroll_tab_last')){
$('.scroll_tab_inner > span.scroll_tab_right_finisher', _this).removeClass('scroll_tab_over').removeClass('scroll_tab_right_finisher_over');
}
}).click(function(e){
e.stopPropagation();
$('.tab_selected',_this).removeClass('tab_selected scroll_tab_first_selected scroll_tab_last_selected scroll_tab_left_finisher_selected scroll_tab_right_finisher_selected');
$(this).addClass('tab_selected');
var context_obj = this;
if($(this).hasClass('scroll_tab_left_finisher')){
context_obj = $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).addClass('tab_selected').addClass('scroll_tab_first_selected');
}
if($(this).hasClass('scroll_tab_right_finisher')){
context_obj = $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).addClass('tab_selected').addClass('scroll_tab_last_selected');
}
if($(this).hasClass('scroll_tab_first') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).hasClass('scroll_tab_first')){
$('.scroll_tab_inner > span.scroll_tab_left_finisher', _this).addClass('tab_selected').addClass('scroll_tab_left_finisher_selected');
}
if($(this).hasClass('scroll_tab_last') || $('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).hasClass('scroll_tab_last')){
$('.scroll_tab_inner > span.scroll_tab_right_finisher', _this).addClass('tab_selected').addClass('scroll_tab_left_finisher_selected');
}
// "Slide" it into view if not fully visible.
scroll_selected_into_view.call(_this, state);
opts.click_callback.call(context_obj,e);
});
// Check to set the edges as selected if needed
if($('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_first', _this).hasClass('tab_selected'))
$('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_left_finisher', _this).addClass('tab_selected').addClass('scroll_tab_left_finisher_selected');
if($('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_last', _this).hasClass('tab_selected'))
$('.scroll_tab_inner > '+_this.itemTag+'.scroll_tab_right_finisher', _this).addClass('tab_selected').addClass('scroll_tab_right_finisher_selected');
};
var scroll_selected_into_view = function(state){
var _this = this;
var selected_item = $('.tab_selected:not(.scroll_tab_right_finisher, .scroll_tab_left_finisher)', _this);
var left = $('.scroll_tab_inner', _this).scrollLeft();
var scroll_width = $('.scroll_tab_inner', _this).width();
if(selected_item && typeof(selected_item) !== 'undefined' && selected_item.position() && typeof(selected_item.position()) !== 'undefined'){
if(selected_item.position().left < 0){
state.scrollPos = Math.max(left + selected_item.position().left + 1,0);
$('.scroll_tab_inner', _this).animate({scrollLeft: (left + selected_item.position().left + 1) + 'px'}, opts.scroll_duration);
} else if ((selected_item.position().left + selected_item.outerWidth()) > scroll_width){
state.scrollPos = Math.min(left + ((selected_item.position().left + selected_item.outerWidth()) - scroll_width),$('.scroll_tab_inner', _this)[0].scrollWidth - $('.scroll_tab_inner', _this).outerWidth());
$('.scroll_tab_inner', _this).animate({scrollLeft: (left + ((selected_item.position().left + selected_item.outerWidth()) - scroll_width)) + 'px'}, opts.scroll_duration);
}
}
};
var ret = [];
this.each(function(){
var backup = $(this).html();
var state = {};
state.scrollPos = 0;
initialize.call(this, state);
var context_obj = this;
ret.push({
domObject: context_obj,
state: state,
addTab: function(html, position){
if(typeof(position) === 'undefined'){
position = $('.scroll_tab_inner > '+context_obj.itemTag, context_obj).length - (context_obj.itemTag === 'span' ? 2 : 0);
}
$('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_last', context_obj).removeClass('scroll_tab_last');
$('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_first', context_obj).removeClass('scroll_tab_first');
backup = "";
var count = 0;
$('.scroll_tab_inner > '+context_obj.itemTag, context_obj).each(function(){
if($(this).hasClass('scroll_tab_left_finisher') || $(this).hasClass('scroll_tab_right_finisher')) return true;
if(position == count){
backup += html;
}
backup += $(this).clone().wrap('').parent().html();
count++;
});
if(position >= count)
backup += html;
this.destroy();
initialize.call(context_obj, state);
this.refreshFirstLast();
},
removeTabs: function(jquery_selector_str){
$('.scroll_tab_left_finisher', context_obj).remove();
$('.scroll_tab_right_finisher', context_obj).remove();
$(jquery_selector_str, context_obj).remove();
$('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_last', context_obj).removeClass('scroll_tab_last');
$('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_first', context_obj).removeClass('scroll_tab_first');
this.refreshState();
},
destroy: function(){
clearInterval(state.delay_timer);
$(context_obj).html(backup);
$(context_obj).removeClass('scroll_tabs_container');
},
refreshState: function(){
$('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_last', context_obj).removeClass('scroll_tab_last');
$('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_first', context_obj).removeClass('scroll_tab_first');
backup = $('.scroll_tab_inner',context_obj).html();
this.destroy();
initialize.call(context_obj, state);
this.refreshFirstLast();
},
clearTabs: function(){
backup = "";
this.destroy();
initialize.call(context_obj, state);
this.refreshFirstLast();
},
refreshFirstLast: function(){
var old_last_item = $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_last', context_obj);
var old_first_item = $('.scroll_tab_inner > '+context_obj.itemTag+'.scroll_tab_first', context_obj);
old_last_item.removeClass('scroll_tab_last');
old_first_item.removeClass('scroll_tab_first');
if(old_last_item.hasClass('tab_selected'))
$('.scroll_tab_inner > span.scroll_tab_right_finisher', context_obj).removeClass('tab_selected scroll_tab_right_finisher_selected');
if(old_first_item.hasClass('tab_selected'))
$('.scroll_tab_inner > span.scroll_tab_left_finisher', context_obj).removeClass('tab_selected scroll_tab_left_finisher_selected');
if($('.scroll_tab_inner > '+context_obj.itemTag+':not(.scroll_tab_right_finisher):not(.scroll_tab_left_finisher):visible', context_obj).size() > 0){
var new_last_item = $('.scroll_tab_inner > '+context_obj.itemTag+':not(.scroll_tab_right_finisher):visible', context_obj).last();
var new_first_item = $('.scroll_tab_inner > '+context_obj.itemTag+':not(.scroll_tab_left_finisher):visible', context_obj).first();
new_last_item.addClass('scroll_tab_last');
new_first_item.addClass('scroll_tab_first');
if(new_last_item.hasClass('tab_selected'))
$('.scroll_tab_inner > span.scroll_tab_right_finisher', context_obj).addClass('tab_selected').addClass('scroll_tab_right_finisher_selected');
if(new_first_item.hasClass('tab_selected'))
$('.scroll_tab_inner > span.scroll_tab_left_finisher', context_obj).addClass('tab_selected').addClass('scroll_tab_right_finisher_selected');
} else {
$('.scroll_tab_inner > span.scroll_tab_right_finisher', context_obj).hide();
$('.scroll_tab_inner > span.scroll_tab_left_finisher', context_obj).hide();
}
},
hideTabs: function(domObj){
$(domObj, context_obj).css('display','none');
this.refreshFirstLast();
},
showTabs: function(domObj){
$(domObj, context_obj).css({
'display': '-moz-inline-stack',
'display': 'inline-block',
'*display': 'inline'
});
this.refreshFirstLast();
},
scrollSelectedIntoView:function(){
scroll_selected_into_view.call(context_obj, state);
}
});
});
if(this.length == 1){
return ret[0];
} else {
return ret;
}
};
$.fn.scrollTabs.defaultOptions = {
scroll_distance: 300,
scroll_duration: 300,
left_arrow_size: 26,
right_arrow_size: 26,
click_callback: function(e){
var val = $(this).attr('rel');
if(val){
window.location.href = val;
}
}
};
})(jQuery);