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 tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Get position and size of Div in page

Last accessed pages

  1. Send E-mail with HTML tags and Attachment (2907)
  2. Node.js Move and Copy Directory (8422)
  3. Paint Bucket and Eyedropper (1286)
  4. Working with HTML attributes in PHP (8565)
  5. Validate radio and checkbox buttons (7516)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (455)
  2. Register and show online users and visitors (324)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (247)
  4. JavaScript Course - Free lessons (237)
  5. querySelector and querySelectorAll (224)