Vanilla JavaScript to get basic webpage document information

I recommend old school vanilla JS when you just want the bare minimum information and light load for developing popup screens etc. The below code I sometime use to get document info the old dirty way without having to load a heavy JavaScript library.

The getDocInfo function collects all the variable document information and returns it as a object. You can then use it as you wish over and over again.

function getDocInfo(){
    var doc = {};
    var body = window.document.body;
    var document = window.document;
    var w = window.innerWidth || document.documentElement.clientWidth || body.clientWidth;
    var h = window.innerHeight || document.documentElement.clientHeight || body.clientHeight;
    doc.clientHeight = h;
    doc.clientWidth = w;
    doc.scrollTop = document.scrollingElement.scrollTop || 0;
    doc.scrollLeft = document.scrollingElement.scrollLeft || 0;
    doc.docHeight = body.clientHeight;
    doc.docWidth = body.clientWidth;
    doc.scrollYBarWidth = (doc.clientWidth - doc.docWidth);
    return doc;
}

For example, calling the function and listing information based on window document events like onload or onscroll. 

window.onload = function(){
    console.log(getDocInfo());
}
window.onscroll = function(){
    console.log(getDocInfo().scrollTop);
}
window.onresize = function(){
    console.log(getDocInfo().clientWidth);
}


Comments

Post a Comment

Popular posts from this blog

Build 6 is here

Enjoy! Many improvements: error handling.... slow loading connection discovery and handling due to packet loss, due to ISP backbone problems etc  https://github.com/zavistmedia/jpmpopup/blob/main/pop6.js http://www.jpmalloy.com Please report any problem in comments.
Read more

An example of chaining jQuery Ajax request callbacks

Chaining is a great way to separate your Ajax request callbacks' code and run multiple commands/functions on one element in a row. The fail callback function is a must for finding out if anything goes wrong with the HTTP request. I recommend the below code for alerting your user of anything going wrong with a request. You can have the error posted to any notification system you have. For demo purposes, I am using the vanilla alert function. As a bonus, I have added comments to the code for explanation. $.ajax({     // request information goes here }).done(function(data,textStatus,jqXHR){     // handling of successful requests goes here      // please note this will not fire if there is a failed request, use the always chain for that }).fail(function(jqXHR, exception) {     // handling of bad requests goes here     if (jqXHR.status === 0) {         alert('Could not connect to the s...
Read more

Creating hashtag hyperlinks on the fly for your website

In this post I am going to show you how to take any string of text containing hashtags and convert them into clickable URLs, AKA "hyperlinks". Okay, to get started we will first need some text containing hashtags. $text = 'You can find #programming help at my #blog.'; Now we will use the following regular expression pattern to find all hashed words in the string. $pattern = "/\#([A-Za-z0-9_-]*)/is"; It's important to note, that with this pattern, if you include anything inside the brackets, like a period after the 9, it will find the period with the word. With this pattern we can pass it into the PHP preg_replace_callback function. The callback function will return our matches found and replace all hashtags with clickable URLs. $text = preg_replace_callback($pattern,      function($matches){           $nohash = str_ireplace('#','',$matches[0]);           return '<a href="?tag='.$nohash.'" target="_self"...
Read more