Menu
Community /Pin to ProfileBookmark
@cootheadSep 14.2005 — #Hi there HockeyFan,
you may find this of interest...
..just add....
...to any element of which you require unformation.
[i]coothead[/i]@cootheadSep 14.2005 — #like this...
[i]cooothead[/i]
getting control height and widths?
based on code Fang gave in
[url]http://www.webdeveloper.com/forum/showthread.php?postid=433538#poststop
I am able to get multiple things done during the OnLoad event. However, when I try to access things like the height or width of a control or object on the page, such as a Table or listbox, it doesn’t do anything.
I tried something like
alert(‘the value is ‘ + document.getElementById(“BigTable”).height);
That didn’t do anything. So I’m wondering if after the page loads, how I can
access height and width of things on the page.
After I do this, what I’m hoping to do is change the height (and/or width) of one table, to be exactly the same as another that is on the page.
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadSep 14.2005 — #Hi there HockeyFan,you may find this of interest...
[color=navy]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>get object information</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
/*<![CDATA[*/
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#000;
background-color:#ccc;
}
#foo {
width:324px;
height:200px;
border:3px double #000;
background-color:#fff;
overflow:auto;
margin:20px auto;
}
#blah {
width:648px;
border:1px solid #000;
background-color:#fff;
margin:auto;
}
#foo p,#blah p {
margin:10px;
text-align:justify;
} <br/>
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function getInfo(obj) {
alert('width= '+obj.offsetWidth+'px, height= ' +obj.offsetHeight+'pxnn'+
'left= '+obj.offsetLeft+'px, top= '+obj.offsetTop+'px');
}
//]]>
</script>
</head>
<body>
<div id="foo" onclick="getInfo(this)">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus.
Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt
turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a,
accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</p>
</div>
<div id="blah" onclick="getInfo(this)">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus.
Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt
turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a,
accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</p>
</div>
</body>
</html>[/color]..just add....
[color=navy]
onclick="getInfo(this)"
[/color]...to any element of which you require unformation.
[i]coothead[/i]
0
@cootheadSep 14.2005 — #like this...[color=navy]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>get object information</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
/*<![CDATA[*/
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#000;
background-color:#ccc;
}
#foo {
width:324px;
height:200px;
border:3px double #000;
background-color:#fff;
overflow:auto;
margin:20px auto;
}
#blah {
width:648px;
border:1px solid #000;
background-color:#fff;
margin:auto;
}
#foo p,#blah p {
margin:10px;
text-align:justify;
} <br/>
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function getInfo() {
obj=document.getElementById('foo');
obj1=document.getElementById('blah');
alert(' "foo" width= '+obj.offsetWidth+'px, "foo" height= ' +obj.offsetHeight+'pxnn'+
' "foo" left= '+obj.offsetLeft+'px, "foo" top= '+obj.offsetTop+'pxnnand...nn'+
' "blah" width= '+obj1.offsetWidth+'px, "blah" height= ' +obj1.offsetHeight+'pxnn'+
' "blah" left= '+obj1.offsetLeft+'px, "blah" top= '+obj1.offsetTop+'px');
}
//]]>
</script>
</head>
<body onload="getInfo()">
<div id="foo">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus.
Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt
turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a,
accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</p>
</div>
<div id="blah">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus.
Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt
turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a,
accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</p>
</div>
</body>
</html>[/color][i]cooothead[/i]