Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

scrolling tabs

Status
Not open for further replies.
krichard

krichard

Technical User
Dec 5, 2001
41
US
Hi...

I have a javascript that creates tabs at the top of the page, but i have so many that the horizontal scroll bar goes on forever... is there anyway to have a < > for the tabs, so i can click to the next one, instead of having a long line of tabs???

<script language=&quot;JavaScript&quot;>
var currentPanel = 1;
function showPanel(panelNum){
//hide visible panel, show selected panel, set tab
hidePanel();
document.getElementById('panel'+panelNum).style.visibility = 'visible';
currentPanel = panelNum;
setState(panelNum);
}
function hidePanel(){
//hide visible panel, unhilite tab
document.getElementById('panel'+currentPanel).style.visibility = 'hidden';
document.getElementById('tab'+currentPanel).style.backgroundColor = '#ffffff';
document.getElementById('tab'+currentPanel).style.color = 'navy';
}
function setState(tabNum){
if(tabNum==currentPanel){
document.getElementById('tab'+tabNum).style.backgroundColor = '#ddddff';
document.getElementById('tab'+tabNum).style.color = 'red';
}else{
document.getElementById('tab'+tabNum).style.backgroundColor = '#ffffff';
document.getElementById('tab'+tabNum).style.color = 'navy';
}
}
function hover(tab){
tab.style.backgroundColor = 'ffffff';
}
</script>

</head>

<body onLoad=&quot;showPanel(1)&quot;>

<div id=&quot;loading&quot; class=&quot;panel&quot; style=&quot;visibility: visible; font: 11pt Verdana,sans-serif; color: navy;&quot;>Loading..</div>
<div id=&quot;tab1&quot; class=&quot;tab&quot; style=&quot;left: 10;&quot; onClick = &quot;showPanel(1);&quot; onMouseOver=&quot;hover(this);&quot; onMouseOut=&quot;setState(1)&quot;>
SONET MODE OPTIONS</div>
<div id=&quot;tab2&quot; class=&quot;tab&quot; style=&quot;left: 175;&quot; onClick = &quot;showPanel(2);&quot; onMouseOver=&quot;hover(this);&quot; onMouseOut=&quot;setState(2)&quot;>
Table Of Contents</div>
<div id=&quot;tab3&quot; class=&quot;tab&quot; style=&quot;left: 340;&quot; onClick = &quot;showPanel(3);&quot; onMouseOver=&quot;hover(this);&quot; onMouseOut=&quot;setState(3)&quot;>
CPU Functions</div>
<div id=&quot;tab4&quot; class=&quot;tab&quot; style=&quot;left: 505;&quot; onClick = &quot;showPanel(4);&quot; onMouseOver=&quot;hover(this);&quot; onMouseOut=&quot;setState(4)&quot;>
Essential JavaScript</div>
<div id=&quot;tab5&quot; class=&quot;tab&quot; style=&quot;left: 673;&quot; onClick = &quot;showPanel(5);&quot; onMouseOver=&quot;hover(this);&quot; onMouseOut=&quot;setState(5)&quot;>
Pop Up Menus</div>
<div id=&quot;tab6&quot; class=&quot;tab&quot; style=&quot;left: 865;&quot; onClick = &quot;showPanel(6);&quot; onMouseOver=&quot;hover(this);&quot; onMouseOut=&quot;setState(6)&quot;>
Essential JavaScript</div>
<div id=&quot;tab7&quot; class=&quot;tab&quot; style=&quot;left: 850;&quot; onClick = &quot;showPanel(7);&quot; onMouseOver=&quot;hover(this);&quot; onMouseOut=&quot;setState(7)&quot;>
Essential JavaScript</div>
<iframe id=&quot;panel1&quot; class=&quot;panel&quot; src=&quot;HomePage.htm&quot;></iframe>
<iframe id=&quot;panel2&quot; class=&quot;panel&quot; src=&quot;TableOfContents.htm&quot;></iframe>
 
Sort by date Sort by votes
I've seen something similar done before a while ago and now can't find the site but this might be of help. Basically, I seem to remember that they had set the menu tabs up in a div and then used mouseover to move the origin for the div, hence the bar moved backwards and forewards across the screen. I didn't realise until I saw this that you could have the origin off the page!!

I don't know if this is of any help but might point you in the right direction if no-one comes up with any code for you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Carlvic
  • Locked
  • Question
Allow Flexslider inside bootstrap tabs
Replies
0
Views
177
Carlvic
Carlvic
Krus1972
  • Locked
  • Question
On-Click Form Input Box Scrolling
Replies
4
Views
287
Krus1972
Krus1972
JBorges
  • Locked
  • Question
Infinite Scrolling Both Up and Down
Replies
10
Views
400
JBorges
JBorges
bkoopers
  • Locked
  • Question
How to open multiple tabs in Internet Explorer
Replies
3
Views
199
Diancecht
Diancecht
yaknowss
  • Locked
  • Question
Slideshow that disappears when scrolling down on a page
Replies
7
Views
320
yaknowss
yaknowss

Part and Inventory Search

Sponsor

Back
Top