PDA

View Full Version : javascript style object

scoutt
01-04-2002, 10:47 PM
does anybody know why this don't work? is it because the .style isn't supported?

<html>
<head>
<link type="text/css" rel="stylesheet" href="sislimenu.css">
<script type="text/javascript">
function slideSub(which) {
var which = Number(which);
var currSubMenu;

for (var i = 0; i < 2; i++) {
currSubMenu = document.getElementById("SubMenu" + i);
if (which == i) {
currSubMenu.style.left = 120;
}
else {
currSubMenu.style.left = 20;
}
}
}
</script>
</head>
<body>
<div class="SiSliMenu" style="top: 20; left: 20; width: 100; height: 420;">
<div class="MainEntry" style="top: 1; left: 1; width: 98; height: 20;" onClick="java script:slideSub(0);">
<span class="MainText">foo</span>
</div>
<div class="MainEntry" style="top: 22; left: 1; width: 98; height: 20;" onClick="java script:slideSub(1);">
<span class="MainText">bar</span>
</div>
</div>
<div class="SiSliSubMenu" id="SubMenu0" style="top: 20; left: 20; width: 100; height: 43; z-index: -1;">
<div class="SubEntry" style="top: 1; left: 1; width: 98; height: 20;"><span class="SubText">some foo</span></div>
<div class="SubEntry" style="top: 22; left: 1; width: 98; height: 20;"><span class="SubText">more foo</span></div>
</div>
<div class="SiSliSubMenu" id="SubMenu1" style="top: 42; left: 20; width: 100; height: 43; z-index: -1;">
<div class="SubEntry" style="top: 1; left: 1; width: 98; height: 20;"><span class="SubText">some bar</span></div>
<div class="SubEntry" style="top: 22; left: 1; width: 98; height: 20;"><span class="SubText">more bar</span></div>
</div>
</body>
</html>


sislimenu.css

div.SiSliMenu {
position: absolute;
z-index: 0;
border: 1px;
background-color: blue;
}
div.SiSliSubMenu {
position: absolute;
border: 1px;
background-color: gray;
}
div.MainEntry {
position: absolute;
border: 1px;
background-color: yellow;
text-align: center;
}
div.SubEntry {
position: absolute;
border: 1px;
background-color: green;
text-align: center;
}
span.MainText {
text-transform: capitalize;
}
span.SubText {
text-transform: capitalize;
}
_mrkite
01-05-2002, 01:17 PM
Scoutt -

What is this:

var which = Number(which);

Looks like a function call, but, can't tell what it does. Anyway, try specifying 'px' in all your CSS positioning. Should help.
scoutt
01-05-2002, 08:54 PM
it's a friend of mine that was haing problems, So I can't explain all the code. more curious as to why we can't find any documentation on .style. do you have a couple of links there _Mrkite? ;)

I will try wha tyou suggest and get back to ya.
Jon Hanlon
01-06-2002, 06:01 PM
ECMA-262 says:

15.7.1 The Number Constructor Called as a Function.
When Number is called as a function rather than as a constructor, it performs a type conversion.


So it acts like parseInt() or parseFloat(). Furthermore, if the object is a Date object, Number() acts like .getTime(), returning the milliseconds since 1970.


In Internet Explorer:
.left property: is the object's position with respect to the left edge of the next object in the heirarchy. It is a string and includes a units designator. eg. "150mm"
.posLeft property: reflects the numeric value of the .left property. Changes to it change the .left property, leaving the units designator intact. It is a number. eg. 120
.pixelLeft property: reflects the value of the .left property in pixels. It is an integer and is always interpreted in pixels. eg. 300

When scripting the .left property, normally use .pixelLeft or .posLeft instead, or else add a units designator to the .left property.
scoutt
01-06-2002, 06:07 PM
thanks Jon, that helped a lot. :)