Guest_imported
New member
- Jan 1, 1970
- 0
Hi,
I would like to move a DIV over a TR element. But the DIV element has resize itselft according the TR size. PS : DIV may have a different border width (specified by user style sheet).
Here is what I've done :
I noticed that when I substract (borderLeftWidth + borderRightWidth) from the DIV width the positionning is correct in FireFox.
But using Internet Explorer, I'm having more problem... Positionning seem to be inexact from 1px to 2px. And even if I'm substracting border size to the div it's not working...
Thanks for your help.
I would like to move a DIV over a TR element. But the DIV element has resize itselft according the TR size. PS : DIV may have a different border width (specified by user style sheet).
Here is what I've done :
Code:
<script>
// Get object position
function GetObjectPosition( obj ) {
this.Left = 0 ; this.Top = 0;
if (obj) {
var objTemp = obj.offsetParent;
this.Left = obj.offsetLeft;
this.Top = obj.offsetTop;
while (objTemp) {
this.Left = this.Left + objTemp.offsetLeft;
this.Top = this.Top + objTemp.offsetTop;
objTemp = objTemp.offsetParent;
}
}
return this;
}
// Get object size
function GetObjectSize( obj ) {
this.Width = 0; this.Height = 0;
if (obj) {
if (obj.offsetWidth != null) {
this.Width = obj.offsetWidth;
this.Height = obj.offsetHeight;
}
}
return this;
}
// Move and resize an object
function MoveAndSizeObject(objRef, left, top, width, height) {
objRef.style.left = left;
objRef.style.top = top;
objRef.style.width = width;
objRef.style.height = height;
}
// Function executed when document load
function OnDocuemntLoad() {
var tableMatrixTR = document.getElementById( "TestTR" );
var tableMatrixTRDivPosition = new GetObjectPosition( tableMatrixTR );
var tableMatrixTRDivSize = new GetObjectSize( tableMatrixTR );
var testDiv = document.getElementById( "TestDIV" );
MoveAndSizeObject( testDiv,
tableMatrixTRDivPosition.Left,
tableMatrixTRDivPosition.Top,
tableMatrixTRDivSize.Width,
tableMatrixTRDivSize.Height );
testDiv.style.visibility = "visible";
}
</script>
<style>
table.TableElem {
border-width: 1px;
border-spacing: 0px;
border-style: groove;
border-color: gray;
border-collapse: separate;
background-color: #fffafa;
}
td.CellElem {
width :80px;
height :80px;
border-width: 1px;
border-style :dotted ;
border-color: black;
cursor :default;
}
</style>
<body onload="return OnDocuemntLoad();">
<div id="TestDIV" style="z-Index :10000; position :absolute; visibility :hidden; border :10px solid red;"></div>
<table class="TableElem">
<tr id="TestTR">
<td class="CellElem">01</td>
<td class="CellElem">02</td>
<td class="CellElem">03</td>
</tr>
<tr id="TestTR2">
<td class="CellElem">04</td>
<td class="CellElem">05</td>
<td class="CellElem">06</td>
</tr>
</table>
</body>I noticed that when I substract (borderLeftWidth + borderRightWidth) from the DIV width the positionning is correct in FireFox.
But using Internet Explorer, I'm having more problem... Positionning seem to be inexact from 1px to 2px. And even if I'm substracting border size to the div it's not working...
Thanks for your help.
