create a div with same height & width as another element

T

toffee

Hi all,

Here's the situation:
I have a table of data; and I would like to add a div with exactly the same
height and width as the top-left header. The problem is as the data is
dynamic and the header cell is set to nowrap, the width always varies.
I tried to do some research but everything is a bit confusing for a novice
as myself.

How can i use JS to find out what the dimension of the top-left header cell
are; and maybe somehow pass those 2 variables to do some CSS and create the
div ?

All help is kindly appreciated.

T
 
A

ASM

toffee a écrit :
Hi all,

Here's the situation:
I have a table of data; and I would like to add a div with exactly the same
height and width as the top-left header. The problem is as the data is
dynamic and the header cell is set to nowrap, the width always varies.

It is a simple CSS feature, try this :

<html>
<table border=1 cellspacind=4><tr><th>
<div style="position:relative;white-space:nowrap;" id="mydatas">
my data data and datas
<div style="position:absolute;top:0;width:100%;
height:100%;background:yellow;">
</div>
</div>
</th><td>something else</td></tr></table>

<a href="#" onclick="document.getElementById('mydatas').innerHTML +=
' and more datas';"return false;">add datas</a>

<a href="#"
onclick="var d =document.getElementById('mydatas');
d = d.getElementsByTagName('div')[0].style;
d.display = d.display==''? 'none' : '';
return false;">show/hide datas</a>
</html>
 
W

webEater

@ ASM: I think you haven't understand the whole problem (?). My
solution:

....
<table><tr><th id="leftTopHead">
my data data and datas
</th></tr></table>
....

// Now use prototype (http://script.aculo.us/prototype.js) to realize
it:
function createDiv(element) {
var dimensions = $(element).getDimensions(true); // a better version
in my prototype_extended.js (ask me if you want it exactly!)
var d = document.createElement('div');
d.style.width = dimensions.width+'px';
d.style.height = dimensions.height+'px';
document.body.appendChild(d);
// after appending add your own className
d.className = 'whatever';
return d;
}

// To test it:
var myCorrectDiv = createDiv('leftTopHeader');

// Remember: your div won't change dimensions after it has been
created!

Andi
 
T

toffee

Andi,

Thanks that's what i been trying to achieve

can you please send me your prototype_extended version ?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top