Web Analytics Made Easy - StatCounter Question about layers - CodingForum

Announcement

Collapse
No announcement yet.

Question about layers

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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
    Tags: None
  • #2
    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 .
    'If you don't stand for something, you'll fall for anything.'

    Comment

    • #3
      Thansk Asaaki,
      This is very useful
      Kippie

      Comment

      Previous template Next
      Working...
      X