Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Making a tab as default "selected tab"

    Hi, I have this code for my tabs:
    Code:
    <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!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question One solution and one question about your script.

    Quote Originally Posted by fenhopi View Post
    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.
    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.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Some possibilities ...

    Quote Originally Posted by jmrker View Post
    For your first question, add this line of code.
    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.
    Code:
    <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>

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow More information please ...

    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)?

  • #6
    New Coder
    Join Date
    Jul 2010
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's the code:
    PHP 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%;
              
    margin3px 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=0i<tabs.lengthi++) { 
        
    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 (
    00elsLeni++) {
            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=0i<cnti++) {
        
    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:



    And this for tab2 when it's not selected:


    And when tab1 is selected I want this:


    And when tab2 is selected I want:


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

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try...

    Try this ...
    Code:
    <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>

  • #8
    New Coder
    Join Date
    Jul 2010
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your reply!

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

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Another version ...

    All the hints were there. You should at least make an attempt at a solution before you complain.
    Code:
    <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>

  • #10
    New Coder
    Join Date
    Jul 2010
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much.

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by fenhopi View Post
    Thank you very much.
    You're most welcome.
    Happy to help.
    Good Luck!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •