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 14 of 14

Thread: Layers Question

  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Layers Question

    Can someone tell me why the "Welcome to..." appears so much further down on the page and not directly underneath the layers?

    I assume it is because the top properties are adjusted so the changing line of text appears on the same line. But I thought anything you put inside a <div></div> with the visibility set to hidden would be the same as if it was not even there to begin with?

    Here is the code:

    <html>
    <head>
    <title></title>

    <style>
    <!--
    .msg1{font-family:verdana;font-size:10px;color:red;font-weight:bold;}
    .msg2{font-family:verdana;font-size:10px;color:blue;font-weight:bold;}
    .msg3{font-family:verdana;font-size:10px;color:yellow;font-weight:bold;}
    .msg4{font-family:verdana;font-size:10px;color:green;font-weight:bold;}
    -->
    </style>

    <script language="Javascript">
    <!--
    function showLayer(msg)
    {
    var name = navigator.appName;
    var vers = navigator.appVersion;

    if((name == "Netscape") && (vers == "4.75 [en] (Windows NT 5.0; U)")){
    }
    else{
    document.getElementById(msg).style.visibility = 'visible';
    }
    }

    function hideLayer(msg)
    {
    var name = navigator.appName;
    var vers = navigator.appVersion;

    if((name == "Netscape") && (vers == "4.75 [en] (Windows NT 5.0; U)")){
    }
    else{
    document.getElementById(msg).style.visibility = 'hidden';
    }
    }
    //-->
    </script>

    </head>

    <body>

    <table border=0 cellpadding=0 cellspacing=0 width=540>
    <tr>
    <td><a href="#" onmouseover="showLayer('msg1');" onmouseout="hideLayer('msg1');"><img src="pic1.gif" width=135 height=30 border=0></a></td>

    <td><a href="#" onmouseover="showLayer('msg2');" onmouseout="hideLayer('msg2');"><img src="pic2.gif" width=135 height=30 border=0></a></td>

    <td><a href="#" onmouseover="showLayer('msg3');" onmouseout="hideLayer('msg3');"><img src="pic3.gif" width=135 height=30 border=0></a></td>

    <td><a href="#" onmouseover="showLayer('msg4');" onmouseout="hideLayer('msg4');"><img src="pic4.gif" width=135 height=30 border=0></a></td>
    </tr>

    <tr>
    <td colspan=4>
    <div id="msg1" align="right" class="msg1" style="position:relative;left:0;top:0;width:540;height:20;visibility:hidden">Shop for thousands of online exclusives, and everyday items too!</div>

    <div id="msg2" align="right" class="msg2" style="position:relative;left:0;top:-20;width:540;height:20;visibility:hidden">Online and in-store, printing, viewing and sharing photos is easier than ever.</div>

    <div id="msg3" align="right" class="msg3" style="position:relative;left:0;top:-40;width:540;height:20;visibility:hidden">Fill prescriptions, get In-store Refills, check Rx prices, &amp; sign up for Refill Reminders.</div>

    <div id="msg4" align="right" class="msg4" style="position:relative;left:0;top:-60;width:540;height:20;visibility:hidden">Get information and answers on a variety of health topics.</div>
    </td>
    </tr>
    </table>

    Welcome to...

    </body>
    </html>


    Any help is much appreciated!

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by PROWEBWORKS.NET
    I thought anything you put inside a <div></div> with the visibility set to hidden would be the same as if it was not even there to begin with?
    http://codingforums.com/showthread.php?t=51472

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I read the thread you were referring to and putting display:none; in the style tag does fix the text below the <div>'s but then when I mouseOver the images to show what is in the <div> tags, it doesn't work.

    What can I do to fix this? As far as I know my coding is correct to show and hide the div's.

    What am I missing here?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    try this
    Code:
    <html>
    <head>
    <title></title>
    
    <style>
    <!--
    .msg1{font-family:verdana;font-size:10px;color:red;font-weight:bold;}
    .msg2{font-family:verdana;font-size:10px;color:blue;font-weight:bold;}
    .msg3{font-family:verdana;font-size:10px;color:yellow;font-weight:bold;}
    .msg4{font-family:verdana;font-size:10px;color:green;font-weight:bold;}
    #msg1{position:relative;left:0;top:0;width:540;height:20;display:none}
    #msg2{position:relative;left:0;top:0;width:540;height:20;display:none}
    #msg3{position:relative;left:0;top:0;width:540;height:20;display:none}
    #msg4{position:relative;left:0;top:0;width:540;height:20;display:none}
    -->
    </style>
    
    <script language="Javascript">
    <!--
    function showLayer(msg)
    {
    var name = navigator.appName;
    var vers = navigator.appVersion;
    
    if((name == "Netscape") && (vers == "4.75 [en] (Windows NT 5.0; U)")){
    }
    else{
    document.getElementById(msg).style.display = 'inline';
    }
    }
    
    function hideLayer(msg)
    {
    var name = navigator.appName;
    var vers = navigator.appVersion; 
    
    if((name == "Netscape") && (vers == "4.75 [en] (Windows NT 5.0; U)")){ 
    }
    else{
    document.getElementById(msg).style.display = 'none';
    }
    }
    //-->
    </script>
    
    </head>
    
    <body>
    
    <table border=0 cellpadding=0 cellspacing=0 width=540>
    <tr>
    <td><a href="#" onmouseover="showLayer('msg1');" onmouseout="hideLayer('msg1');"><img src="pic1.gif" width=135 height=30 border=0></a></td>
    
    <td><a href="#" onmouseover="showLayer('msg2');" onmouseout="hideLayer('msg2');"><img src="pic2.gif" width=135 height=30 border=0></a></td>
    
    <td><a href="#" onmouseover="showLayer('msg3');" onmouseout="hideLayer('msg3');"><img src="pic3.gif" width=135 height=30 border=0></a></td>
    
    <td><a href="#" onmouseover="showLayer('msg4');" onmouseout="hideLayer('msg4');"><img src="pic4.gif" width=135 height=30 border=0></a></td>
    </tr>
    
    <tr>
    <td colspan=4>
    <div id="msg1" align="right" class="msg1">Shop for thousands of online exclusives, and everyday items too!</div>
    
    <div id="msg2" align="right" class="msg2">Online and in-store, printing, viewing and sharing photos is easier than ever.</div>
    
    <div id="msg3" align="right" class="msg3">Fill prescriptions, get In-store Refills, check Rx prices, &amp; sign up for Refill Reminders.</div>
    
    <div id="msg4" align="right" class="msg4">Get information and answers on a variety of health topics.</div>
    </td>
    </tr>
    </table>
    
    Welcome to...
    
    </body>
    </html>
    the negative numbers in the divs for positioning were making some of the messages appear over the images

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Netscape layers/div in Netscape 4.75?

    Hey AerospaceEng,

    I made that changes that you said, the only modification I had to make was to enter some alignment and height properties for the <td> surrounding the <div>'s because it was moving the text below the <div> down onMouseover.

    In the previous example I was ignoring the <div>'s if the browser/version were Netscape 4.75. Now I am trying to get this to work. I have pieced together so code that I have found on some other sites and examples, but am not having any luck.

    I keep getting this error in Netscape 4.75: "document.layers[msg].style has no properties."

    Here is my code, what can you make of it?

    <html>
    <head>
    <title></title>

    <style>
    <!--

    .msg1{font-family:verdana;font-size:10px;color:red;font-weight:bold;}
    .msg2{font-family:verdana;font-size:10px;color:blue;font-weight:bold;}
    .msg3{font-family:verdana;font-size:10px;color:yellow;font-weight:bold;}
    .msg4{font-family:verdana;font-size:10px;color:green;font-weight:bold;}

    #msg1{position:relative;left:0;top:0;width:540;height:20;display:none}
    #msg2{position:relative;left:0;top:0;width:540;height:20;display:none}
    #msg3{position:relative;left:0;top:0;width:540;height:20;display:none}
    #msg4{position:relative;left:0;top:0;width:540;height:20;display:none}

    -->
    </style>

    <script language="Javascript">
    <!--
    function showLayer(msg)
    {
    if(document.layers)
    document.layers[msg].style.visibility = 'show';
    else if(document.getElementById)
    document.getElementById(msg).style.display = 'inline';
    else if(document.all)
    document.all.msg.style.display = 'inline';
    }

    function hideLayer(msg)
    {
    if(document.layers)
    document.layers[msg].style.visibility = 'hide';
    else if(document.getElementById)
    document.getElementById(msg).style.display = 'none';
    else if(document.all)
    document.all.msg.style.display = 'none';
    }
    //-->
    </script>

    </head>

    <body>

    <table border=0 cellpadding=0 cellspacing=0 width=540>
    <tr>
    <td><a href="#" onmouseover="showLayer('msg1');" onmouseout="hideLayer('msg1');"><img src="pic1.gif" width=135 height=30 border=0></a></td>

    <td><a href="#" onmouseover="showLayer('msg2');" onmouseout="hideLayer('msg2');"><img src="pic2.gif" width=135 height=30 border=0></a></td>

    <td><a href="#" onmouseover="showLayer('msg3');" onmouseout="hideLayer('msg3');"><img src="pic3.gif" width=135 height=30 border=0></a></td>

    <td><a href="#" onmouseover="showLayer('msg4');" onmouseout="hideLayer('msg4');"><img src="pic4.gif" width=135 height=30 border=0></a></td>
    </tr>

    <tr>
    <td colspan=4 valign="top" align="right" height=20>
    <layer name="msg1" class="msg1">
    <div id="msg1" class="msg1">Shop for thousands of online exclusives, and everyday items too!</div>
    </layer>

    <layer name="msg2" class="msg2">
    <div id="msg2" class="msg2">Online and in-store, printing, viewing and sharing photos is easier than ever.</div>
    </layer>

    <layer name="msg3" class="msg3">
    <div id="msg3" class="msg3">Fill prescriptions, get In-store Refills, check Rx prices, and sign up for Refill Reminders.</div>
    </layer>

    <layer name="msg4" class="msg4">
    <div id="msg4" class="msg4">Get information and answers on a variety of health topics.</div>
    </layer>
    </td>
    </tr>
    </table>

    Welcome to...

    </body>
    </html>

    I appreciate the help!

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    hmm im not sure i dont have 4.5 i would think that it may have to be getElementById('msg'), recognizes what to do in netscape 7.2 sorry i can't be of more help

  • #7
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Netscape

    Yeah, Netscape 4.75 does not recognize getElementById. I wish it were that simple. I have seen layers done in older browsers so I know it can be done. UGH!!!

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Change:

    document.layers[msg].style.visibility

    to:

    document.layers[msg].visibility

    NS4 doesn't have style (literally and figuratively )
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I changed it to document.layers[msg].visibility = 'show'; and I don't get an error, but it does not show the hidden layers, any more suggestions?

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Please let it be known that I have no idea how to code Javascript.

    Code:
    <html>
    <head>
    <title></title>
    
    <style>
    <!--
    .msg1{font-family:verdana;font-size:10px;color:red;font-weight:bold;}
    .msg2{font-family:verdana;font-size:10px;color:blue;font-weight:bold;}
    .msg3{font-family:verdana;font-size:10px;color:yellow;font-weight:bold;}
    .msg4{font-family:verdana;font-size:10px;color:green;font-weight:bold;}
    -->
    </style>
    
    <script language="Javascript">
    <!--
    function showLayer(msg)
    {
    if(document.layers)
    document.layers[msg].display = 'show';
    else if(document.getElementById)
    document.getElementById(msg).style.display = 'inline';
    else if(document.all)
    document.all.msg.display = 'inline';
    }
    
    function hideLayer(msg)
    {
    if(document.layers)
    document.layers[msg].display = 'hide';
    else if(document.getElementById)
    document.getElementById(msg).style.display = 'none';
    else if(document.all)
    document.all.msg.display = 'none';
    }
    //-->
    </script>
    
    
    </head>
    
    <body>
    
    <table border=0 cellpadding=0 cellspacing=0 width=540>
    <tr>
    <td><a href="#" onmouseover="showLayer('msg1');" onmouseout="hideLayer('msg1');"><img src="pic1.gif" width=135 height=30 border=0></a></td>
    
    <td><a href="#" onmouseover="showLayer('msg2');" onmouseout="hideLayer('msg2');"><img src="pic2.gif" width=135 height=30 border=0></a></td>
    
    <td><a href="#" onmouseover="showLayer('msg3');" onmouseout="hideLayer('msg3');"><img src="pic3.gif" width=135 height=30 border=0></a></td>
    
    <td><a href="#" onmouseover="showLayer('msg4');" onmouseout="hideLayer('msg4');"><img src="pic4.gif" width=135 height=30 border=0></a></td>
    </tr>
    
    <tr>
    <td colspan=4 height="20px" align="right">
    <div id="msg1" class="msg1" style="width:540;height:20;display: none;">Shop for thousands of online exclusives, and everyday items too!</div>
    
    <div id="msg2" class="msg2" style="width:540;height:20;display: none;">Online and in-store, printing, viewing and sharing photos is easier than ever.</div>
    
    <div id="msg3" class="msg3" style="width:540;height:20;display: none;">Fill prescriptions, get In-store Refills, check Rx prices, &amp; sign up for Refill Reminders.</div>
    
    <div id="msg4" class="msg4" style="width:540;height:20;display: none;">Get information and answers on a variety of health topics.</div>
    </td>
    </tr>
    </table>
    
    Welcome to...
    
    </body>
    </html>
    Copy, paste, test.

  • #11
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    It didn't work, I got this error in Netscape 4.75:

    document.layers[msg] has no properties.

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    What are you testing on, a Commodore 64?

    If your core audience uses Netscape 4.75, then you shouldn't be using such tricky things as Javascript, CSS, or HTML. Come on, man, seriously.

  • #13
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HAHA! No but I wouldn't mind having my Commodore back, man the fun I had with Basic, haha!

    Hey man I hear ya, but I know it can be done and I am determined to get it to work.

  • #14
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    NS4.7 should use the same display none/inline as the modern browsers. Don't confound with visibility which, indeed, has different values hide/show.

    But NS4 needs a position to get display at work. Unfortunately, NS4 does not accept the relative postioning, thus you must use

    <layer>
    <ylayer>
    ...
    </ylayer>
    <layer>

    Type of HTML coding to mime a relative postion. Furthermore, that means you need tow different CSS classes (for NS4 and for the rest)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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