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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to let only one layer disappear?

    In the HTML below I want to make it so, that I can choose one layer to disappear. This I what I try to do in the last menuline: "Hide layer1". But instead of only one layer disappearing all layers disappear. Could someone help me to change the function somehow?

    This is the HTML:
    <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() {
    var eles = document.getElementsByTagName("div");
    for(i=0;i<eles.length;i++) {
    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"><!--
    #layer { 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 }
    #layer3 { position: absolute; top: 155px; left: 16px; width: 100px; height: 100px; visibility: visible }
    #layer4 { position: absolute; top: 10px; left: 249px; width: 100px; height: 100px; visibility: visible }-->
    </style>
    </head>

    <body>
    <div id="layer">
    This is layer 1</div>
    <div id="layer2">
    This is layer 2</div>
    <div id="layer3">
    This is layer 3</div>
    <div id="layer4">
    This is layer 4</div>
    <br><br><br><br><br><br><br><br><br><br>
    <a href="javascript:;" onClick="hideLayers();showLayer('layer2');showLayer('layer3')">Make Layer 2 and layer 3 visible; </a><br>
    <a href="javascript:;" onClick="showLayer('layer2');">Make Layer 2 visible; </a><br>
    <a href="javascript:;" onClick="hideLayers('layer2');showLayer('layer4');showLayer('layer3')">Hide layer2 and show layer 3 and 4</a><br>
    <a href="javascript:;" onClick="hideLayers();">Hide all layers</a><br>
    <a href="javascript:;" onClick="hideLayers('layer1');">Hide layer1</a><br>

    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your problem is those dead-end URLs you provided.

    This [/b]href="java script:;" [/b] is not a valid URL. Replacing that with href="#" makes the links work.
    Check out the Forum Search. It's the short path to getting great results from this forum.

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

    Thanks for your reaction, but I cannot get it working. I've replaced the code as you said but when clicking the last link ("Hide layer1") still all layers disappear. What's wrong?

    Kippie

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your hideLayers function is set up to find all DIVs on the page and to hide ALL of them. It isn't using the parameter you're passing it to decide which layer to hide. You're expecting that function to perform in a way it wasn't written to perform.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see, OK I'll work on it. Thanks anyhow.

    Kippie


  •  

    Posting Permissions

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