Tutorial Prevent Background Image Flickering in IE

by in , 0 

try {
 document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}

Tutorial Perform Function At Timed Intervals

by in , 0

Perform a function every one second:

function myFunction() {
   // do something
}

var int = setInterval(myFunction, 1000);

Cancel it:

clearInterval(int);

Pass variables when calling custom function:

setInterval(function(){ doMove(panelWidth, tooFar); }, delayLength);

Tutorial PageVisibility API

by in , 0 

<!DOCTYPE HTML>  
 <html>  
 <head>  
      <script type="text/javascript">  
           timer = 0;  
           function onLoad(){  
                document.addEventListener("visibilitychange",stateChanged);  
                document.addEventListener("webkitvisibilitychange", stateChanged);  
                document.addEventListener("msvisibilitychange", stateChanged);  
           }  
           function stateChanged(){  
                console.log(document.webkitVisibilityState);  
                if(document.hidden || document.webkitHidden || document.msHidden){  
                     //new tab or window minimized
                     timer = new Date().getTime();  
                }  
                else {  
                     alert('You were away for ' + (new Date().getTime()-timer)/1000+ ' seconds.')  
                }  
           }  
      </script>  
 </head>  
 <body >  
 </body>  
 </html>

Demo by Sagar Ganatra

Tutorial Namespaced Javascript Template

by in , 0

Self invoking anonymous function assigned to the yournamespacechoice global variable. Serves the effect of keeping all functions and variables private to this function. To expose a function or variable we must explictly return it at the bottom of the function. Remaps jQuery to $.

var yournamespacechoice = (function ($) {
   var publicfunction;

   function privatefunction() {
       // function only available within parent function
   }

   publicfunction = function publicfunction() {
       // public function available outside of this funtion
   };

   // Expose any functions that we need to access outside of this scope. Use yournamespacechoice.functionName() to call them.
   return {
       publicfunction: publicfunction
   };
}(window.$));

Tutorial Multiline String Variables in JavaScript

by in , 0

This works:

var htmlString = "<div>This is a string.</div>";

This fails:

var htmlSTring = "<div>
  This is a string.
</div>";

Sometimes this is desirable for readability.

Add backslashes to get it to work:

var htmlSTring = "<div>\
  This is a string.\
</div>";

Tutorial Move Cursor to End of Input

by in , 0

Where el is a reference to an input or textarea.

function moveCursorToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

Reference URL

Javascript Modern Event Handling

by in , 0 

<script type="text/javascript">
/**
 * Attach an event handler on a given Node taking care of Browsers Differences
 * @param {Object} node
 * @param {String} type
 * @param {Function} fn
 * @param {Boolean} capture
 */
function addEventHandler(node,type,fn , capture){
       if(typeof window.event !== "undefined"){
                /* Internet Explorer way */
               node.attachEvent( "on" + type, fn );
       } else {
               /* FF & Other Browsers */
               node.addEventListener( type, fn , capture );
       }
}


/* Example */
addEventHandler(window,"load",function(){
   alert("The page was loaded");
},true)
</script>
This is better than doing the traditional "window.onload" event, as it can attach multiple event handlers to a single event and they all get called.