elmPosiz - Get position, size and visibility in viewport of HTML element

• top - top position of the element in page (in pixels).
• left - left position of the element in page (in pixels).
• width - element width (in pixels)
• height - element height (in pixels)
• listen - this property is used to pass a function that is executed every time these parameters are actualised; when window is resized or page scrolls.
• min_visible - you can use this property to set the minimum percentage that considers the element visible in viewport. Default 50.
• in_view - boolean value, true if the element is in viewport (according to min_visible value), or false.
• visibleX - a number with the current percentage of the element's width visible in viewport, on horizontal axis.
• visibleY - a number with the current percentage of the element's height visible in viewport, on vertical axis.
• win_h - browser window height.
• win_w - browser window width.

Usage

1. Include the "elmposiz.js" in your page, AFTER the HTML tags that you want to use with this script.

   <script src="elmposiz.js"></script>

2. Create an object instance with the elmPosiz() function, passing the CSS selector that represents the HTML element, usually an ID.

   <script>
   var ob_nm = new elmPosiz('#the_id');
   </script>
   

3. 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>
   <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);
   </script>
   

   - Another example. We set a function to the "listen" property to check when the Div is not 70% visible in viewport, and shows in console the visible percentage.

   <div id="dv1">Div content</div>
   <script src="elmposiz.js"></script>
   <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);
   }
   </script>