Tab Scrolling For Minimal Space
by bizamajig
HTML
<a href="#" id="scrollLeft">scroll left</a> | <a href="#" id="scrollRight">scroll right</a>
<div id="tabs" style="width: 400px; overflow: hidden;" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<div id="animateMe" style="width: 900px; position: absolute; left: -97px; ">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Tabs 1</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-2">Tabs 2</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-3">Tabs 3</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-4">Tabs 4</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-5">Tabs 5</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-6">Tabs 6</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-7">Tabs 7</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-8">Tabs 8</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-9">Tabs 9</a></li>
</ul>
</div>
<div style="margin-top: 50px;" id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">1</div>
<div style="margin-top: 50px;" id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">2</div>
<div style="margin-top: 50px;" id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">3</div>
<div style="margin-top: 50px;" id="tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">4</div>
<div style="margin-top: 50px;" id="tabs-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom...CSS
/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/
body
{
font-size: 10px;
}
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit...JavaScript
$(document).ready(function(){
$('#tabs').tabs();
$('#scrollLeft').click(function(){
var left = $('#animateMe').position().left;
$('#animateMe').animate({
'left' : ((left*1) - 50) + 'px'
});
return false;
});
$('#scrollRight').click(function(){
var left = $('#animateMe').position().left;
$('#animateMe').animate({
'left' : ((left*1) + 50) + 'px'
});
return false;
});
});