Member Avatar for AliHurworth

Hi all,

I have a div I would like to show and hide.

I've used a script before which works, but now reusing it I can't make it fly. As I can't see where I am going wrong, can anyone else help?

This is the one that works:

<!--script in head tag -->
<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>

<body>
<div id="positioned-element25">
<a href="#" onClick="toggleBox('login',1);">Login</a></div>
<div id="login">
  <form name="fp_login" action="prcs_login.php" method="post">
	<table>
<!-- abbreviated -->
            <tr>
                <td>
...
                                            <td>
                                           	  <input type="button" onClick="toggleBox('login',0);" value="Cancel">
                                            </td>
                                         </tr>
                                         
                                               
    </table>
</form>
</div>

...and this is the new version:

<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>
<body>
<div id="positioned-element25">
<a href="#" onClick="toggleBox('login',1);">Login</a></div>
    <div id="login"> 
            <?php
            include ('mailer.php');
            ?>
        </div>
...

I can't see the difference, but the top one works and not the bottom. Pointers please?

  • 2 Contributors
  • 2 Replies
  • 150 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by AliHurworth
Member Avatar for Airshow

Ali,

The problem may be that toggleBox doesn't actually have a toggle action. It shows/hides a dom element depending on what is passed to it as iState.

In other words, the reponsibility for which state becomes set, is external to toggleBox . If iState is always 1 or always 0 then the visibility state of 'login' will never change.

I thknk you should ensure that 'login' is initially hidden. This is best achieved with css:

#login { visibility : hidden; }

Then at least the Login link will cause it to become visible even if nothing ever hides it again.

Airshow

Edited by Airshow because: n/a
Member Avatar for AliHurworth

In the end I did it like so:

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.display = iState ? "block" : "none";
    }
    
}
// -->
</script>

and

<div id="positioned-element25">
<a href="#" onClick="toggleBox('login',1);">Login</a></div>
    <div id="login" style="display:none"> 
            <?php
            include ('mailer.php');
            ?>
        </div>

...which takes into account your suggestion as well as simplifying the script.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.