Do left and top in
div#floater {
padding: 0px;
margin: 0px;
width: 280px;
height: 315px;
border: 1px;
border-style: solid;
border-color: black;
left: 100px;
top: 180px;
position: absolute;
}
and
<div id='floater' style='left: 100px;top: 180px;'>
refer to the same attributes?
I have been testing some draggable layer code that I found at <!-- m --><a class="postlink" href="http://www.codelifter.com/main/javascript/dragablelayer.html">http://www.codelifter.com/main/javascri ... layer.html</a><!-- m -->.
In the process of modifying the code for my needs, I moved the inline style attributes from the tags to embedded css. The result was NaN values being assigned to nowX and nowY in function ddInit. Here is the actual code from the above site:
function ddInit(e){
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
Debugging the code, I put a watch on the div and saw that whichDog.style.top and whichDog.style.left each had a value of ''. I also noticed that whichDog.offsetTop and whichDog.offsetLeft contained the values that I expected in style.top and style.left respectively.
Once I put the style= coding back into the div tag, i.e.:
<div id='theLayer' style='left: 100px;top: 180px;'>
the code worked.
Am I wrong in my understanding of top and left in both instances? Or is it my browser (I'm testing with IE 6.0.)?The style object represents the inline style values, not embedded or external styles.
To reference embedded/external styles:
if(document.all) { // IE
alert(document.getElementById('floater').currentStyle.left);
}
else { //Moz. W3c
alert(document.defaultView.getComputedStyle(document.getElementById('floater'), null).getPropertyValue('left', null));
}
Moz. will return value as 'px' even if a '%' is defined.
There is a CSSPrimitiveValue method which should return the defined value, but it doesn't appear to be implemented.
Opera (tested on version 7) does not support either of above.
IE also has:
document.getElementById('floater').runtimeStyle.left;
which is equivelent to
document.getElementById('floater').style.left;
Using inline styles, in your example, is a lot easier!
div#floater {
padding: 0px;
margin: 0px;
width: 280px;
height: 315px;
border: 1px;
border-style: solid;
border-color: black;
left: 100px;
top: 180px;
position: absolute;
}
and
<div id='floater' style='left: 100px;top: 180px;'>
refer to the same attributes?
I have been testing some draggable layer code that I found at <!-- m --><a class="postlink" href="http://www.codelifter.com/main/javascript/dragablelayer.html">http://www.codelifter.com/main/javascri ... layer.html</a><!-- m -->.
In the process of modifying the code for my needs, I moved the inline style attributes from the tags to embedded css. The result was NaN values being assigned to nowX and nowY in function ddInit. Here is the actual code from the above site:
function ddInit(e){
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
Debugging the code, I put a watch on the div and saw that whichDog.style.top and whichDog.style.left each had a value of ''. I also noticed that whichDog.offsetTop and whichDog.offsetLeft contained the values that I expected in style.top and style.left respectively.
Once I put the style= coding back into the div tag, i.e.:
<div id='theLayer' style='left: 100px;top: 180px;'>
the code worked.
Am I wrong in my understanding of top and left in both instances? Or is it my browser (I'm testing with IE 6.0.)?The style object represents the inline style values, not embedded or external styles.
To reference embedded/external styles:
if(document.all) { // IE
alert(document.getElementById('floater').currentStyle.left);
}
else { //Moz. W3c
alert(document.defaultView.getComputedStyle(document.getElementById('floater'), null).getPropertyValue('left', null));
}
Moz. will return value as 'px' even if a '%' is defined.
There is a CSSPrimitiveValue method which should return the defined value, but it doesn't appear to be implemented.
Opera (tested on version 7) does not support either of above.
IE also has:
document.getElementById('floater').runtimeStyle.left;
which is equivelent to
document.getElementById('floater').style.left;
Using inline styles, in your example, is a lot easier!