Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to let certain layers disappear and others not?

    In the HTM below there is a function to show and hide layers. With the command "hideLayers();" all layers are hidden. I wonder if it is possible to change the function so that with "hideLayers();" one type of layers (dependent on the name) answer to this function and disappear (layer1 and layer2), while the others don't and stay (otherlayer).

    This is the HTML with the function:
    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <meta name="generator" content="Adobe GoLive 4">
    <title>Welcome to Adobe GoLive 4</title>

    <script language="javascript">
    function hideLayers(sel) {
    var eles = document.getElementsByTagName("div");
    var all = (sel) ? 0 : 1;
    if(all){
    for(i=0;i<eles.length;i++) {
    document.getElementById(eles[i].id).style.visibility="hidden";
    }
    }
    else{
    for(i=0;i<eles.length;i++) {
    if(eles[i].id==sel) document.getElementById(eles[i].id).style.visibility="hidden";
    }
    }
    }

    function showLayer(sel) {
    var eles = document.getElementsByTagName("div");
    for(i=0;i<eles.length;i++) {
    if (eles[i].id==sel) {
    document.getElementById(sel).style.visibility="visible";
    }

    }
    }
    </script>

    <style type="text/css"><!--
    #layer1{ position: absolute; top: 16px; left: 16px; width: 100px; height: 100px; visibility: visible }
    #layer2 { position: absolute; top: 148px; left: 217px; width: 100px; height: 100px; visibility: hidden }

    #otherlayer { position: absolute; top: 10px; left: 249px; width: 100px; height: 100px; visibility: visible }
    -->
    </style>
    </head>

    <body>
    <div id="layer1">
    This is layer 1</div>
    <div id="layer2">
    This is layer 2</div>

    <div id="otherlayer">
    This is OtherLayer</div>
    <br><br><br><br><br>

    <a href="#" onClick="hideLayers();">Hide all layers</a><br>
    <a href="#" onClick="hideLayers('layer1');">Hide layer1</a><br>
    <a href="#" onClick="hideLayers('layer2');">Hide layer2</a><br>
    <a href="#" onClick="showLayer('layer2');">Show layer2</a><br>
    </body>
    </html>
    Last edited by kippie; 08-09-2004 at 04:40 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    <script language="javascript">
    <!--
    function hideLayers(id) {
    document.getElementById(id).style.visibility="hidden";
    }

    function showLayer(id) {
    document.getElementById(id).style.visibility="visible";
    }
    // -->
    </script>

    <div id="layer1">This is layer 1</div>
    <div id="layer2">This is layer 2</div>

    <br><br><br><br>

    <a href="#" onClick="hideLayers('layer1');">Hide layer1</a>
    <a href="#" onClick="showLayer('layer1');">Show layer1</a><br><br>
    <a href="#" onClick="hideLayers('layer2');">Hide layer2</a>
    <a href="#" onClick="showLayer('layer2');">Show layer2</a><br>

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Mr.J,

    I think I was not clear in my explanation. I changed my question a bot and hope it is more clear now. The point is that I'm making a website with a lot of div's which come up and go (these have to disappear on one command). But there are also some div's which have to be steady present and should never disappear. So I'm looking for a way to classify the div's into 2 groups so that on one command all div's of the first group disappear but all div's of the second remain as they are. Could anyone help?

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Ok, then we try again

    Any layer that is going to be included in the Hide All, Show All functions are to be included in the mydiv array.

    This script gives the ability to hide/show all the stated layers and show/hide individual layers



    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <meta name="generator" content="Adobe GoLive 4">
    <title>Welcome to Adobe GoLive 4</title>

    <script language="javascript">
    <!--
    mydivs=new Array() // layers to be included in All Hide, All Show
    mydivs[0]="layer1"
    mydivs[1]="layer2"

    function HideAllLayers() {
    for(i=0;i<mydivs.length;i++) {
    document.getElementById(mydivs[i]).style.visibility="hidden";
    }
    }

    function ShowAllLayers() {
    for(i=0;i<mydivs.length;i++) {
    document.getElementById(mydivs[i]).style.visibility="visible";
    }
    }

    function HideLayer(id) {
    document.getElementById(id).style.visibility="hidden";
    }

    function ShowLayer(id) {
    document.getElementById(id).style.visibility="visible";
    }
    // -->
    </script>

    <style type="text/css">
    <!--
    #layer1{ position: absolute; top: 16px; left: 16px; width: 100px; height: 100px; visibility: visible }
    #layer2 { position: absolute; top: 148px; left: 217px; width: 100px; height: 100px; visibility: hidden }
    #otherlayer { position: absolute; top: 10px; left: 249px; width: 100px; height: 100px; visibility: visible }
    -->
    </style>
    </head>

    <body>
    <div id="layer1">This is layer 1</div>
    <div id="layer2">This is layer 2</div>

    <div id="otherlayer">
    This is OtherLayer</div>
    <br><br><br><br><br>

    <a href="#" onClick="HideAllLayers();">Hide All Layers</a>
    <a href="#" onClick="ShowAllLayers();">Show All Layers</a>
    <P><a href="#" onClick="HideLayer('layer1');">Hide Layer 1</a>
    <a href="#" onClick="ShowLayer('layer1');">Show Layer 1</a>
    <P><a href="#" onClick="HideLayer('layer2');">Hide Layer 2</a>
    <a href="#" onClick="ShowLayer('layer2');">Show Layer 2</a>
    </body>
    </html>



  • #5
    JPM
    JPM is offline
    Regular Coder
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    204
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!--
    function hideLayers(id) {
    if(id.indexOf('hide') {
    document.getElementById(id).style.visibility="hidden";
    }
    }
    
    ......
    .......
    .....
    
    <div id="hide1"></div>
    <div id="hide2"></div>
    
    <div id="blah"></div><div id="blah2"></div>
    <JPM />

  • #6
    JPM
    JPM is offline
    Regular Coder
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    204
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks like we posted at the same time J...
    <JPM />

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    You have a good idea there though JPM


    Sometime later .......

    Just a thought,

    If you didn't want the layer to be made hidden/visible then you would not use the function on that layer?

    And a bit later .....

    Unless you were having other statements in the script that would affect the layer ......hmmm
    Last edited by Mr J; 08-09-2004 at 08:47 PM.

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Mr. J! This helps a lot!!
    And ......
    I learned something new


  •  

    Posting Permissions

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