Skip to content

Instantly share code, notes, and snippets.

@jsnanigans

jsnanigans/custom.fn.js

Last active March 24, 2016 08:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jsnanigans/b19295d0a72d689e0cb6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jsnanigans/b19295d0a72d689e0cb6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jsnanigans revised this gist Mar 24, 2016. 1 changed file with 23 additions and 23 deletions.
    46 changes: 23 additions & 23 deletions custom.fn.js
    View file
    Original file line number Diff line number Diff line change
    @@ -133,26 +133,26 @@ window.requestAnimFrame = (function(){
    // 60fps with the setTimeout fallback.


    function elementInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
    }

    return {
    'inview': (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
    ),
    'offTop': (top + (height/2)) < (window.pageYOffset),
    'offBottom': (top + (height/2)) > (window.pageYOffset + window.innerHeight)
    };
    }
    function isElementInViewport(el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
    }

    var rect = el.getBoundingClientRect();

    var isTotallyVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );

    return {
    'visible': isTotallyVisible,
    'top': rect.top,
    'bottom': rect.bottom,
    'height': Math.round(rect.bottom - rect.top)
    };
    }
  2. jsnanigans revised this gist Mar 24, 2016. 1 changed file with 26 additions and 1 deletion.
    27 changes: 26 additions & 1 deletion custom.fn.js
    View file
    Original file line number Diff line number Diff line change
    @@ -130,4 +130,29 @@ window.requestAnimFrame = (function(){
    render();
    })();
    // place the rAF *before* the render() to assure as close to
    // 60fps with the setTimeout fallback.
    // 60fps with the setTimeout fallback.


    function elementInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
    }

    return {
    'inview': (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
    ),
    'offTop': (top + (height/2)) < (window.pageYOffset),
    'offBottom': (top + (height/2)) > (window.pageYOffset + window.innerHeight)
    };
    }
  3. jsnanigans revised this gist Mar 22, 2016. 1 changed file with 23 additions and 1 deletion.
    24 changes: 23 additions & 1 deletion custom.fn.js
    View file
    Original file line number Diff line number Diff line change
    @@ -108,4 +108,26 @@ var sheet = (function() {
    })();

    // Usage
    // sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
    // sheet.insertRule("header { float: left; opacity: 0.8; }", 1);


    // shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
    };
    })();


    // usage:
    // instead of setInterval(render, 16) ....

    (function animloop(){
    requestAnimFrame(animloop);
    render();
    })();
    // place the rAF *before* the render() to assure as close to
    // 60fps with the setTimeout fallback.
  4. jsnanigans revised this gist Mar 16, 2016. 2 changed files with 111 additions and 20 deletions.
    20 changes: 0 additions & 20 deletions custom.fn
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +0,0 @@
    function debounce(func, wait, immediate) {
    var timeout;
    return function() {
    var context = this, args = arguments;
    var later = function() {
    timeout = null;
    if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
    };
    };

    // Usage
    //var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
    //}, 250);
    //window.addEventListener('resize', myEfficientFn);
    111 changes: 111 additions & 0 deletions custom.fn.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,111 @@
    function debounce(func, wait, immediate) {
    var timeout;
    return function() {
    var context = this, args = arguments;
    var later = function() {
    timeout = null;
    if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
    };
    };

    // Usage
    // var myEfficientFn = debounce(function() {
    // // All the taxing stuff you do
    // }, 250);
    // window.addEventListener('resize', myEfficientFn);


    function poll(fn, callback, errback, timeout, interval) {
    var endTime = Number(new Date()) + (timeout || 2000);
    interval = interval || 100;

    (function p() {
    // If the condition is met, we're done!
    if(fn()) {
    callback();
    }
    // If the condition isn't met but the timeout hasn't elapsed, go again
    else if (Number(new Date()) < endTime) {
    setTimeout(p, interval);
    }
    // Didn't match and too much time, reject!
    else {
    errback(new Error('timed out for ' + fn + ': ' + arguments));
    }
    })();
    }

    // Usage: ensure element is visible
    // poll(
    // function() {
    // return document.getElementById('lightbox').offsetWidth > 0;
    // },
    // function() {
    // // Done, success callback
    // },
    // function() {
    // // Error, failure callback
    // }
    // );

    function once(fn, context) {
    var result;

    return function() {
    if(fn) {
    result = fn.apply(context || this, arguments);
    fn = null;
    }

    return result;
    };
    }

    // Usage
    // var canOnlyFireOnce = once(function() {
    // console.log('Fired!');
    // });

    // canOnlyFireOnce(); // "Fired!"
    // canOnlyFireOnce(); // nada


    var getAbsoluteUrl = (function() {
    var a;

    return function(url) {
    if(!a) a = document.createElement('a');
    a.href = url;

    return a.href;
    };
    })();

    // Usage
    // getAbsoluteUrl('/something'); // https://davidwalsh.name/something


    var sheet = (function() {
    // Create the <style> tag
    var style = document.createElement('style');

    // Add a media (and/or media query) here if you'd like!
    // style.setAttribute('media', 'screen')
    // style.setAttribute('media', 'only screen and (max-width : 1024px)')

    // WebKit hack :(
    style.appendChild(document.createTextNode(''));

    // Add the <style> element to the page
    document.head.appendChild(style);

    return style.sheet;
    })();

    // Usage
    // sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
  5. jsnanigans created this gist Mar 16, 2016.
    20 changes: 20 additions & 0 deletions custom.fn
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    function debounce(func, wait, immediate) {
    var timeout;
    return function() {
    var context = this, args = arguments;
    var later = function() {
    timeout = null;
    if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
    };
    };

    // Usage
    //var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
    //}, 250);
    //window.addEventListener('resize', myEfficientFn);