WEBDOOD.COM

HTML5 CSS Tables

by webdood on Jul.13, 2011, under Software Development

Interesting post about HTML5 CSS Tables

Leave a Comment : more...

Javascript Array Sort By String Length

by webdood on Jul.08, 2011, under Arrays, Javascript

Had a need to sort an array of strings by length of each string in descending order.
Simple solution, really. Perhaps may come in handy at a later date.

  ////////////////////////////////////////////////////////////////////////////
  //
  // Array.sortByStringLength() - sorts an array of strings based on length
  // ==========================
  //
  ////////////////////////////////////////////////////////////////////////////
  Array.prototype.sortByStringLength = function() {
    return this.sort( byStringLength )
  }
  function byStringLength(a,b) {//Sort function used by Array.sortByStringLength
    var retVal = 0;
    if (a.length > b.length) { retVal = -1; }
    return retVal;
  }

Shannon Norrell

2 Comments more...

Determine if an Object is empty in Javascript

by webdood on Apr.22, 2011, under Javascript, Objects

There are times when you need to determine if an object actually contains anything.
Distinguishing {} from { foo:bar } cannot be done by checking for .length, as an Object does not provide that.

Therefore, the only way to determine if there is anything in the Object is to basically do a for-each loop on the Object itself. Now, depending on the Javascript library you are (probably) using, there will be lots of *stuff* inside the Object that was inherited from the prototype chain. Since we are looking for actual stuff, we utilize the rarely used hasOwnProperty method to determine if the *stuff* in the Object was inherited or actually a part of theObject itself.

Now, you could add this to the prototype of Object itself (for instance Object.prototype.isEmpty = function() { blah};, but I consider that bad practice as – particularly with the Object Object, from which every other type of *thing* in Javascript inherits, the prototype wil be added to all other types of Objects in Javascript as well (for instance String would then have an isEmpty method).

This is all fine and dandy if you want to “robustify” this to support all data types, but trust me, it’s much cleaner and nicer to the DOM
to do it the way I illustrate below.

////////////////////////////////////////////////////////////////////////////////
//
// objectIsEmpty( object) - determines if an Object is empty
// ======================
//   You could add this to the prototype chain of Object as .isEmpty(),
//   but that would be wasteful. Better to keep it as a standalone function
//
////////////////////////////////////////////////////////////////////////////////
function objectIsEmpty( oObject ) {
  var eachProperty = null;
  for (eachProperty in oObject) {
    if (oObject.hasOwnProperty(eachProperty)) {
      return false;
    }
  }
  return true;
}

Shannon Norrell

Leave a Comment more...

CSS3 Tooltip Trick using CSS3 :before psuedo element, content attribute and custom data attributes

by webdood on Mar.03, 2011, under CSS3, Software Development

I was looking for a way to make an HTMLElement’s title appear faster in a WebKit application.

Turns out there is a way to capture the “title” attribute of an element using the :before pseudo element and content property, store that value in a div that only appears onhover over the original element. The problem with this technique was that the actual “title” attribute would eventually display.

Therefore, I made use of another CSS3 feature called “custom data attributes” and, rather than storing the title of the element in the “title” attribute, I used “data-title” instead.

Here is a quick example:

<!DOCTYPE html>
<head>
  <style type="text/css">
    .sprocket { position:relative;width:50px;height:50px;background-color:red; }
    .sprocket:before { content:attr(data-title); display:none; }
    .sprocket:hover::before{ width:160px; display:block; border-radius:3px; background-color:#fffdc7; padding:5px; color:black; margin-top:40px; margin-left:20px; -webkit-box-shadow: 3px 3px 3px rgba(193,193,193,.5);}
    .sprocket:hover{ z-index:10; position:absolute; }
  </style>
</head>
<body>
  <div class="sprocket" data-title="Fancy Title Text">
</body>
</html>

Click here for an Example

Shannon Norrell

Leave a Comment :, , , more...

Canvas Progress Spinner

by webdood on Mar.01, 2011, under Some Examples

This dynamically-generated HTML5 Canvas Spinner will resize to it’s container. It is very clean, scales to any size and works against any background color. If you are one to use the typical “spinner” gif89a image, you will know that it does not work against colored backgrounds due to dithering issues around the edges of the blades within the image and there are only so many sizes available to “borrow” from the internet.

This HTML5 <CANVAS> tag-based spinner is scalable and works against ny background color:

Leave a Comment :, , , , more...

Javascript Array.remove and Array.indexOf methods

by webdood on Jan.01, 2011, under Javascript, Software Development

I kept finding myself needing to remove items from an array, so developed a quick helper (prototype) method attached to the Array Object to help.
////////////////////////////////////////////////////////////////////////////////
//
// Array.remove( object|string item) - removes an item from an array
//    Example x = ["abc","xyz",1,4]  x.remove("xyz") returns ["abc",1,4]
//    Presumably this will eventually be added to Javascript, but until that day...
////////////////////////////////////////////////////////////////////////////////
if (Array.prototype.remove===undefined) {
  Array.prototype.remove = function( item ) {
    var itemLocation = this.indexOf(item);
    if (itemLocation > -1) {
      this.splice(itemLocation,1);
    }
  }
}
////////////////////////////////////////////////////////////////////////////////
//
// Array.indexOf() - returns integer index where valueToSearchFor is in an Array
//   (believe it or not, not all browsers have this yet ... and it's 2010!
////////////////////////////////////////////////////////////////////////////////
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;
  };
}

Shannon Norrell

Leave a Comment :, , more...

Javascript Array Detection

by webdood on Oct.06, 2010, under Javascript, Software Development

Turns out the most reliable way to detect an Array is not to use the old standby:

return (typeof foo === ‘object’ && foo.constructor === Array)

but rather to do this:

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

I have to give credit to my friend Doug Crockford, for this.

I recommend his book Javascript: The Good Parts

shannon norrell

Leave a Comment :, , more...

Javascript: Flatten an array containing arrays

by webdood on Sep.08, 2010, under Javascript, Software Development

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;<tempFlatt.length;j++) {
        retVal.push( tempFlatt[j] );
      }
    }
  }
  return retVal;
}

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

alert(flatten(a));
</script>
2 Comments :, , more...

Detect Safari 3

by webdood on Aug.26, 2010, under Javascript, Safari-Specific, Software Development

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

Leave a Comment :, , more...

IE CSS backslash 9 hack beats the star hack

by webdood on Aug.23, 2010, under CSS, Software Development

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. I feel this to be quite a discovery.

Shannon Norrell

Leave a Comment :, , , , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...

  • A List Apart
  • Dive into HTML5
  • Javascript: The Good Parts
  • QuirksMode.org