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

    How to toggle two layers together?

    In the HTML below I want two layers together to appear. But it does not work. I'v tried it on two ways (see links below). Can anyone help?

    <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 layerLoop(sel) {
    var eles = document.getElementsByTagName("div");
    for(i=0;i<eles.length;i++) {
    if (eles[i].id==sel) {
    document.getElementById(sel).style.visibility="visible";
    }
    else {
    document.getElementById(eles[i].id).style.visibility="hidden";
    }
    }
    }
    </script>
    <style type="text/css"><!--
    #layer { position: absolute; top: 16px; left: 16px; width: 100px; height: 100px; visibility: hidden }
    #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: hidden }
    #layer4 { position: absolute; top: 10px; left: 249px; width: 100px; height: 100px; visibility: hidden }-->
    </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: layerLoop('layer'); layerLoop('layer4')">Make Layer 1 and layer 4 visible; but this does not work</a><br>
    <a href="javascript:;" onClick="layerLoop('layer2'); layerLoop('layer3')">Make Layer 2 and layer 3 visible; but this does not work</a><br>
    <a href="javascript: layerLoop('layer3')">Make Layer 3 visible; this works</a><br>
    <a href="javascript: layerLoop('layer4')">Make Layer 4 visible; this works</a><br><br>
    <a href="javascript: history.go(0)">Reset</a>


    </body>

    </html>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    function toggleObjects() {
    var args = arguments;
    for(var i = 0; i < args.length; i++) {
    if(args[i].style.display == "none") args[i].style.display = "block";
    else args[i].style.display = "none";
    }
    }
    This function allows you to toggle as many objects as you'd like.

    Hope that helps!

    Happy coding!

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but I cannot get it working. Apparently I make a mistake somewhere but where?

    I tries this code:
    <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 toggleObjects() {
    var args = arguments;
    for(var i = 0; i < args.length; i++) {
    if(args[i].style.display == "none") args[i].style.display = "block";
    else args[i].style.display = "none";
    }
    }
    </script>

    <style type="text/css"><!--
    #layer { position: absolute; top: 16px; left: 16px; width: 100px; height: 100px; visibility: hidden }
    #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: hidden }
    #layer4 { position: absolute; top: 10px; left: 249px; width: 100px; height: 100px; visibility: hidden }-->
    </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="java script:;" onClick="toggleObjects('layer');">Toggle Layer1</a>

    </body>
    </html>

    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
    •