elmPosiz is a JS script that gets some useful data of a HTML element in page, like: top and left position, width and height size, and percentage visible in viewport.
So, this script can be used to check if a Div, image or other html element is in viewport, also, to get its top/left position and size.
It works on tablets, mobile and desktop devices; in all major browsers: Chrome, Mozilla Firefox, Internet Explorer, Opera, Safary.

• To download the script, click on this link: Download elmPosiz (5 KB)

Script code - click on the code to select it

//JavaScript code to get some parameters of a html element in page - https://coursesweb.net/javascript/
// slc = CSS selector that represents the element
function elmPosiz(slc){
  var me = this;
  var elm = document.querySelector(slc); //element represented by slc
  me.win_w, me.win_h; //window width and height
  me.top, me.left, me.width, me.height; //position and size of elm
  me.min_visible =50; //minimum percentage for elm visible in viewport
  me.in_view; //true if elm in viewport; else false
  me.visibleX; //percentage of elm width visible in viewport, on X axis
  me.visibleY; //percentage of elm height visible in viewport, on Y axis
  me.listen; //for function executed on window resize and scrolling page

  //sets window size {w:width, h:height}
  var winSize = function(){
    var re ={};
      re.h = self.innerHeight;
      re.w = self.innerWidth;
    } else if(document.documentElement && document.documentElement.clientHeight){
      re.h = document.documentElement.clientHeight;
      re.w = document.documentElement.Width;
    } else if(document.body){
      re.h = document.body.clientHeight;
      re.w = document.body.clientWidth;
    me.win_w=re.w; me.win_h=re.h;

  //sets position and size of elm: {x:left, y:top, w:width, h:height}
  function posSize(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);}}
    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)};}
    me.top=re.y; me.left=re.x; me.width=re.w; me.height=re.h;

  //sets the visibleX property; the visible percent of elm width in viewport
  var getVisibleX = function(){
    if(me.left >=0) var re = Math.max(0, Math.min(100, (me.win_w - me.left)*100/me.width));
    else var re = Math.max(0, Math.min(100, (me.width + me.left)*100/me.width));
    me.visibleX = re.toFixed(2);

  //sets the visibleY property; the visible percent of elm height in viewport
  var getVisibleY = function(){
    if(me.top >=0) var re = Math.max(0, Math.min(100, (me.win_h - me.top)*100/me.height));
    else var re = Math.max(0, Math.min(100, (me.height + me.top)*100/me.height));
    me.visibleY = re.toFixed(2);

  //sets the in_view property - true if elm is in viewport with minimum percentage; else false
  var setInView = function(elm){
    me.in_view = (me.visibleY >=me.min_visible && me.visibleX >=me.min_visible) ?true :false;

  //calls functions that set properties
  function construct(){
    if(typeof me.listen=='function') me.listen();


    // when Resize browser, re-set properties
    window.addEventListener('resize', construct);

    // when scrolling page, re-set properties
    window.addEventListener('scroll', construct);

    //execute listen after 250 miliseconds if it is a function
    window.setTimeout(function(){ if(typeof me.listen=='function') me.listen();}, 250);
The JavaScript object created with elmPosiz() has these properties:
- These parameters are actualised every time the window is resized or the page scrolls, so you can detect when an element is entering or exits viewport.


  1. Copy the script code and save it into a JS file named "elmposiz.js", or download it from the link above.
  2. Include the script in your page, AFTER the HTML tags that you want to use with this script.
    <script src="elmposiz.js"></script>
  3. Create an object instance with the elmPosiz() function, passing the CSS selector that represents the HTML element, usually an ID.
    var ob_nm = new elmPosiz('#the_id');
  4. Now you can use the "ob_nm" object properties, presented above.
    - Here is a simple example:
    <div id="dv1">Div content</div>
    <script src="elmposiz.js"></script>
    //create object with the elmPosiz() for #dv1
    var ob_dv1 = new elmPosiz('#dv1');
    //check if #dv1 is minimum 50% visible in viewport
    //shows an alert message with top/left position
    var dv1_vi = ob_dv1.in_view ?'Visible in viewport' :'Not 50% visible in viewport';
    alert('Top: '+ob_dv1.top+' / Left: '+ob_dv1.left+'\n'+dv1_vi);
    - Another example. We set a function to the "listen" property to check when the Div exits viewport, and shows in console the visible percentage.
    <div id="dv1">Div content</div>
    <script src="elmposiz.js"></script>
    //create object with the elmPosiz() for #dv1
    var ob_dv1 = new elmPosiz('#dv1');
    //change minimum percentage to 70% for #dv1 to be considered visible in viewport
    ob_dv1.min_visible = 70;
    //set a function to the listen property to check #dv1 visibility in viewport,
    //and shows in console the visible percentage
    ob_dv1.listen = function(){
      if(!ob_dv1.in_view) console.log('Elm not 70% in viewport, visible: ', ob_dv1.visibleY);
Example with an image:
<div class="apare">
<img src='image.jpg' alt='image' id='ex_im1'/>
<div id="im1_data">Here it displays data with: position, size, visible percentage in viewport</div>
<script src="elmposiz.js"></script>
//function to be passed to "listen" property; adds data in #im1_data
function showElmdata(){
  im1_data.innerHTML ='Visible in Viewport: '+ob_im1.visibleY+' %<br>Top: '+ob_im1.top+'<br>Left: '+ob_im1.left+'<br>Width: '+ob_im1.width+'<br>Height: '+ob_im1.height;

// object of html where data will be displayed
var im1_data = document.getElementById('im1_data');

//create object with the elmPosiz() for #dv1
var ob_im1 = new elmPosiz('#ex_im1');

//add showElmdata to listen property, executed when the page scrolls or window resizes
ob_im1.listen = showElmdata;
- Demo, scroll the page or resize the window. Notice the parameters of this image in page.
image in viewport
Here it displays data with: position, size, visible percentage in viewport

Daily Test with Code Example

Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
elmPosiz - Get position, size and visibility in viewport of HTML element

Last accessed pages

  1. MySQL Query Builder: Database Pagination (528)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (21106)
  3. Get the Height and Width of web Page and browser Window (2113)
  4. Register and show online users and visitors (33649)
  5. Fotorama Image Gallery (4133)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (320)
  2. Register and show online users and visitors (213)
  3. Node.js Move and Copy file (173)
  4. Read Excel file data in PHP - PhpExcelReader (159)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (155)