SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show/hide layer (javascript) questions

    Hello everybody,
    I'm using a scripts that (as was probably already clear) shows and hides a layer. Only, when i load the page the layer is hidden and i need to klick a button to show it.

    My question is; how can i make it start visible (on page load). And then, when done with it, klick it away!

    Also, i would like the buttons (to show/hide the layer) to be text links.

    Here's the script that goes between <head></head>
    Code:
    <script type="text/javascript">
    <!--
    function toggleBox(szDivID, iState) // 1 visible, 0 hidden
    {
        if(document.layers)	   //NN4+
        {
           document.layers[szDivID].visibility = iState ? "show" : "hide";
        }
        else if(document.getElementById)	  //gecko(NN6) + IE 5+
        {
            var obj = document.getElementById(szDivID);
            obj.style.visibility = iState ? "visible" : "hidden";
        }
        else if(document.all)	// IE 4
        {
            document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
        }
    }
    // -->
    </script>
    And this goed between <body></body>
    Code:
    <div ID="demodiv" class="demo">
    <table width="200" border="0" align="center" bgcolor="#0066FF">
      <tr>
        <td><?PHP
     $category = "1";
     $number = "1";
     $template = "main";
     include("fork/show_news.php");
    ?></td>
        <td bgcolor="#FFFF00"><?PHP
     $category = "4";
     $template = "thumb";
     include("fork/show_news.php");
    ?></td>
      </tr>
    </table>
    </div>
    Here are the buttons;
    <input type="button" onClick="toggleBox('demodiv',0);" value="Hide Div">
    <input type="button" onClick="toggleBox('demodiv',1);" value="Show Div">

    And there is a style type for the layer, but i don't think you quys need that?
    I hope it can be done! I couldn't make it happen

    http://www.greyburn.net <-- see it working! I'm still bussy, so it loox like crap.

    Thank a lot! X

  2. #2
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just change your CSS to:
    Code:
    .demo  {color:#000033; background-color:no; layer-background-color:no;
            position:absolute; top:100px; left:0px; width:100&#37;; height:350px;
            z-index:99;}
    It will be visible from the very beginning.

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you, that works out great

    can you maby also show me how to make a text links from this button?

    <input type="button" onClick="toggleBox('demodiv',0);" value="Hide Div">


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
  •