alkchan
November 23, 2010, 12:34am
1
Hello, I’m currently changing the appearance and position of DIV elements by reassigning their class on the fly using onmouseover events attached to other DIVs.
For example a DIV with ID “arrow” will be assigned the arrow1 class by default as defined here:
.arrow1 {
position:absolute;
width:6px;
height:16px;
z-index:1;
left: -18px;
top: -1px;
}
which will then change to the arrow2 class as defined here:
.arrow2 {
left: -18px;
top: 16px;
}
when the user places the mouse cursor over another DIV altogether… with code like this:
<div id=“button” onmouseover=“arrow.className=‘arrow2’”></div>
This works just fine in chrome and internet explorer, but does not work in Firefox - similarly I can’t get any onclick events to work either - even though they’re fine in Chrome and IE.
Any help would be appreciated.
system
November 23, 2010, 12:39am
2
it would help if you post all the html and javascript.
with just the posted code we (or at least me ;)) can’t tell how the object named arrow in
arrow.className='arrow2'
is defined
edit: and don’t forget to wrap any posted code in code tags - the # button in the editor’s toolbar
alkchan
November 23, 2010, 12:44am
3
Apologies, and thanks for the quick reply.
I will post a different example (but same problem) in it’s entirety
Here, a DIV called “button” will make a hidden DIV called “information” become visible by changing its class from “.info” to “.info2” - again this works in IE and Chrome but not FF.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ”>
<html xmlns=“http://www.w3.org/1999/xhtml ”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<style type=“text/css”>
<!–
#button {
position:absolute;
width:87px;
height:83px;
z-index:1;
left: 203px;
top: 133px;
background-color: #666666 ;
}
.info{
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 406px;
top: 121px;
visibility:hidden;
}
.info2 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 406px;
top: 121px;
visibility:visible;
}
–>
</style>
</head>
<body>
<div id=“button” onclick=“information.className=‘info2’”></div>
<div class=“info” id=“information” onclick=“this.className=‘info’”>
<p>information</p></div>
</body>
</html>
system
November 23, 2010, 12:54am
4
your problem is in this line
<div id="button" onclick="information.className='info2'"></div>
To change the property of an element (object) the general syntax is:
objectReference.property = ‘some value’;
In your code, information in information.className is not an object datatype but simply the id of an object.
To get an object reference for an object with an id you can use document.getElementbyId()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#button {
position:absolute;
width:87px;
height:83px;
z-index:1;
left: 203px;
top: 133px;
background-color: #666666;
}
.info{
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 406px;
top: 121px;
visibility:hidden;
}
.info2 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 406px;
top: 121px;
visibility:visible;
}
-->
</style>
</head>
<body>
<div id="button" onclick="[COLOR=red]document.getElementById('information').className='info2'[/COLOR]"></div>
<div class="info" id="information" onclick="this.className='info'">
<p>information</p></div>
</body>
</html>
alkchan
November 23, 2010, 12:58am
5
Kalon thank you very much!