By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,086 Members | 1,442 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,086 IT Pros & Developers. It's quick & easy.

create a div with same height & width as another element

P: n/a
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
Nov 24 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/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').innerH TML +=
' 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>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Nov 24 '06 #2

P: n/a
@ 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

Nov 25 '06 #3

P: n/a
Andi,

Thanks that's what i been trying to achieve

can you please send me your prototype_extended version ?
"webEater" <an***********@gmx.dewrote in message
news:11*********************@l12g2000cwl.googlegro ups.com...
@ 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

Nov 27 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.