JavaScript Helper Functions

PublishedSeptember 25, 2014 UpdatedFebruary 11, 2020

Various helper functions are included on this page. See DOM Helpers to look for document object helpers.

document height

Since browsers handle this calculation differently.

var _height = function() {
    var body = document.body,
        html = document.documentElement;

    // get using highest value    
    var height = Math.max(
        body.scrollHeight,
        html.scrollHeight,
        body.offsetHeight,
        html.offsetHeight,
        body.clientHeight,
        html.clientHeight
    );

    return height;
}

filename from path

// get the filename from a path without using regex
var _filename = function(path) {
    return path.split('/').pop();
}

find index by key value

// find index of an object in an array by key and value
var _findIndexOf = function(array, key, value) {
    var i;
    for(i = 0; i < array.length; i++) {
        if(array[i].hasOwnProperty(key) && array[i][key] === value) {
            return i;
        }
    }
    return -1;
}

iframe

//breakout of iframe / frame
function iframed() {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}
if(iframed()) window.top.location.reload(false);

path only, remove filename

// get the path only without using regex
var _path = function(path) {
    return path.substring(0, path.lastIndexOf('/') +1);
}

source

math

/**
 * round to decimal place
 *
 * @param num number to round
 * @param dec number of decimal places to round to
 */ 
function _round(num, dec) {
    return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
}

orientation change listener

Register an event handler by calling addListener() on the MediaQueryList object named query. The callback function will receive this object as an argument when triggered.

var query = window.matchMedia("(orientation:landscape)");
var toggle = function(query) {
    if (query.matches) {
        console.log('------- LANDSCAPE -------')
    } else {
        console.log('------- PORTRAIT -------')    
    }
}
query.addListener(toggle);

// remove as needed
query.removeListener(toggle);

More info: developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

resize handler

window.addEventListener("resize", resizeThrottler, false);

var resizeTimeout;
function resizeThrottler() {
    // wait for resizeHandler execution to complete
    if ( !resizeTimeout ) {
        resizeTimeout = setTimeout(function next() {
            resizeTimeout = null;
            resizeHandler();

            // resizeHandler executes at 15fps
        }, 66);
    }
}

function resizeHandler() {
    // handle the resize event
    console.log(window.innerWidth);
}

jQuery and/or lodash resize handler

validation

// validate external URL syntax 
var _isExternalURL = function(str) {
    var a  = document.createElement('a');
    a.href = str;

    if (!a.host || location.host == a.host)
    {
        return false;
    }
    return true;
}

JavaScript