| CodeGuru Home | VC++ / MFC / C++ | .NET / C# | Visual Basic | Newsletters | VB Forums | Developer.com |
|
|||||||
| Scripting - Client Side Discuss client-side scripting issues. Client-side scripting such as JavaScript, JScript, and VBScript as well as technologies such as HTML and stylesheets. |
 |
|
|
Thread Tools | Search this Thread |
Rating: 
|
Display Modes |
|
#1
May 20th, 2002, 04:14 PM
|
|||
|
|||
|
HTML div tag visibility problem
Hi !
I have a problem with the HTML page below: <html> <script language="JavaScript"> function setVisibility(id, visibility) { document.all[id].style.visibility = visibility; if (visibility == "hidden") { document.all[id].style.position = "absolute"; } else if (visibility == "visible") { document.all[id].style.position = "relative"; } } function setParentVisibility(id, visibility) { parent.document.all[id].style.visibility = visibility; if (visibility == "hidden") { parent.document.all[id].style.position = "absolute"; } else if (visibility == "visible") { parent.document.all[id].style.position = "relative"; } } </script> <body> <form name="Teste"> <div id="main" style="visibility:visible; position:relative"> Main <input value="switch" type="button" onClick="setVisibility('main', 'hidden');setVisibility('sub', 'visible');"> </div> <div id="sub" style="visibility:hidden; position:absolute"> Sub <input value="switch" type="button" onClick="setVisibility('main', 'visible');setVisibility('sub', 'hidden');"> </div> </form> </body> </html> When I press the 'switch' button in the 'main' div layer, the 'main' div layer stays hidden and the 'sub' div layer is shown. When I press the 'switch' button in the 'sub' div layer, the 'sub' div layer stays hidden and the 'main' div layer is shown. The problem is when the layer to be displayed is shown, because the button of the layer do not appear directly. You have to resize the browser's window to view the button. How can I solve this problem ?? thanks, mach15 
|
|
#2
May 21st, 2002, 02:30 PM
|
|||
|
|||
|
I believe you might want to just have a single "DIV" tag whose InnerHTML property changes with the click of a button. I also have the same issues you are having. I think it would be much more straightforward to just change your display rather than adjusting positions of your display.
|
|
#3
May 22nd, 2002, 07:42 PM
|
|||
|
|||
|
Mach,
You could just use the display property (instead of visibility) which doesn't allot space on the page when the display is set to "none". Here's a rewrite which does what I think you want to do: <html> <script language="JavaScript"> function setVisibility(id, visibility) { document.all[id].style.display = visibility; } </script> <body> <form name="Teste"> <div id="main" style="display:block"> Main <input value="switch" type="button" onClick="setVisibility('main', 'none');setVisibility('sub', 'inline');"> </div> <div id="sub" style="display:none"> Sub <input value="switch" type="button" onClick="setVisibility('main', 'inline');setVisibility('sub', 'none');"> </div> </form> </body> </html> Hope this helps, Chris
|
|
| Bookmarks |
|
||||||
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
Linear Mode
