...

View Full Version : Layers Question



dlg0351
02-02-2005, 11:06 PM
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!

rmedek
02-02-2005, 11:19 PM
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

dlg0351
02-03-2005, 02:07 AM
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? :confused:

_Aerospace_Eng_
02-03-2005, 02:25 AM
try this

<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

dlg0351
02-03-2005, 04:42 AM
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!

_Aerospace_Eng_
02-03-2005, 05:19 AM
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

dlg0351
02-03-2005, 05:23 AM
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!!!

glenngv
02-03-2005, 06:05 AM
Change:

document.layers[msg].style.visibility

to:

document.layers[msg].visibility

NS4 doesn't have style (literally and figuratively :D)

dlg0351
02-03-2005, 01:22 PM
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?

rmedek
02-03-2005, 01:51 PM
Please let it be known that I have no idea how to code Javascript.



<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.

dlg0351
02-03-2005, 06:18 PM
It didn't work, I got this error in Netscape 4.75:

document.layers[msg] has no properties.

rmedek
02-03-2005, 10:37 PM
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.

dlg0351
02-03-2005, 10:45 PM
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.

Kor
02-08-2005, 09:33 AM
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)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum