Shannon Norrell Webdood Tech

Thursday, March 3, 2011

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

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

Saturday, January 1, 2011

Array.remove method (also Array,indexOf

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]
//
////////////////////////////////////////////////////////////////////////////////
if (Array.prototype.remove===undefined) {       // Presumably this will eventually be added to Javascript
  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

Wednesday, October 6, 2010

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]";
}

Wednesday, September 8, 2010

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>

Thursday, August 26, 2010

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

Monday, August 23, 2010

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

Friday, June 4, 2010

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