Javascript Course

The JavaScript function presented in this page (named getBoxPS() ) can be used to get the top /left position and width /height sizes of Div in page, or other HTML elements.
The function receives the HTML element and returns an object with four properties: "x", "y" for the "Left" and "Top" position of that element, and "w", "h" for the "Width" and "Height" sizes (in pixels).
It works in all major browsers: Chrome, Firefox, IE, Opera, Safary.


Code of the function - click to select it

//JS function to get position and size of html element - https://coursesweb.net/javascript/
//receives the element; returns object: {x:left, y:top, w:width, h:height} in pixels
function getBoxPS(elm){
 function getOffset(object,offset){if(!object)return;offset.x+=object.offsetLeft;offset.y+=object.offsetTop;getOffset(object.offsetParent,offset);}
 function getScrolled(object,scrolled){if(!object)return;scrolled.x+=object.scrollLeft;scrolled.y+=object.scrollTop;if(object.tagName.toLowerCase()!='html')getScrolled(object.parentNode,scrolled);}
 function getZoomFactor(){var factor=1;if(document.body.getBoundingClientRect){var rect=document.body.getBoundingClientRect();var physicalW=rect.right-rect.left;var logicalW=document.body.offsetWidth;factor=Math.round((physicalW/logicalW)*100)/100;}
 return factor;}
 var re={x:0,y:0,w:0,h:0};if(elm.getBoundingClientRect){var rect=elm.getBoundingClientRect();var x=rect.left;var y=rect.top;var w=rect.right-rect.left;var h=rect.bottom-rect.top;if(navigator.appName.toLowerCase()=='microsoft internet explorer'){x-=document.documentElement.clientLeft;y-=document.documentElement.clientTop;var zoomFactor=getZoomFactor();if(zoomFactor!=1){x=Math.round(x/zoomFactor);y=Math.round(y/zoomFactor);w=Math.round(w/zoomFactor);h=Math.round(h/zoomFactor);}}
 re={x:Math.round(x),y:Math.round(y),w:Math.round(w),h:Math.round(h)};}
 else{var offset={x:0,y:0};getOffset(elm,offset);var scrolled={x:0,y:0};getScrolled(elm.parentNode,scrolled);var x=offset.x-scrolled.x;var y=offset.y-scrolled.y;var w=elm.offsetWidth;var h=elm.offsetHeight;re={x:Math.round(x),y:Math.round(y),w:Math.round(w),h:Math.round(h)};}
 return re;
}

- Example: Shows the position x/y and size w/h of the clicked Div.

<!doctype html>
<html>
<head>
<title>title</title>
<style>
#ex_dv1, #ex_dv2 {
display:inline-block;
font-size:22px;
padding:25px 15px;
margin:3px 3%;
text-align:center;
}
#ex_dv1 { background:#ffbb99; width:130px;}
#ex_dv2 { background:#99bbff; width:160px;}
</style>
</head>
<body>
<h4>Click on each Div</h4>

<p id='show_pos_size'>Here it displays data with position and size of the clicked Div.</p>
<div id='ex_dv1'>Div 1</div>
<div id='ex_dv2'>Div 2<br>Illusion</div>
<script>
//returns object with x,y position and w,h size of elm
function getBoxPS(elm){
 function getOffset(object,offset){if(!object)return;offset.x+=object.offsetLeft;offset.y+=object.offsetTop;getOffset(object.offsetParent,offset);}
 function getScrolled(object,scrolled){if(!object)return;scrolled.x+=object.scrollLeft;scrolled.y+=object.scrollTop;if(object.tagName.toLowerCase()!='html')getScrolled(object.parentNode,scrolled);}
 function getZoomFactor(){var factor=1;if(document.body.getBoundingClientRect){var rect=document.body.getBoundingClientRect();var physicalW=rect.right-rect.left;var logicalW=document.body.offsetWidth;factor=Math.round((physicalW/logicalW)*100)/100;}
 return factor;}
 var re={x:0,y:0,w:0,h:0};if(elm.getBoundingClientRect){var rect=elm.getBoundingClientRect();var x=rect.left;var y=rect.top;var w=rect.right-rect.left;var h=rect.bottom-rect.top;if(navigator.appName.toLowerCase()=='microsoft internet explorer'){x-=document.documentElement.clientLeft;y-=document.documentElement.clientTop;var zoomFactor=getZoomFactor();if(zoomFactor!=1){x=Math.round(x/zoomFactor);y=Math.round(y/zoomFactor);w=Math.round(w/zoomFactor);h=Math.round(h/zoomFactor);}}
 re={x:Math.round(x),y:Math.round(y),w:Math.round(w),h:Math.round(h)};}
 else{var offset={x:0,y:0};getOffset(elm,offset);var scrolled={x:0,y:0};getScrolled(elm.parentNode,scrolled);var x=offset.x-scrolled.x;var y=offset.y-scrolled.y;var w=elm.offsetWidth;var h=elm.offsetHeight;re={x:Math.round(x),y:Math.round(y),w:Math.round(w),h:Math.round(h)};}
 return re;
}

//where to show data with position and size
var show_pos_size = document.getElementById('show_pos_size');

//get #ex_dv1 and #ex_dv2
var ex_dv1 = document.getElementById('ex_dv1');
var ex_dv2 = document.getElementById('ex_dv2');

//registers click event on ex_dv1, ex_dv2
ex_dv1.addEventListener('click', function(e){
 var ob_ps = getBoxPS(e.target); //object with position/size data
 show_pos_size.innerHTML ='left: '+ ob_ps.x +' / top: '+ ob_ps.y +'<br>width: '+ ob_ps.w +' / height: '+ ob_ps.h;
});
ex_dv2.addEventListener('click', function(e){
 var ob_ps = getBoxPS(e.target); //object with position/size data
 show_pos_size.innerHTML ='left: '+ ob_ps.x +' / top: '+ ob_ps.y +'<br>width: '+ ob_ps.w +' / height: '+ ob_ps.h;
});
</script>
</body>
</html>
- Demo, click on the two Divs.

Here it adds data with position and size.

Div 1
Div 2
Illusion

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes an option from <select> selected?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Option 1</option>
 <option value="val2" selected="selected">Option 2</option>
</select>
What CSS value allows to create color gradients for background?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
What statement creates an array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicate the PHP function used to redirect to other page.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Get position and size of Div in page

Last accessed pages

  1. Volume and Surface Area Calculator for 3D objects (9107)
  2. Node.js Move and Copy file (20028)
  3. Check if table exists in database (6490)
  4. querySelector and querySelectorAll (17173)
  5. Paragraphs, Line break, Horizontal rule (2741)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (56)
  2. JavaScript Course - Free lessons (42)
  3. Read Excel file data in PHP - PhpExcelReader (38)
  4. HTML Course - Free Lessons (37)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (35)