I need a simple Scrolling Tabs. I was try modified http://www.stilbuero.de/jquery/tabs/ with overflow: hidden and width: 200px. But it create new tab line.
Assuming it’s a css question and not a script question then we’d need to see the code you are using or a link to the problem.
#container-1 {
width: 300px;
height: 38px;
overflow:hidden;
}
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide {
display: none;
}
}
/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav {
display: none;
}
}
/* Skin */
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 4px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
margin: 0 0 0 1px;
min-width: 84px; /* be nice to Opera */
}
.ui-tabs-nav a, .ui-tabs-nav a span {
display: block;
padding: 0 10px;
background: url(tab.png) no-repeat;
}
.ui-tabs-nav a {
position: relative;
top: 1px;
z-index: 2;
padding-left: 0;
color: #27537a;
font-size: 12px;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap; /* required in IE 6 */
}
.ui-tabs-nav .ui-tabs-selected a {
color: #000;
}
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active {
background-position: 100% -150px;
outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active {
background-position: 100% -100px;
}
.ui-tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.ui-tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.ui-tabs-nav .ui-tabs-selected a span {
padding-top: 7px;
}
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {
background-position: 0 -50px;
}
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span {
background-position: 0 0;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-nav .ui-tabs-disabled {
opacity: .4;
}
.ui-tabs-container {
border-top: 1px solid #97a5b0;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.ui-tabs-loading em {
padding: 0 0 0 20px;
background: url(loading.gif) no-repeat 0 50%;
}
<div id="container-1">
<ul class="ui-tabs-nav">
<li class="ui-tabs-selected"><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li><li class=""><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div style="display: block;" class="ui-tabs-container ui-tabs-hide" id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#container').tabs();</code></pre>
</div>
<div class="ui-tabs-container ui-tabs-hide" id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="ui-tabs-container ui-tabs-hide" id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
with overflow: hidden and width: 200px. But it create new tab line.
You’re going to need to give us a better explanation than that. Nobody will know what you want or what you are trying to do from that short explanation.
The image you sent is a predictable result for the code you are using. You have 33 list items in rows of 3 and then you wonder why they go to a new line! You have set overflow hidden on the container which has 38px height so only 38px of the tabs will be visible.
There is no 200px width in the code you have shown so half your limited description is incorrect from the start.
If you want help then you will need to give a clear description of what you are trying to achieve and the problems that you are encountering. I just copied the Jquery tab demo page and it worked straight away but that only has 3 tabs and you have 33 tabs that you want to fit into 200px.
Sorry but it just makes no sense!
Do you know Scrolling Tabs?
#container-1 {
width: 300px;
height: 38px;
overflow:hidden;
}
200px or 300px, no problem.
Scrolling tabs need tabs in one line and fixed tab container width. I set 38px to see second tab line, default is 18px.
I dont want to fit intro 200px, I want scrolling tab in container. Tab in one line to scroll by horizontal.
Scrolling tabs: http://extjs.com/deploy/dev/examples/tabs/tabs-adv.html
But Im newbie. I dont know how they do it.
Do you know Scrolling Tabs?
No I don’t and I didn’t see any on the first page link you pointed to either.
The second link you pointed to does show scrolling tabs and seems to be structured differently from the first link so I’m still confused as to what you are doing exactly.
If you want the tabs to be on one line then you probably need to set an arbitrary width as in the second example you showed me.
#container-1 {
width: 200px;
height: 38px;
overflow:hidden;
[B] position:relative;/* ie needs this*/[/B]
}.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 4px;
[B]width:5000px;[/B]
}
If you had a link to your page with all the images and javascript in place it would be easier to debug.
Also it might be worth pointing out that the example you provided uses JavaScript to generate the menu’s.
If you want users without JavaScript and users on mobile phone’s to be able to use your site then I’d use a different solution.
Also, search engine’s won’t crawl your other pages if you’re only linking to them by means of JavaScript so I’d really consider whether this approach is going to provide an adequate solution or whether just using standard tabs would be a better accessible solution.
You can download
Hi,
Well I think I’m about to quit on this as I’m obviously having trouble understanding what you want and perhaps someone else will have better luck :).
The code you attached seems to be a copy of the first link you pointed to in #post1 and doesn’t seem to have any scrolling functionality.
You don’t seem to have made any changes to the menu apart from adding the code I gave above. Which by the way seems to be working as I expected and I don’t get a scrollbar as per your image.
Here’s the proof:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery UI Tabs / Tabs 3</title>
<link rel="stylesheet" href="ui.tabs.css" type="text/css" media="print, projection, screen">
<style>
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide {
display: none;
}
}
/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav {
display: none;
}
}
/* Skin */
#container-1 {
[B] width: 200px;[/B]
height: 38px;
overflow:hidden;
[B] position:relative;
}[/B]
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 4px;
[B] width:5000px;[/B]
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
margin: 0 0 0 1px;
min-width: 84px; /* be nice to Opera */
}
.ui-tabs-nav a, .ui-tabs-nav a span {
display: block;
padding: 0 10px;
background: url(tab.png) no-repeat;
}
.ui-tabs-nav a {
position: relative;
top: 1px;
z-index: 2;
padding-left: 0;
color: #27537a;
font-size: 12px;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap; /* required in IE 6 */
}
.ui-tabs-nav .ui-tabs-selected a {
color: #000;
}
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active {
background-position: 100% -150px;
outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active {
background-position: 100% -100px;
}
.ui-tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.ui-tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.ui-tabs-nav .ui-tabs-selected a span {
padding-top: 7px;
}
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {
background-position: 0 -50px;
}
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span {
background-position: 0 0;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-nav .ui-tabs-disabled {
opacity: .4;
}
.ui-tabs-container {
border-top: 1px solid #97a5b0;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.ui-tabs-loading em {
padding: 0 0 0 20px;
background: url(loading.gif) no-repeat 0 50%;
}
</style>
<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="ui.tabs-ie.css" type="text/css" media="projection, screen">
<![endif]-->
<style type="text/css" media="screen, projection">
/* Not required for Tabs, just to make this demo look better... */
body {
font-size: 16px; /* @ EOMB */
}
body * {
font-size: 87.5%;
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
}
body * * {
font-size: 100%;
}
h1 {
margin: 1em 0 1.5em;
font-size: 18px;
}
h2 {
margin: 2em 0 1.5em;
font-size: 16px;
}
p {
margin: 0;
}
pre, pre+p, p+p {
margin: 1em 0 0;
}
code {
font-family: "Courier New", Courier, monospace;
}
</style>
<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#container-1 ul').tabs();
$('#container-2 ul').tabs(2);
$('#container-3 ul').tabs({ fxSlide: true });
$('#container-4 ul').tabs({ fxFade: true, fxSpeed: 'fast' });
$('#container-5 ul').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
$('#container-6 ul').tabs({
fxFade: true,
fxSpeed: 'fast',
click: function() {
alert('click callback');
},
hide: function() {
alert('hide callback');
},
show: function() {
alert('show callback');
}
});
$('#container-7 ul').tabs({ fxShow: { height: 'show', opacity: 'show' }, fxSpeed: 'normal' });
$('#container-8 ul').tabs({ cache: false });
$('#container-9 ul').tabs({ disabled: [3] });
$('<p><a href="#">Remove tab<\\/a><\\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 ul').tabsRemove(4);
return false;
});
$('<p><a href="#">Add tab<\\/a><\\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 ul').tabsAdd('#new-tab', 'New Tab', 4);
return false;
});
$('<p><a href="#">Disable third tab<\\/a><\\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 ul').tabsDisable(3);
return false;
});
$('<p><a href="#">Enable third tab<\\/a><\\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 ul').tabsEnable(3);
return false;
});
$('<p><a href="#">Click third tab<\\/a><\\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 ul').tabsClick(3);
return false;
});
$('<p><a href="#">Get selected tab<\\/a><\\/p>').prependTo('#fragment-22').find('a').click(function() {
alert( $('#container-9 ul').tabsSelected() );
return false;
});
$('#container-10 ul').tabs({ unselected: true });
$('#container-11 ul').tabs({ event: 'mouseover' }).find('a').click(function() {
return false;
});
});
</script>
</head>
<body>
<h1><a href="http://ui.jquery.com">jQuery UI</a> Tabs / Tabs 3</h1>
<p> <strong><a href="ui.tabs.zip">Download</a></strong> </p>
<p> <strong><a href="http://docs.jquery.com/UI/Tabs">Documentation</a></strong> </p>
<h2>Simple Tabs</h2>
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#container').tabs();</code></pre>
</div>
<div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>
<div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>
</div>
<h2>Start With Custom Tab</h2>
</body>
</html>
Now if you are asking how to take the scrolling Javascript from the second link you posted and insert it into the first link then that is a Javascript question and not a css one.
However, I think I must have a mental block on this as I can’t seem to grasp what you are asking exactly and perhaps its better if someone else has a go
I was so tired of searching for a nice plugin but I end up with creating my own
Take this with a grain of salt because I often have problems understanding people, but I too had a difficult time understanding anything here ;).