Hello, please sign in or register
You are here: Home

Jquery Scroll Tabs ... like browser tabs

I've seen scroll tabs before and they scroll the content as you click on a different tab.
This is more like copying the default behavior of the browser tabs.

Demo

  • Apples
  • Pears
  • Stairs
  • Cares
  • Elephants
  • Spanish Chickens
  • Marlborough House
  • Thameside Tavern
  • Apples
  • Pears
  • Stairs
  • Cares
  • Elephants
  • Spanish Chickens
  • Marlborough House
  • Thameside Tavern

Code

<script type="text/javascript">
$(document).ready(function(){
// Enable or leave the keys
$('.slider').each(function(){
if($('li:last',this).width()+$('li:last',this).offset().left-$('li:first',this).offset().left>$('div',this).width()){
// enable the buttons
$('button',this).css('display','inline');
$('button.prev',this).css('visibility','hidden');
}
});


$(".slider .next").click(function(){
//Remove the exist selector
//Set the width to the widest of either
var $div =$('div',this.parentNode)
,maxoffset = $('li:last',$div).width()+$('li:last',$div).offset().left - $('li:first',$div).offset().left - $div.width()
,offset = Math.abs(parseInt( $('ul',$div).css('marginLeft') ))
,diff = $div.width();

if( offset >= maxoffset )
return;
else if ( offset + diff >= maxoffset ){
diff = maxoffset - offset + 20;
// Hide this
$(this).css('visibility','hidden');
}
// enable the other
$('.prev', this.parentNode).css('visibility','visible');

$("ul", $(this).parent() ).animate({
marginLeft: "-=" + diff
},400, 'swing');
});

$(".slider .prev").click(function(){

var offset = Math.abs(parseInt( $('ul',this.parentNode).css('marginLeft') ));
var diff = $('div',this.parentNode).width();
if( offset <= 0 )
return;
else if ( offset - diff <= 0 ){
$(this).css('visibility','hidden');
diff = offset;
}
$('.next', this.parentNode).css('visibility','visible');

$("ul",$(this).parent()).animate({
marginLeft: '+='+diff
},400, 'swing');
});
});

</script>
<style>
.slider .next, .slider .prev{
display:none;
background-color:white;
border:0;
font:bold 20px Helvetica;
color:#bbb;
float:left;
padding:0;
margin:0;
}
.slider .next{
float:right;
}
.slider div{
overflow:hidden;
text-align:left;
height:none;
margin:0;
padding:0;
}
.slider div ul{
width:3000px;// set to an arbitary high value
overflow:hidden;
margin:0;
padding:0;
margin-left:0;
}
.slider div ul li{
display:inline;
padding:10px;
margin:0;
background:#eee;
border:1px solid #ddd;
}
</style>

<div class='slider'>
<button class='prev'>&lt;</button>
<button class='next'>&gt;</button>
<div>

<ul>
<li>Apples</li>
<li>Pears</li>
<li>Stairs</li>
<li>Cares</li>
<li>Elephants</li>
<li>Spanish Chickens</li>
<li>Marlborough House</li>
<li>Thameside Tavern</li>
</ul>
</div>
</div>

This could be improved upon; i'm thinking those '...' alternatives, maximum tab width and a drop down list like on my very nice FF browser.

For a working example visit my joblist website

Comments

jQuery-ui scrollable tabs
Here is the solution http://jquery.aamirafridi.com/jst/
Created 04/05/10
Slight modification
First a big thank you - was trying to to this myself and getting nowhere fast! This is exacally what I needed. However I did find that when ever I clicked on the scroll buttons it submitted the form (my page is inside an asp.net master page - not sur...
Created 13/07/11
zvKKTdYNxr
Right on-this helepd me sort things right out.
Created 18/08/11
QVyFmVCzqKqCWrXnZG
hW0V90 ltbksuaizbzk
Created 18/08/11
gKdnjsMlmp
d6hJdO , [url=http://varlaiwpsgnr.com/]varlaiwpsgnr[/url], [link=http://vtanwdaobiqc.com/]vtanwdaobiqc[/link], http://uwxveiyirvlp.com/
Created 30/08/11
Thank You.
Very Helpfulllllllllll 2 me ...........
Created 05/07/12
unable to download the sample working code help me out
Thank you for the wonderful sample demo..
Created 17/07/13
Thank you so much
Thank you so much :D ... great work and i use it with my Drupal code ;)
Created 13/08/13
Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share