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
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Get position and size of Div in page

Last accessed pages

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (58454)
  2. AJAX with POST and PHP (17420)
  3. SHA256 Encrypt hash in JavaScript (24453)
  4. Get and Modify content of an Iframe (28323)
  5. Read Excel file data in PHP - PhpExcelReader (90422)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (161)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (98)
  3. SHA1 Encrypt data in JavaScript (77)
  4. Read Excel file data in PHP - PhpExcelReader (73)
  5. Create simple Website with PHP (69)