SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript with CSS switcher script, default loading.

    Hey,

    I am looking for a bit of help, I am using the following code:

    HTML Code:
    <script type="text/javascript">
    function switch1(div)
    {
    if (document.getElementById('one') && !document.getElementById('allinfo'))
    {
    var option=['one','two','three'];
    for(var i=0; i<option.length; i++)
    { obj=document.getElementById(option[i]);
    obj.style.display=(option[i]==div)? "block" : "none"; }
    }
    }
    </script>
    My links are as follows:

    HTML Code:
    <ul id="tabs">
    		  	<li><a href="#" onMouseOver="switch1('one');">Store one</a></li>
    			<li><a href="#" onMouseOver="switch1('two');">Store two</a></li>
    			<li><a href="#" onMouseOver="switch1('three');">Store three</a></li>
    		</ul>
    		<div id="one" class="contactbox"><h1>Store one</h1></div>
    		<div id="two" class="contactbox"><h1>Store two</h1></div>
    		<div id="three" class="contactbox"><h1>Store Three</h1></div>
    I have a little problem, when I load the page, all 3 boxes appear, it is not until I hover over a tab that the particular box will apppear on its own. Is there anyway to get box 1 to be displayed when the page loads?

    Thanks in advance,
    Michael

  2. #2
    Maniacally depressed robot poncho's Avatar
    Join Date
    Dec 2004
    Location
    Belfast, N.Ireland
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this,

    HTML Code:
    <div id="one" class="contactbox" style="display: none;"><h1>Store one</h1></div>
    		<div id="two" class="contactbox" style="display: none;"><h1>Store two</h1></div>
    		<div id="three" class="contactbox" style="display: none;"><h1>Store Three</h1></div>
    Either set the style to display: none; in the css class "contactbox", or set with the style attribute as I have done here.

    Cheers;
    Poncho
    Perfecting the art of breaking stuff.
    Check 'em: CakePHP | TextMate

  3. #3
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, I had it set as display:none before however this means if javascript is disable only "Store one" will display, any way around that?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    
    function switch1(div){
     if (document.getElementById('one')&&!document.getElementById('allinfo')){
      var option=['one','two','three'];
      for(var i=0; i<option.length; i++){
       obj=document.getElementById(option[i]);
       obj.style.display=(option[i]==div)? "block" : "none";
      }
     }
    }
    
    </script>
    
    <style type="text/css">
    <!--
    .contactbox {
      display:none;
    }
    
    -->
    </style></head>
    
    <body>
    <ul id="tabs">
    <li><a href="#" onMouseOver="switch1('one');">Store one</a></li>
    <li><a href="#" onMouseOver="switch1('two');">Store two</a></li>
    <li><a href="#" onMouseOver="switch1('three');">Store three</a></li>
    </ul>
    <div id="one" class="contactbox" style="display:block;" ><h1>Store one</h1></div>
    <div id="two" class="contactbox"><h1>Store two</h1></div>
    <div id="three" class="contactbox"><h1>Store Three</h1></div>
    </body>
    
    </html>

  5. #5
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vwphillips,

    Is the only change that you have made there display:none?

    I tried using this:

    HTML Code:
    window.onload=function () {switch1('one')}
    In my javascript but it did not make a difference, any ideas? Should there not be a way to do it without using display:none; as I believe I have seen it done before.

  6. #6
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I had "one" set to display:block and forgot to remove it, that is why display:none was working......

    Now if I use display:none nothing appears on the main page, any way to get the first one to display by default?

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    opps

    did not see previous reply

    but
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    
    function switch1(div){
     if (document.getElementById('one')&&!document.getElementById('allinfo')){
      var option=['one','two','three'];
      for(var i=0; i<option.length; i++){
       obj=document.getElementById(option[i]);
       obj.style.display=(option[i]==div)? "block" : "none";
      }
     }
    }
    
    function Init(){
     document.getElementById('two').style.display='none';
     document.getElementById('three').style.display='none';
    }
    
    </script>
    
    <style type="text/css">
    <!--
    .contactbox {
      display:block;
    }
    
    -->
    </style>
    
    </head>
    
    <body onload="Init()" >
    <ul id="tabs">
    <li><a href="#" onMouseOver="switch1('one');">Store one</a></li>
    <li><a href="#" onMouseOver="switch1('two');">Store two</a></li>
    <li><a href="#" onMouseOver="switch1('three');">Store three</a></li>
    </ul>
    <div id="one"  style="display:block;" ><h1>Store one</h1></div>
    <div id="two" class="contactbox"><h1>Store two</h1></div>
    <div id="three" class="contactbox"><h1>Store Three</h1></div>
    </body>
    
    </html>

  8. #8
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't appear to make the columns disappear instantly, I got the javascript from a friends site, http://www.mulecab.com/SlidingTable/ It appears to work properly there, was I missing something?

  9. #9
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone know why this:

    HTML Code:
    window.onload=function () {switch1('one')}
    Doesn't make the number one div visible? I want them all set to invisible unless specifically made visible, so shouldnt this work?

  10. #10
    SitePoint Evangelist IJoeR's Avatar
    Join Date
    Feb 2003
    Location
    Somewhere in, MD
    Posts
    400
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this...

    Change the body tag from:

    Code:
    <body onload="Init()" >
    to

    Code:
    <body onLoad="switch1('one');">
    that make the div called "one" appear as the default item.

    you click or mouseover the other tabs and they should hide the other two.

    Rob

  11. #11
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, Rob that works, there is still a delay but I suppose it is OK as it seems there is a delay on the example site I posted as well. Is there any way to get this code working?..

    HTML Code:
    window.onload=function () {switch1('one')}
    Because of my current template setup I would like to be able to do this just from the javascript?


Bookmarks

Posting Permissions

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