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

    Question about layers

    In the HTML below I have a layer "Block1" and within that layer the blocks "black", "blue" and "red". I don't know if this is possible at all but I would like to make it so that if I hide "Block1" the layers "black", "blue" and "red" are hidden also (because they are within "Block1"). And if I make "Block1" visible, I have the choice to make the layers within either visible or hidden. I can't get it working myself. Can anyone tell me if this is possible at all or that there is maybe another trick do get the same result?

    This is the HTML:
    <html>
    <head>
    <script language="JavaScript1.2"><!--
    // Show/Hide functions for non-pointer layer/objects
    function showtext(id) {
    // if (ns4) document.layers[id].visibility = "show"
    //else if (ie4) document.all[id].style.visibility = "visible"
    document.all[id].style.visibility = "visible"
    }
    function hidetext(id) {
    // if (ns4) document.layers[id].visibility = "hide"
    //else if (ie4) document.all[id].style.visibility = "hidden"
    document.all[id].style.visibility = "hidden"
    }
    // -->
    </script>
    <style type="text/css"><!--
    #black { position: absolute; top: 150px; left: 250px; width: 100px; height: 40px; color: #000000; font-size: 14pt; font-family: Arial; visibility: hidden }
    #blue { position: absolute; top: 150px; left: 250px; width: 100px; height: 40px; color: #191970; font-size: 14pt; font-family: Arial; visibility: visible }
    #red { position: absolute; top: 150px; left: 250px; width: 100px; height: 40px; color: #FF0000; font-size: 14pt; font-family: Arial; visibility: visible }
    #block1 { position: absolute; top: 100px; left: 200px; width: 100px; height: 40px; visibility: visible }-->

    </style>
    </head>
    <body>

    <table>
    <div id="block1">This is block1</div>
    <tr>
    <td>
    <div id="Black">This is black text</div>
    <div id="blue">This is blue text</div>
    <div id="red">This is red text</div>
    </td>
    </td>
    </table>

    <a href="javascript:;" onclick="showtext('Black'); hidetext('blue'); hidetext('red')">Show black and hide blue and red<br>
    <a href="javascript:;" onclick="showtext('blue'); hidetext('Black'); hidetext('red')">Show blue and hide black and red<br>
    <a href="javascript:;" onclick="showtext('red'); hidetext('Black'); hidetext('blue')">Show red and hide black and blue<br>
    <a href="javascript:;" onclick="showtext('block1')">Show Block1<br>
    <a href="javascript:;" onclick="hidetext('block1')">Hide Block1<br>

    </body>
    </html>

    Kippie

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    This little Earth.
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First of all, you have to change your <a> tag. you can either do:
    a href="#" onClick="your_function()">
    OR
    <a href="javascript:your_function()">
    You didn't close the A tags either.

    Also, although you say that blue,red and black are all layers withIN block1, you haven't coded them for that.
    you have to have the three contained layers tagged withIN block1, like this:
    <div id="block1">this is block1 <-- don't close the block1 div tag yet

    <div id="black">this is black text</div>
    <div id="blue"> this is blue text</div>
    <div id="red"> this is red text</div>
    </div> --> NOW close the "block1" div tag, so that you've got 'black','red' and 'blue' enclosed within it.


    This is what I would do:

    <style>
    #block1{
    position: absolute; top: 100px; left: 200px; width: 100px; height: 40px;
    }
    #Black{
    { position: absolute; top: 150px; left: 250px; width: 100px; height: 40px; color: #000000; font-size: 14pt; font-family: Arial;
    }
    #blue{
    position: absolute; top: 150px; left: 250px; width: 100px; height: 40px; color: #191970; font-size: 14pt; font-family: Arial;
    }
    #red { position: absolute; top: 150px; left: 250px; width: 100px; height: 40px; color: #FF0000; font-size: 14pt; font-family: Arial;
    }
    </style>

    <script>
    // this function should change the visibility(v) of the given layer
    //(layerid), it works on IE.

    function showhidelayer(layerid,v){
    var thelayer=document.getElementById(layerid);
    thelayer.style.visibility=v;
    }
    </script>

    <body>

    <div id="block1" >This is block1

    <div id="Black">This is black text</div>
    <div id="blue">This is blue text</div>
    <div id="red">This is red text</div>

    </div>

    <a href="#"
    onclick="showhidelayer('Black','visible');
    showhidelayer('blue','hidden');
    showhidelayer('red','hidden')">Show black and hide blue and red<br>

    <a href="#"
    onclick="showhidelayer('blue','visible');
    showhidelayer('Black','hidden');
    showhidelayer('red','hidden')">Show blue and hide black and red<br>

    <a href="#"
    onclick="showhidelayer('red','visible');
    showhidelayer('Black','hidden');
    showhidelayer('blue','hidden')">Show red and hide black and blue<br>

    <a href="#"
    onclick="showhidelayer('block1','visible');
    showhidelayer('Black','visible');
    showhidelayer('blue','visible');
    showhidelayer('red','visible')">Show Block1<br>

    <a href="#"
    onclick="showhidelayer('block1','hidden');
    showhidelayer('Black','hidden');
    showhidelayer('blue','hidden');
    showhidelayer('red','hidden')">Hide Block1<br>
    </body>

    Here's my explanation for why u still have to use the function separately to show and hide all layers within block1 (for the link "show block1" and "hide block1"), even though they are contained within it. if, after making block1 appear, you change the visibility of the individual layers within, i guess javascript starts considering them independant, and simply saying "showhidelayer('block1','hidden')" will only hide block1 and nothing within it .

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thansk Asaaki,
    This is very useful
    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
    •