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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    display first div when page loads

    Hi,

    I have some code which toggles the content on the page. This works fine but I need the first div to be showing when the page loads and its tab to have a selected state. Can anyone help me out? Thanks

    Code:
    <html>
    <head>
    <title></title>
    <style type="text/css">
    
    img {border:none;}
    
    #tab-nav {
    	padding: 0px 0 0px 110px;
    	height:41px;
    	width:600px;
    	float: left;
    	list-style-type: none;
    	background-image:url(line.gif);
    	background-repeat:no-repeat;
    	background-position:bottom;
    	
    	}
    #tab-nav li {
    	float: left;
    }
    #tab-nav li a {
    	display: block;
    	height: 32px;
    	text-indent: -9999px;
    	padding-right:2px;
    }
    
    #tab-nav li.facebook a {
    width:80px;
    height:36px;
    background:url(facebook-tab.gif);
    background-repeat:no-repeat;
    }
    
    #tab-nav li.facebook a.selected {
    width:80px;
    height:36px;
    background:url(facebook-tab-red.gif);
    background-repeat:no-repeat;
    }
    
    #tab-nav li.twitter a {
    width: 75px;
    height:36px;
    background:url(twitter-tab.gif);
    background-repeat:no-repeat;              
    }
    
    #tab-nav li.twitter a.selected {
    width: 75px;
    height:36px;
    background:url(twitter-tab-red.gif);
    background-repeat:no-repeat;              
    }
    #tab-nav li.picasa a {
    width: 65px;
    height:36px;
    background:url(picasa-tab.gif); 
    background-repeat:no-repeat;             
    }
    
    #tab-nav li.picasa a.selected {
    width: 65px;
    height:36px;
    background:url(picasa-tab-red.gif); 
    background-repeat:no-repeat;             
    }
    
    #tab-nav li.bookmarking a {
    width: 101px;
    height:36px;
    background:url(bookmarking-tab.gif);
    background-repeat:no-repeat;              
    }
    
    #tab-nav li.bookmarking a.selected {
    width: 101px;
    height:36px;
    background:url(bookmarking-tab-red.gif); 
    background-repeat:no-repeat;               
    }
    
    #tab-nav li.youtube a {
    width: 76px;
    height:36px;
    background:url(youtube-tab.gif);
    background-repeat:no-repeat;              
    }
    
    #tab-nav li.youtube a.selected {
    width: 76px;
    height:36px;
    background:url(youtube-tab-red.gif); 
    background-repeat:no-repeat;               
    }
    
    #tab-nav li.blogs a {
    width: 56px;
    height:36px;
    background:url(blogs-tab.gif);
    background-repeat:no-repeat;              
    }
    
    #tab-nav li.blogs a.selected {
    width: 56px;
    height:36px;
    background:url(blogs-tab-red.gif); 
    background-repeat:no-repeat;               
    }
    
    #facebook {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #twitter {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #picasa {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #bookmarking {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #youtube {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #blogs {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    
    </style>
    
    
    <script type="text/javascript">
    var current = 0;
    
    function Toggle(toTog) {
      obj = document.getElementById(toTog);
      if( obj ) { if( current ) current.style.display = "none"; obj.style.display = "block"; current = obj; }
      else
      if( obj ) { if( current ) current.style.display = "block"; obj.style.display = "none"; current = obj; }
    }
    
    function applySelectedTo(link) {
      var ul = document.getElementsByTagName("ul")[0];
      var allLinks = ul.getElementsByTagName("a");
      for (var i=0; i<allLinks.length; i++) { 
        allLinks[i].className = ""; 
      }
      link.className = "selected"; 
    }
    </script>
    
    
    <ul id="tab-nav">
    <li class="facebook"><a href="#" onclick="Toggle('facebook'); applySelectedTo(this);return false;"></a></li>
    <li class="twitter"><a href="#" onclick="Toggle('twitter'); applySelectedTo(this);return false;"></a></li>
    <li class="picasa"><a href="#" onclick="Toggle('picasa'); applySelectedTo(this);return false;"></a></li>
    <li class="bookmarking"><a href="#" onclick="Toggle('bookmarking'); applySelectedTo(this);return false;"></a></li>
    <li class="youtube"><a href="#" onclick="Toggle('youtube'); applySelectedTo(this);return false;"></a></li>
    <li class="blogs"><a href="#" onclick="Toggle('blogs'); applySelectedTo(this);return false;"></a></li>
    </ul>
    
    <div id="facebook" style="display: none;">
    <h3>Facebook</h3>
    <p><strong>What is Facebook?</strong><br />
    some facebook content</p>
    </div>
    <div id="twitter" style="display: none;">
    
    <h3>Twitter</h3>
    <p><strong>What is Twitter?</strong><br />
    some twitter content</p>
    </div>
    
    <div id="picasa" style="display: none;">
    <h3>Picasa</h3>
    <p><strong>What is Picasa?</strong><br />
    some picasa content</p>
    </div>
    
    <div id="bookmarking" style="display: none;">
    <p><strong>What is bookmarking?</strong><br />
    some bookmarking content</p>
    </div>
    
    <div id="youtube" style="display: none;">
    <h3>YouTube</h3>
    <p><strong>What is YouTube?</strong><br />
    some YouTube content</p>
    </div>
    
    
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try by adding
    Code:
    window.onload=function(){
    	document.getElementById('facebook').style.display='block';
    	var tab=document.getElementById('tab-nav').getElementsByTagName('a')[0];
    	tab.style.backgroundImage='url(facebook-tab-red.gif);'
    }
    into your script.

    btw, I'd recommend you to adopt some progressive enhancement techniques, otherwise nothing will be displayed for people who have no javascript support in their browser.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Add this to your script block:

    Code:
    function init()
    {
       var firstlist = document.getElementsByTagName('ul')[0];
       var firstitem = firstlist.getElementsByTagName('li')[0]; //index determines tab
       var trigger = firstitem.getElementsByTagName('a')[0];
       trigger.onclick();
    }
    
    function addListener(obj, evt, handler)
    {
       if (obj.addEventListener)
       {
          obj.addEventListener(evt, handler, false);
       }
       else if (obj.attachEvent)
       {
          obj.attachEvent('on' + evt, handler);
       }
    }
    
    addListener(window, 'load', init);
    Last edited by adios; 05-14-2009 at 11:01 AM.

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, but this doesn't seem to work as I intended. It keeps the tab selected an div showing when you click on the other tabs! Is there a way to unselect and hide the div when the others are clicked?

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Not sure if you're talking to me or abduraooft - but, anyway - could you post the exact page you're using? There are a number of problems with the code you posted that make it difficult to test with (like empty links). Need to see exactly what you're seeing ...

  • #6
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    My page isn't hosted live yet. I'm building it locally

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Well ... it sounds as if clicking the links is reloading the page, causing the windows onload handler to run each time, resetting the tab choice back to square one. The 'return false' on those links should stop that. Again, it's really hard to debug something when you don't have it in front of you. A sample page, (or a live demo) could settle the issue in seconds.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by marisa1981 View Post
    Thanks, but this doesn't seem to work as I intended. It keeps the tab selected an div showing when you click on the other tabs! Is there a way to unselect and hide the div when the others are clicked?
    Have a try by adding
    Code:
    window.onload=function(){
    	var tab=document.getElementById('tab-nav').getElementsByTagName('a')[0];
    	Toggle('facebook'); 
    	applySelectedTo(tab);
    }
    instead of my first code.
    Last edited by abduraooft; 05-14-2009 at 01:17 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    marisa1981 (05-14-2009)

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    This:

    Code:
    function init()
    {
       var firstlist = document.getElementsByTagName('ul')[0];
       var firstitem = firstlist.getElementsByTagName('li')[0]; //index determines tab
       var trigger = firstitem.getElementsByTagName('a')[0];
       trigger.onclick();
    }
    ... does the same thing as

    Code:
    window.onload=function(){
    	var tab=document.getElementById('tab-nav').getElementsByTagName('a')[0];
    	Toggle('facebook'); 
    	applySelectedTo(tab);
    }
    ... only more elegantly. You've already got the code to activate the first tab: it's in the onclick handler of - the first tab!

    You can change it to

    Code:
    function init()
    {
       var firstlist = document.getElementsByTagName('ul')[0];
       var firstlink = firstlist.getElementsByTagName('a')[0];
       firstlink.onclick();
    }
    ... if you like, I wanted to make it more modular ...


  •  

    Posting Permissions

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