HTML Programming
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > HTML Programming
Reload this Page

div layer change onmouseover

Discuss div layer change onmouseover in the HTML Programming forum on Dev Shed.
div layer change onmouseover HTML Programming forum covering discussions of HTML and XHTML, as well as HTML-related issues such as writing W3C Compliant code. Use HyperText Markup Language for building websites.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Page 1 of 2 1 2 >
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old October 14th, 2000, 08:56 AM
Ulrik N Ulrik N is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 1999
Location: Denmark
Posts: 83 Ulrik N User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
hello

does anyone have a cross-browser script to show and hide layers(<div> ) on onmouseover / onmouseout?

the one i have only works in IE

------------------
regds..
-ulrik-
Reply With Quote
  #2  
Old October 15th, 2000, 12:20 AM
rycamor rycamor is offline
Gödelian monster
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jul 1999
Location: Pembroke Pines, Florida, USA
Posts: 2,303 rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Days 4 h 31 m 37 sec
Reputation Power: 56
The syntax is mainly the same for Netscape 4.x, except that onmousover events can only be captured from HREFs and form elements.

Show us your script, and we'll probably be able to make the changes you need.
Reply With Quote
  #3  
Old October 16th, 2000, 03:19 AM
Ulrik N Ulrik N is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 1999
Location: Denmark
Posts: 83 Ulrik N User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
here's the script
----------------------------------------
<script language="JavaScript">
<!--//
var layerid;
function popUp(layerid) {
if (document.all){
document.all[layerid].style.visibility="visible"
}
else
if(document.layers){
document.layers[layerid].visibility="show"
}
}
function hide(layerid){
if (document.all){
document.all[layerid].style.visibility="hidden"
}
else
if(document.layers){
document.layers[layerid].visibility="hide"
}
}
//-->
</script>
-----------------------------------------
i have the style sheed in the header;
-----------------------------------------
.layer_1 { POSITION: absolute; VISIBILITY: hidden; TOP: 37px; LEFT: 100px; padding: 5px 10px 5px 10px; }
.layer_2 { POSITION: absolute; VISIBILITY: hidden; TOP: 57px; LEFT: 100px; padding: 5px 10px 5px 10px; }
.layer_3 { POSITION: absolute; VISIBILITY: hidden; TOP: 77px; LEFT: 100px; padding: 5px 10px 5px 10px; }
.layer_4 { POSITION: absolute; VISIBILITY: hidden; TOP: 97px; LEFT: 100px; padding: 5px 10px 5px 10px; }
.layer_5 { POSITION: absolute; VISIBILITY: hidden; TOP: 117px; LEFT: 100px; padding: 5px 10px 5px 10px; }
-------------------------------------------
the problem is that it works fine in IE but in NS the layers are not hidden and are showing in the right side of the screen...


------------------
regds..
-ulrik-
Reply With Quote
  #4  
Old October 16th, 2000, 10:58 AM
mmonks mmonks is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2000
Posts: 27 mmonks User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
You could try using the display property of the div style. i.e. for IE something liek this - document.all.div.style.display="none" will hide a div and document.all.div.style.display="" will show a div. Maybe you can try using this property with the Netscape syntax and see if it works....

Good luck,
Matt.
Reply With Quote
  #5  
Old October 16th, 2000, 11:08 AM
rycamor rycamor is offline
Gödelian monster
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jul 1999
Location: Pembroke Pines, Florida, USA
Posts: 2,303 rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Days 4 h 31 m 37 sec
Reputation Power: 56
The script looks fine, but if your layers are already visible when you load the page, then there is another problem. First, I hope you're not trying to use this with Netscape 3.x, as it will only work with (I believe) NS 4.08 and up.

For NS 4+, show me how you put the layers in your document. Probably there is a small incompatibility in your syntax for <DIV> tags that we can fix.
Reply With Quote
  #6  
Old October 16th, 2000, 11:17 AM
mmonks mmonks is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2000
Posts: 27 mmonks User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Sorry! Ignore my last answer.

I've just tried this in NN4.7 and it works fine...

<html>
<head>
<script language="javascript">
function showLayer(){
if(document.layers){
document.layers['test'].visibility="visible"
}
}
</script>
</head>
<body>
<div id="test" name="test" style="visibility:hidden; position:absolute;top:100px;left:100px;">
Hello
</div>
<form>
<input type="button" onclick="showLayer();" value="test">
</form>
</body>
</html>

So it seems you just need to use 'visible' rather than 'show' in your javascript (as you have done for the IE code).

Hope that helps,
Matt.
Reply With Quote
  #7  
Old October 16th, 2000, 11:43 AM
Ulrik N Ulrik N is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 1999
Location: Denmark
Posts: 83 Ulrik N User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
ok here goes...
----------------------------------------
<div id="la_1" class="layer_1">
<table>.........</table>
</div>
----------------------------------------
the reason i would like the style in the header is that the code is nicer to look at
and yes, i'm aware of this not working with older borwsers...

------------------
regds..
-ulrik-
Reply With Quote
  #8  
Old October 17th, 2000, 12:50 AM
rycamor rycamor is offline
Gödelian monster
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jul 1999
Location: Pembroke Pines, Florida, USA
Posts: 2,303 rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Days 4 h 31 m 37 sec
Reputation Power: 56
Your code works fine for me, using the following complete document:

<BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--//
var layerid;
function popUp(layerid) {
if (document.all){
document.all[layerid].style.visibility="visible"
}
else
if(document.layers){
document.layers[layerid].visibility="show"
}
}
function hide(layerid){
if (document.all){
document.all[layerid].style.visibility="hidden"
}
else
if(document.layers){
document.layers[layerid].visibility="hide"
}
}
//-->
</script>

<style>
.layer_1 { POSITION: absolute; VISIBILITY: hidden; TOP: 37px; LEFT: 100px; padding: 5px 10px 5px 10px; }
.layer_2 { POSITION: absolute; VISIBILITY: hidden; TOP: 57px; LEFT: 100px; padding: 5px 10px 5px 10px; }
.layer_3 { POSITION: absolute; VISIBILITY: hidden; TOP: 77px; LEFT: 100px; padding: 5px 10px 5px 10px; }
.layer_4 { POSITION: absolute; VISIBILITY: hidden; TOP: 97px; LEFT: 100px; padding: 5px 10px 5px 10px; }
.layer_5 { POSITION: absolute; VISIBILITY: hidden; TOP: 117px; LEFT: 100px; padding: 5px 10px 5px 10px; }
</style>

</head>
<body bgcolor="#FFFFFF">
<a href="#" onMouseOver="popUp('la_1')" onMouseOut="hide('la_1')">testlayer_1</a>

<div id="la_1" class="layer_1">
<table><tr><td>..........<td></tr></table>
</div>

</body>
</html>
[/code]

I would recommend, though, that you change the name of function 'hide(layerid)' to something else, like 'hide_layer(layerid)', because I think 'hide()' for Netscape is technically a predefined method, It may not be a completely reserved word for the latest Netscape versions but maybe earlier versions of Netscape 4.x won't let you use it.
Reply With Quote
  #9  
Old October 17th, 2000, 03:32 AM
Ulrik N Ulrik N is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 1999
Location: Denmark
Posts: 83 Ulrik N User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
aaaaaaaah!!!
--------------------------------------------
i copyed the script 'rycamor' posted and ran it, and guess what! i just cant get it to work with NS, this is the error msg i got:
--------------------------------------------
document.layers[layerid] has no properties.

btw. i renamed the hide function to hide_layer, but with no luck

------------------
regds..
-ulrik-
Reply With Quote
  #10  
Old October 17th, 2000, 11:56 AM
rycamor rycamor is offline
Gödelian monster
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jul 1999
Location: Pembroke Pines, Florida, USA
Posts: 2,303 rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Days 4 h 31 m 37 sec
Reputation Power: 56
OK Ulrik, here's what you need to do:

1. make sure that when you copy and paste the script from my page, that nothing gets changed by accident. (When you copy and paste from HTML inside <PRE> tags, the it sometimes ignores line breaks)

2. Try running the script on another computer. (What platform are you running?)

3. Which version of Netscape is it? Try upgrading, if it's an older version, like 4.07, because they were quite buggy.

4. Try changing the name of the 'layerid' variable to something else, like 'layer_id'.

5. Put your complete page online somewhere and let us try it.
Reply With Quote
  #11  
Old October 19th, 2000, 05:13 AM
Ulrik N Ulrik N is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 1999
Location: Denmark
Posts: 83 Ulrik N User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
i uploaded my project to: www.neoworks.f2s.com/test

i don't know if it's a problem that i'm using php-templates to bould my site

------------------
regds..
-ulrik-
Reply With Quote
  #12  
Old October 19th, 2000, 11:10 AM
rycamor rycamor is offline
Gödelian monster
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jul 1999
Location: Pembroke Pines, Florida, USA
Posts: 2,303 rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Days 4 h 31 m 37 sec
Reputation Power: 56
AHA!!! You are using 'onmousemove=' instead of 'onmouseover='. Netscape does not support that. It should be onMouseOver="" and onMouseOut="". (Notice I have 'M' and 'O' capitalized, because I believe some versions of Netscape had case-sensitive methods.

That should clear things up... :-)
Reply With Quote
  #13  
Old October 19th, 2000, 06:07 PM
Anarchos Anarchos is offline
Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2000
Posts: 28 Anarchos User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
HTML is case-insensitive.
Reply With Quote
  #14  
Old October 20th, 2000, 02:17 AM
rycamor rycamor is offline
Gödelian monster
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jul 1999
Location: Pembroke Pines, Florida, USA
Posts: 2,303 rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level)rycamor User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Days 4 h 31 m 37 sec
Reputation Power: 56
HTML is case insensitive, but Javascript is not.

Your right, though. In this case, the case shouldn't matter, because we are talking about Netscape 4+, which became a little more case-tolerant. But I've seen many problems with older versions of Netscape Javascript, so I (somewhat superstitiously, sometimes) try to keep to the case presentation actually documented by developer.netscape.com, which still uses onMouseOver, and OnMouseOut. This method of capitalizing the individual words of a compounded word comes straight out of good O-O programming methods, and makes for more readable code.

Also, for plain HTML tags, its still good policy to keep your cases unmixed, and stick with lower case in general, becase XHTML and XML (the future) will not be as forgiving as HTML.
Reply With Quote
  #15  
Old October 20th, 2000, 03:09 AM
Ulrik N Ulrik N is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 1999
Location: Denmark
Posts: 83 Ulrik N User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
i'm sooooooo blind! that was a mistake,
but the layers are not hidden and not poping up when i'm trying in netscape.
should i move stylesheed into the style tag of the div instead????

------------------
regds..
-ulrik-
Reply With Quote
Reply
Page 1 of 2 1 2 >

Viewing: Dev Shed Forums > Web Design > HTML Programming > div layer change onmouseover

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode