www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hide/show layer on another frame

  1. #1
    Join Date
    May 2005
    Posts
    43

    Question Hide/show layer on another frame

    I am creating a website and I have setup two frames. The top frame is the header with all the links. I want to hide and show a layer in the topFrame based upon the mainFrame page. Is there a way to do a script that would allow me to show the layer on the topframe by doing an onLoad script? I hope that this is clear.

  2. #2
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    The 2 attributes you can use for this are display and visibility depending on the result that you want.

    visibility="visible"
    visibility="hidden"

    or

    display="block"
    display="none"


    Put the functions in the top frame

    function showDiv(){
    document.getElementById("divname").style.visibility="visible"
    }

    function hideDiv(){
    document.getElementById("divname").style.visibility="hidden"
    }

    Then call the functions from the page loading in the bottom frame with the onload and/or onunload events.

    <BODY onload="parent.topframe.showDiv()" onunload="parent.topframe.hideDiv">


    You could also go

    function showHideDiv(){
    if(document.getElementById("divname").style.visibility=="hidden"){
    document.getElementById("divname").style.visibility="visible"
    }
    else{
    document.getElementById("divname").style.visibility="hidden"
    }

    but you will have to set the dic to hidden to begin with

    Hope this helps

  3. #3
    Join Date
    May 2005
    Posts
    43

    Still not working

    I am not get this to actually hide/show the layer in the topframe. Here is my code for the frameset:

    Code:
    <script language="JavaScript">
    function showDiv(){
    document.getElementById("test1").style.visibility="visible"
    }
    
    function hideDiv(){
    document.getElementById("test1").style.visibility="hidden"
    }
    </script>
    
    <div id="test1" style="position:absolute; left:157px; top:54px; width:57px; height:24px; z-index:1; visibility: hidden;">Test1</div>
    <table width="760" height="71" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="/sw(new)/testframe/Link1.htm" target="mainFrame">Link1</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/sw(new)/testframe/Link2.htm" target="mainFrame">Link2</a></td>
      </tr>
    </table>
    and here is the link1 page with the onload code:

    Code:
    <BODY onload="parent.topframe.showDiv()" onunload="parent.topframe.hideDiv()">
    What am I doing wrong here? I need to somehow lable the onload to know which layer I want to show or hide...right? Because the end result I will have several layers that different pages will hide/show.

    Thanks in advance

  4. #4
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    I think you would be best going with the display attribute rather than the visibility attribute.

    I have run up a couple of examples on how you can go about creating the effect you want.

    Take a look at the examlpe files in the attached zip file
    Attached Files Attached Files

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles