Need help with code - grabbing width and height of an element.

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 427,377 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,038 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 775 | Replies: 1

•

Join Date: Feb 2008

Posts: 1

Reputation: allsenseless is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

allsenseless allsenseless is offline

Offline

Newbie Poster

Need help with code - grabbing width and height of an element.

Feb 18th, 2008

I need help I am pretty new to JavaScript... I try my best at it but I am getting lost and need some help.

What I want to do is grab an elements width and height and apply it to a window or a popup window.

In my case this is what currently have and I can't seem to get any further.. thanks in advance.

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var contentHTML = "Couldn't find content";

function popup(obj) {
  var contentName = obj.parentNode.childNodes;
  for (var i=0; i<contentName.length; i++) {
    if (contentName[i].tagName != undefined) {
      contentHTML = contentName[i].innerHTML;
      break;
    }
  }
  var winPopup = writeConsole();
  
  writeConsole('<div id=\"placeHolder\"></div>');
function writeConsole(content) {
 top.consoleRef=window.open('','placeHolder',
  'width=350,height=250'
   +',left=500'
   +',top=300'
   +',menubar=0'
   +',toolbar=0'
   +',status=0'
   +',scrollbars=0'
   +',resizable=1')
 top.consoleRef.document.writeln(
  '<html><head><title>Content Pop-Up</title><script type=\"text/javascript\" language=\"JavaScript\">var timerDelay; function showIt(){document.getElementById(\'placeHolder\').innerHTML = window.opener.contentHTML; timerDelay = window.setTimeout(\"window.print()\",1000);}<\/script></head>'
   +'<body onLoad="showIt()">'
   +content
   +'</body></html>'
 )
 top.consoleRef.document.close()
}
}
</script>
</head>

<body>
<div>
 <div>
	<table width="400" border="1" cellspacing="0" cellpadding="0">
	  <tr>
		<td>Content1</td>
	  </tr>
	</table>
</div>
 <input type="button" value=" Show " onclick="popup(this)">
</div>
<br />
<br />
<div>
 <div>
    <table width="600" border="1" cellspacing="0" cellpadding="0">
  <tr>
        <td>Content2</td>
  </tr>
</table>

 </div>
 <input type="button" value=" Show " onclick="popup(this)">
</div>
</body>
</html>

•

Join Date: Jan 2008

Location: Bangalore, India

Posts: 336

Reputation: DangerDev is an unknown quantity at this point

Rep Power: 0

Solved Threads: 32

DangerDev

Offline

Posting Whiz

Re: Need help with code - grabbing width and height of an element.

Feb 18th, 2008

to grab element width & height use:
clientWidth clientHeight method on element it returns the viewable width/height of the content on the page, not including borders, margins, or scrollbars
or use

offsetWidth/offsetHeight -returns the width/height of the element, including borders and padding if any, but not margins

A computer lets you make more mistakes faster than any invention in human history - with the possible exceptions of handguns and tequila.
~Mitch Ratcliffe