...

View Full Version : Making a tab as default "selected tab"



fenhopi
11-10-2010, 11:16 AM
Hi, I have this code for my tabs:


<html>
<head>
<title>Vertical Tabs</title>

<style type="text/css">
#content { width:50%;
height:50%;
border:1px solid blue;
}

#vtab0 { width:20%; float:left; }
#vtab0 li { list-style:none;
border:1px dotted blue;
font-weight:bold;
}
#vtab0 li:hover { background-color:cyan; }

#tabContent { float:left;
width:78%;
margin: 1% 1%;
}
.vtInfo { display:none;
height:98%;
overflow:auto;
}

</style>

<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=227746

function showTab(IDS) {
// var tabs = document.getElementById('tabContent').getElementsByTagName('div');
var tabs = getElementsByClass('vtInfo',document.getElementById('tabContent'),'div');

for (var i=0; i<tabs.length; i++) { tabs[i].style.display = 'none'; }
document.getElementById(IDS).style.display = 'block';
}

// Following from: http://www.dustindiaz.com/getelementsbyclass/
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

/* Following only to fill up tab area */
var Words = 'now is the time for all good men to come to the aid of their country ';
'whatever the mind of man can conceive and believe he can achieve ';
'the quick red fox jumps over the lazy brown dog ';
'those who ignore lessons of history are doomed to repeat them ';
'beauty may be skin deep but ugly goes clear to the bone ';
'you can never get too old to learn a new way of being stupid ';
var WordArray = Words.split(' ');

function RandomWords(cnt) {
var str = '';
var tmp = '';
for (var i=0; i<cnt; i++) {
tmp = WordArray[Math.floor(Math.random()*WordArray.length)];
str += tmp+' ';
}
return str;
}
/* Done with fill up tab area code */

</script>
</head>
<body>
<div id="content">

<div id="vtab0">
<li onclick="showTab('vtab1')">Tab 1</li>
<li onclick="showTab('vtab2')">Tab 2</li>
<li onclick="showTab('vtab3')">Tab 3</li>
<li onclick="showTab('vtab4')">Tab 4</li>
<li onclick="showTab('vtab5')">Tab 5</li>
</div>

<div id="tabContent">
<div id="vtab1" class="vtInfo"> <h2>Content Heading 1</h2>
<script type="text/javascript">document.write(RandomWords(100))</script>
</div>
<div id="vtab2" class="vtInfo"> <h2>Content Heading 2</h2>
<script type="text/javascript">document.write(RandomWords(200))</script>
</div>
<div id="vtab3" class="vtInfo"> <h2>Content Heading 3</h2>
<script type="text/javascript">document.write(RandomWords(300))</script>
</div>
<div id="vtab4" class="vtInfo"> <h2>Content Heading 4</h2>
<script type="text/javascript">document.write(RandomWords(200))</script>
</div>
<div id="vtab5" class="vtInfo"> <h2>Content Heading 5</h2>
<script type="text/javascript">document.write(RandomWords(100))</script>
</div>
</div>

<br style="clear:both">
</div>
</body>
</html>


How would I make it load tab1 as default tab?
Also, would it be possible to make it so that the selected tab is a different color? Thank you in advance!

jmrker
11-10-2010, 06:37 PM
Hi, I have this code for my tabs:
...

How would I make it load tab1 as default tab?
Also, would it be possible to make it so that the selected tab is a different color? Thank you in advance!

For your first question, add this line of code.


/* Done with fill up tab area code */

onload = function() { showTab('vtab1'); }

</script>


For your second question, do you mean change the active tab color for choosing display
OR
do you mean you want to keep the color of the tab chosen present after clicking?

Makes a difference for my answer.

jmrker
11-10-2010, 07:34 PM
For your first question, add this line of code.


/* Done with fill up tab area code */

onload = function() { showTab('vtab1'); }

</script>


For your second question, do you mean change the active tab color for choosing display
OR
do you mean you want to keep the color of the tab chosen present after clicking?

Makes a difference for my answer.

Assuming your answer to the second question was the OR part,
here is a slightly modified code. Play with the color combinations to your heart's desire.


<html>
<head>
<title>Vertical Tabs</title>

<style type="text/css">
#content { width:50%;
height:33%;
border:1px solid blue;
background-Color: orange;
}

#vtab { width:20%; float:left; }
#vtab li { list-style:none;
border:1px dotted blue;
font-weight:bold;
}
#vtab li:hover { background-color:cyan; }

#tabContent { float:left;
width:78%;
margin: 3px 3px;
}
.vtInfo { display:none;
height:95%;
overflow:auto;
padding:1px 5px;
background-Color: yellow;
}

</style>

<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=227746
// and: http://codingforums.com/showthread.php?p=1013920#post1013920

function showTab(IDSno) {
var tabs = getElementsByClass('vtInfo',document.getElementById('tabContent'),'div');

for (var i=0; i<tabs.length; i++) {
tabs[i].style.display = 'none';
document.getElementById('vt'+i).style.backgroundColor = 'white';
}
document.getElementById('vtab'+IDSno).style.display = 'block';
document.getElementById('vt'+IDSno).style.backgroundColor = 'yellow';
}

// Following from: http://www.dustindiaz.com/getelementsbyclass/
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

/* Following only to fill up tab area */
var Words = 'now is the time for all good men to come to the aid of their country ';
'whatever the mind of man can conceive and believe he can achieve ';
'the quick red fox jumps over the lazy brown dog ';
'those who ignore lessons of history are doomed to repeat them ';
'beauty may be skin deep but ugly goes clear to the bone ';
'you can never get too old to learn a new way of being stupid ';
var WordArray = Words.split(' ');

function RandomWords(cnt) {
var str = '';
var tmp = '';
for (var i=0; i<cnt; i++) {
tmp = WordArray[Math.floor(Math.random()*WordArray.length)];
str += tmp+' ';
}
return str;
}
/* Done with fill up tab area code */

onload = function() { showTab(0); }

</script>
</head>
<body>
<div id="content">

<div id="vtab">
<li id="vt0" onclick="showTab(0)">Tab 1</li>
<li id="vt1" onclick="showTab(1)">Tab 2</li>
<li id="vt2" onclick="showTab(2)">Tab 3</li>
<li id="vt3" onclick="showTab(3)">Tab 4</li>
<li id="vt4" onclick="showTab(4)">Tab 5</li>
</div>

<div id="tabContent">
<div id="vtab0" class="vtInfo"> <h2>Content Heading 1</h2>
<script type="text/javascript">document.write(RandomWords(100))</script>
</div>
<div id="vtab1" class="vtInfo"> <h2>Content Heading 2</h2>
<script type="text/javascript">document.write(RandomWords(200))</script>
</div>
<div id="vtab2" class="vtInfo"> <h2>Content Heading 3</h2>
<script type="text/javascript">document.write(RandomWords(300))</script>
</div>
<div id="vtab3" class="vtInfo"> <h2>Content Heading 4</h2>
<script type="text/javascript">document.write(RandomWords(200))</script>
</div>
<div id="vtab4" class="vtInfo"> <h2>Content Heading 5</h2>
<script type="text/javascript">document.write(RandomWords(100))</script>
</div>
</div>

<br style="clear:both">
</div>
</body>
</html>

fenhopi
11-11-2010, 02:12 PM
Thank you so much for your reply!

To further complicate things a bit:
I want each tab to have a different image, and I want that when I select one tab it changes to one image, and when I click another tab it changes to another image. Would this be possible?

Because I want them to display images for home, contact, etc. And when I click on one tab I want it to change to for instance a different color of "home", so that they can tell that it's selected. Once again, thank you!

jmrker
11-11-2010, 03:33 PM
Provide some example images, or better yet a link to some images.
Also, would need the links to go to when images are selected (unless you want to fill them in yourself).

Do you have some initial code to work from at this time (ie; layout, colors, CSS info)?

fenhopi
11-11-2010, 04:15 PM
Here's the code:


<style type="text/css">
#content { width:780px;
height:100%;
border:0px inset #5cc1dd;
background-color:#FFF;
}


#vtab { width:35px; float:left; padding:2px 10px 0px 0px;}
#vtab li {float:left; background-image:url(images/tab.jpg);border:1px solid #e1e1e1;width:55px; height:35px;padding:5px!important;cursor:pointer;border-bottom:none;margin-right:10px;font-family:verdana;font-size:.8em;font-weight:bold;color:#fff; list-style:none;border:ridge #5cc1dd; border-right:none;}
#vtab li:hover { background-color:#5cc1dd; }

#tabContent { float:left;
width:78%;
margin: 3px 3px;
}
.vtInfo { display:none;
height:95%;
overflow:auto;
padding:1px 5px;
background-Color: #5cc1dd;
}

</style>

<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=227746
// and: http://codingforums.com/showthread.php?p=1013920#post1013920

function showTab(IDSno) {
var tabs = getElementsByClass('vtInfo',document.getElementById('tabContent'),'div');

for (var i=0; i<tabs.length; i++) {
tabs[i].style.display = 'none';
document.getElementById('vt'+i).style.backgroundImage="url('images/tab.jpg')";
}
document.getElementById('vtab'+IDSno).style.display = 'block';
document.getElementById('vt'+IDSno).style.backgroundImage="url('images/tabhover.jpg')";
}

// Following from: http://www.dustindiaz.com/getelementsbyclass/
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

/* Following only to fill up tab area */
var Words = 'now is the time for all good men to come to the aid of their country ';
'whatever the mind of man can conceive and believe he can achieve ';
'the quick red fox jumps over the lazy brown dog ';
'those who ignore lessons of history are doomed to repeat them ';
'beauty may be skin deep but ugly goes clear to the bone ';
'you can never get too old to learn a new way of being stupid ';
var WordArray = Words.split(' ');

function RandomWords(cnt) {
var str = '';
var tmp = '';
for (var i=0; i<cnt; i++) {
tmp = WordArray[Math.floor(Math.random()*WordArray.length)];
str += tmp+' ';
}
return str;
}
/* Done with fill up tab area code */

onload = function() { showTab(0); }

</script>
</head>
<body>
<div id="content">

<div id="vtab">
<li id="vt0" onClick="showTab(0)"><img src="images/tab.psd"></li>
<li id="vt1" onClick="showTab(1)">Friends' Shairz</li>
<li id="vt2" onClick="showTab(2)">Tab 3</li>
<li id="vt3" onClick="showTab(3)">Tab 4</li>
<li id="vt4" onClick="showTab(4)">Tab 5</li>
</div>

<div id="tabContent">
<div id="vtab0" class="vtInfo"> <h2>Content Heading 1</h2>
<script type="text/javascript">document.write(RandomWords(100))</script>
</div>
<div id="vtab1" class="vtInfo"> <h2>Content Heading 2</h2>
<script type="text/javascript">document.write(RandomWords(200))</script>
</div>
<div id="vtab2" class="vtInfo"> <h2>Content Heading 3</h2>
<script type="text/javascript">document.write(RandomWords(300))</script>
</div>
<div id="vtab3" class="vtInfo"> <h2>Content Heading 4</h2>
<script type="text/javascript">document.write(RandomWords(200))</script>
</div>
<div id="vtab4" class="vtInfo"> <h2>Content Heading 5</h2>
<script type="text/javascript">document.write(RandomWords(100))</script>
</div>
</div>

<br style="clear:both">
</div>




It doesn't matter what images, really, I could just replace them when I have them made.

Say I want this for tab1 when it's not selected:
http://1.bp.blogspot.com/_WeDFJRLAWDo/SXp8atAWdRI/AAAAAAAAACY/Y9lwChtk8AM/S45/mg2007b-flower-red-flower.jpg


And this for tab2 when it's not selected:
http://3.bp.blogspot.com/_RAqnTmimXAQ/SkDPbiamb2I/AAAAAAAAE3M/4gOyn140g3A/S45/Profile%2BButton%2Bwith%2Bred%2Bborder%2Bcopy.jpg

And when tab1 is selected I want this:
http://webshop.bergans.no/img/cache/x/o/_/xo_25l_flower_power_red_1541771825_0.jpg

And when tab2 is selected I want:
http://download.famouswhy.com/soft_img/soft_icons/red_hat_enterprise_linux.gif

It's important that the tab images go back to the "not selected images" when they aren't selected.

jmrker
11-11-2010, 07:02 PM
Try this ...


<html>
<head>
<title>Vertical Tabs</title>

<style type="text/css">
#content { width:50%;
height:33%;
border:1px solid blue;
background-Color: white;
}

#vtab { width:75px; float:left; }
#vtab li { list-style:none;
border:1px dotted blue;
font-weight:bold;
height:50px;
background-repeat:no-repeat;
background-position: center center;
}
#vtab li:hover { background-color:cyan; }

#tabContent { float:left;
width:80%;
margin: 3px 3px;
}
.vtInfo { display:none;
height:95%;
overflow:auto;
padding:1px 5px;
background-Color: yellow;
}

</style>

<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=227746
// and: http://codingforums.com/showthread.php?p=1013920#post1013920

var tabImages = [
['http://1.bp.blogspot.com/_WeDFJRLAWDo/SXp8atAWdRI/AAAAAAAAACY/Y9lwChtk8AM/S45/mg2007b-flower-red-flower.jpg'],
['http://3.bp.blogspot.com/_RAqnTmimXAQ/SkDPbiamb2I/AAAAAAAAE3M/4gOyn140g3A/S45/Profile%2BButton%2Bwith%2Bred%2Bborder%2Bcopy.jpg'],
['http://webshop.bergans.no/img/cache/x/o/_/xo_25l_flower_power_red_1541771825_0.jpg'],
['http://download.famouswhy.com/soft_img/soft_icons/red_hat_enterprise_linux.gif'] // NOTE: no comma after last entry
];

function showTab(IDSno) {
var tabs = getElementsByClass('vtInfo',document.getElementById('tabContent'),'div');

for (var i=0; i<tabs.length; i++) {
tabs[i].style.display = 'none';
document.getElementById('vt'+i).style.backgroundColor = 'white';
document.getElementById('vt'+i).style.backgroundImage = 'url("'+tabImages[i]+'")';
}
document.getElementById('vtab'+IDSno).style.display = 'block';
document.getElementById('vt'+IDSno).style.backgroundColor = 'yellow';
}

// Following from: http://www.dustindiaz.com/getelementsbyclass/
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

onload = function() { showTab(0); }

</script>
</head>
<body>
<div id="content">

<div id="vtab">
<li id="vt0" onclick="showTab(0)" style=""></li>
<li id="vt1" onclick="showTab(1)" style=""></li>
<li id="vt2" onclick="showTab(2)" style=""></li>
<li id="vt3" onclick="showTab(3)" style=""></li>
</div>

<div id="tabContent">
<div id="vtab0" class="vtInfo"> <h2>Content Heading 1</h2>
</div>
<div id="vtab1" class="vtInfo"> <h2>Content Heading 2</h2>
</div>
<div id="vtab2" class="vtInfo"> <h2>Content Heading 3</h2>
</div>
<div id="vtab3" class="vtInfo"> <h2>Content Heading 4</h2>
</div>
</div>

<br style="clear:both">
</div>
</body>
</html>

fenhopi
11-11-2010, 08:39 PM
Thanks for your reply!

However, it doesn't change picture on the tab that's selected though, which I really need it to do.

jmrker
11-12-2010, 01:01 AM
All the hints were there. You should at least make an attempt at a solution before you complain.


<html>
<head>
<title>Vertical Tabs</title>

<style type="text/css">
#content { width:450px;
height:33%;
border:1px solid blue;
background-Color: white;
}

#vtab { width:50px; float:left; }
#vtab li { list-style:none;
border:1px dotted blue;
font-weight:bold;
height:50px;
background-repeat:no-repeat;
background-position: center center;
}
#vtab li:hover { background-color:cyan; }

#tabContent { float:left;
width:390px;
margin: 3px 3px;
}
.vtInfo { display:none;
height:95%;
overflow:auto;
padding:1px 5px;
background-Color: yellow;
}

</style>

<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=227746
// and: http://codingforums.com/showthread.php?p=1013920#post1013920

var tabResetImages = [
['http://1.bp.blogspot.com/_WeDFJRLAWDo/SXp8atAWdRI/AAAAAAAAACY/Y9lwChtk8AM/S45/mg2007b-flower-red-flower.jpg'],
['http://3.bp.blogspot.com/_RAqnTmimXAQ/SkDPbiamb2I/AAAAAAAAE3M/4gOyn140g3A/S45/Profile%2BButton%2Bwith%2Bred%2Bborder%2Bcopy.jpg'] // NOTE: no comma after last entry
];
var tabSetImages = [
['http://webshop.bergans.no/img/cache/x/o/_/xo_25l_flower_power_red_1541771825_0.jpg'],
['http://download.famouswhy.com/soft_img/soft_icons/red_hat_enterprise_linux.gif'] // NOTE: no comma after last entry
];

function showTab(IDSno) {
var tabs = getElementsByClass('vtInfo',document.getElementById('tabContent'),'div');

for (var i=0; i<tabs.length; i++) {
tabs[i].style.display = 'none';
document.getElementById('vt'+i).style.backgroundColor = 'white';
document.getElementById('vt'+i).style.backgroundImage = 'url("'+tabResetImages[i]+'")';
}
document.getElementById('vtab'+IDSno).style.display = 'block';
document.getElementById('vt'+IDSno).style.backgroundColor = 'yellow';
document.getElementById('vt'+IDSno).style.backgroundImage = 'url("'+tabSetImages[IDSno]+'")';
}

// Following from: http://www.dustindiaz.com/getelementsbyclass/
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

onload = function() { showTab(0); }

</script>
</head>
<body>
<div id="content">

<div id="vtab">
<li id="vt0" onclick="showTab(0)" style=""></li>
<li id="vt1" onclick="showTab(1)" style=""></li>
</div>

<div id="tabContent">
<div id="vtab0" class="vtInfo"> <h2>Content Heading 1</h2>
</div>
<div id="vtab1" class="vtInfo"> <h2>Content Heading 2</h2>
</div>
</div>

<br style="clear:both">
</div>
</body>
</html>

fenhopi
11-12-2010, 08:14 AM
Thank you very much.

jmrker
11-12-2010, 08:34 PM
Thank you very much.

You're most welcome.
Happy to help.
Good Luck!
:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum