Member Avatar for allsenseless

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.

<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>
  • 2 Contributors
  • 1 Reply
  • 107 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by DangerDev
Member Avatar for DangerDev

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.