show/hide layer (javascript) questions

**imogeen** · May 9, 2007 01:14

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

**Mike Borozdin** · May 9, 2007 02:09

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.

**imogeen** · May 9, 2007 03:59

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">

User Tag List

Thread: show/hide layer (javascript) questions

Thread Tools

Display

show/hide layer (javascript) questions

Bookmarks

Bookmarks

Posting Permissions