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
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  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
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

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