Javascript Array Detection

Turns out the most reliable way to detect an Array is not to use the old return (typeof foo === 'object' && foo.constructor === Array) but rather to do this:

function isArray(anArray) {
  return Object.prototype.toString.apply(anArray) === "[object Array]";
}

Flatten Array

This quick function takes a an array, whose elements may or may not be other arrays, and flattens it into a single array.

Extremely simple solution, but kind of fun because it's a chance to use recursion:

<script type=text/javascript>
var a = [1,2,[5,6,7], 8, [9,10,[11,12],13], 14];

function flatten( oArray ) {
var retVal = [];
for (var i=0;i<oArray.length;i++) {
if (!isArray( oArray[i]) ) {
retVal.push( oArray[i] );
} else {
var tempFlatt = flatten(oArray[i]);
for (var j=0;j<tempFlatt.length;j++) {
retVal.push( tempFlatt[j] );
}
}
}
return retVal;
}

function isArray( anElement ) {
return (typeof anElement=="object" && anElement.constructor == Array);
}

alert(flatten(a));
</script>

Javascript Detect for Safari 3

Today I needed a quick way to detect Safari3 for some specific markup tricks, so I wrote this function.
Thought it might be helpful to someone else.

<script type="text/javascript">
var isSafari3 = (function() {
  var retval = false;
  if (navigator.vendor && navigator.vendor.indexOf('Apple') > -1) {
    var index=navigator.appVersion.indexOf('Version');
    if (index > -1) {
      retval = (parseInt(navigator.appVersion.substring(index+8))==3);
    }
  }
  return retval;
})();
alert(isSafari3);
</script>

Shannon Norrell

IE CSS Hack

Most folks know about the so-called "star hack" for IE.

However, there are two other varieties of IE-only hacks that are perhaps a bit more useful.

All of these work, in some form or another for IE. I tested them all in various flavors to arrive at my favorite (sic).

You can set up a test harness yourself using this code to see for yourself.

  <style type=text/css>
  body { 
    background-color:red;
    _background-color:blue;
    *background-color:green;
    background-color:yellow\9;
  }
  </style>

• _ hack WORKS for: IE8 Quirks, IE7 Quirks, IE6


• _ hack DOES NOT WORK for: IE8 IE8 Standards, IE8 IE7 Standards, IE7 IE7 Standards


• * hack works for: IE8 Quirks, IE8 IE7 Standards, IE7 Quirks, IE7 IE7 Standards, IE6


• * hack DOES NOT WORK for: IE8 IE8 Standards


• \9 hack WORKS for: IE8 IE8 Standards, IE8 IE7 Standards, IE8 Quirks mode, IE7 Quirks, IE7 Standards (all varieties of IE8), IE6

So, in short, if you want an IE CSS hack that works in all flavors of IE, use the backslash-nine hack. That is, just put a \9 after *whatever* css value you are assigning.

Examples
width: 9px\9;
background-color:yellow\9;

etc.

Good luck.

Shannon Norrell

HTML5 Demos on Apple.com

The HTML5 demos I worked on for Apple are now live!

http://www.apple.com/html5/

http://developer.apple.com/safaridemos/

Most of the demos use my DHTML slider and all use my library.js file

Shannon Norrell

EnsureMinimumNumberOfRows

Here I present a useful function called "EnsureMinimumNumberOfRows".

This function operates on a table and effectively clones the last row in the table a given number of times to ensure that a minimum number of rows exist within the table. it does not clone the contetns of the cells, but rather the nodes themselves and their classnames (by way of cloneNode(false).

////////////////////////////////////////////////////////////////////////////////
// EnsureMinimumNumberOfRows(element, params) - ensures a table will have a minimum
// ==========================================   number of visible rows.   
// Supported params are:  
//  numberOfRows - gives the minimum number of rows that will appear 
//  rowHeight - height, in pixels for added rows
// *NOTE: Does not support empty tables 
////////////////////////////////////////////////////////////////////////////////
function EnsureMinimumNumberOfRows(element, params) { 
  var minimumNumberOfRows  = params.numberOfRows || 10,        // default minimumNumberOfRows is 10
      rowHeight            = params.rowHeight    || 30,        // default rowHeight (for new rows) is 30px
      oTable = $(element).select('div.resultList table')[0],   // Get the first element as $(element).select returns an array 
      numberOfRowsToInsert = minimumNumberOfRows - oTable.rows.length + 1;
 
  if (numberOfRowsToInsert > 0) {
 var clonedRow   = oTable.rows[ oTable.rows.length - 1 ]
     clonedCells = clonedRow.getElementsByTagName('td');
 for (var i=0;i<numberOfRowsToInsert;i++) {  
      var oRow = document.createElement("TR");
      for (j=0;j<clonedCells.length;j++) {
     var oCell = clonedCells[j].cloneNode(false);
     oCell.style.height = rowHeight + "px";  
     oCell.appendChild( document.createTextNode("\u00a0") );
     oRow.appendChild(oCell);
      }
      oTable.appendChild( oRow );  
 }
  }
}

Shannon Norrell


Now posted on GitHub

addClassName and removeClassName

Useful CSS Class handling functions.

Here I present addClassName, hasClass and removeClassName and also my old implementation of Array.indexOf. Since this is built into JS these days, you probably won't need it.

addClassName and removeClassName are useful functions because you can pass in space separated classNames and it will add/remove them all.

////////////////////////////////////////////////////////////////////////////////
//
// addClassName([object|string] oHTMLElement, string classNameToAdd)
//           Adds classNameToAdd to an HTMLElement. Guaranteed not to add the same className twice.
//           classNameToAdd can be a space separated list of classNames.
//           You can pass in the id to an object or the actual object
//
////////////////////////////////////////////////////////////////////////////////
function addClassName(oHTMLElement, classNameToAdd) {
  if (typeof(oHTMLElement)=="string")  { oHTMLElement = document.getElementById(oHTMLElement); }
  if (oHTMLElement) {
    var theClassName = oHTMLElement.className;
    if (theClassName && (theClassName.length > 0)) {  // If oHTMLElement already has a class name, some more work is needed
      var classNamesToAdd = classNameToAdd.split(" ");
      if (classNamesToAdd.length===1 && ((" " + theClassName + " ").lastIndexOf(" " + classNameToAdd + " ") === -1) ) { // If we only have one className to potentially add, take the "less work" approach
        oHTMLElement.className = oHTMLElement.className + " " + classNameToAdd;
      } else {
        var theClassNames = theClassName.split(" "),
            iEnd = classNamesToAdd.length,
            aClassName,
            theClassNamesToAddArray = [];
        for (var i=0;i<iEnd;i++) {
          aClassName = classNamesToAdd[i];
          if (theClassNames.indexOf(aClassName)===-1) {
            theClassNamesToAddArray.push( aClassName );
          }
        }
        oHTMLElement.className = oHTMLElement.className + " " + ((theClassNamesToAddArray.length > 1) ? theClassNamesToAddArray.join(" ") : theClassNamesToAddArray[0]);
      }
    } else {
      oHTMLElement.className = classNameToAdd;        // If oHTMLElement did not already have a class name, just add it
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
//
// hasClassName([object|string] oHTMLElement, string classNameOfInterest)
//           Returns a boolean value of if an HTMLElement has the className of interest
//           You can pass in the id to an object or the actual object
//
////////////////////////////////////////////////////////////////////////////////
function hasClassName(oHTMLElement, classNameOfInterest) {
  return ((" " + oHTMLElement.className + " ").lastIndexOf(" " + classNameOfInterest + " ") > -1);
}
////////////////////////////////////////////////////////////////////////////////
//
// removeClassName([object|string] oHTMLElement, string classNameToRemove)
//           Removes classNameToRemove from an HTMLElement, if it exists.
//           classNameToRemove can be a space separated list of classNames.
//           You can pass in the id to oHTMLElement or the actual object
//
////////////////////////////////////////////////////////////////////////////////
function removeClassName(oHTMLElement, classNameToRemove) {
  if (typeof(oHTMLElement)=="string")  { oHTMLElement = document.getElementById(oHTMLElement); }
  if (oHTMLElement) {
    var theClassName = oHTMLElement.className;
    if (theClassName && (theClassName.length > 0)) {
      var theClassNameArray = theClassName.split(" "),
          classNamesToRemove = classNameToRemove.split(" "),
          iEnd = theClassNameArray.length,
          aClassName,
          theNewClassNameArray = [];
      for (var i=0;i<iEnd;i++) {
        aClassName = theClassNameArray[i];
        if (classNamesToRemove.indexOf(aClassName)===-1) {
          theNewClassNameArray.push( aClassName );
        }
      }
      switch (true) {
        case (theNewClassNameArray.length>1) :
          oHTMLElement.className = theNewClassNameArray.join(" ");
          break;
        case (theNewClassNameArray.length==1) :
          oHTMLElement.className = theNewClassNameArray[0];
          break;
        case (theNewClassNameArray.length==0) :
          oHTMLElement.className = "";
          break;
      }
    }
  }
}
////////////////////////////////////////////////////////////////////////////////
//
// Array.indexOf() - returns integer index where valueToSearchFor is in an Array
//
////////////////////////////////////////////////////////////////////////////////
if (Array.prototype.indexOf===undefined) {
  Array.prototype.indexOf = function( valueToSearchFor ) {
    var iEnd = this.length;
    var retVal = -1;
    for (var i=0;i<iEnd; i++) {
      if (this[i] == valueToSearchFor) {
        retVal = i;
        break;
      }
    }
    return retVal;
  };
}

by Shannon Norrell

showOrHide algorithm

Making it easier for me to look up my own most useful block of code for displaying/hiding elements. This is the same bit of code I wrote for Microsoft that shipped with Vista and now Windows 7 with the Sidebar gadgets.

////////////////////////////////////////////////////////////////////////////////
//
// showOrHide([object|string] oHTMLElement, boolean bShowOrHide)
//           Shows or Hides an HTMLElement.
//           You can pass in the id to an object or the actual object
//
////////////////////////////////////////////////////////////////////////////////
function showOrHide(oHTMLElement, bShowOrHide) {
  try   {
    if (typeof(oHTMLElement)=="string")  {
      oHTMLElement = document.getElementById(oHTMLElement);
    }
    if (oHTMLElement && oHTMLElement.style) {
      if (bShowOrHide == 'inherit') {
        oHTMLElement.style.visibility = 'inherit';
      } else {
        if (bShowOrHide) {
          if (oHTMLElement.nodeName == 'TR') {
            oHTMLElement.style.visibility = 'inline-table';
          } else {
            oHTMLElement.style.visibility = 'visible';
          }
        } else {
          oHTMLElement.style.visibility = 'hidden';
        }
        try {
          if (bShowOrHide) {
            oHTMLElement.style.display = 'block';
          } else {
            oHTMLElement.style.display = 'none';
          }
        }
        catch (ex) {
        }
      }
    }
  }
  catch (ex) {
  }
}

Shannon Norrell


Now on GitHub