nerdcereal.com

I’ve invented a new HTML tag called the <ispan>. It behaves exactly like a <span>, it just won’t inherit any CSS that’s applied to a span.

At my job, our interactive advertising formats dynamically manipulate our publishers’ pages and add content. The trouble with this is that we have no idea the CSS that the publisher uses and our content can erroneously inherit some of the publishers’ styles. Moreover we can’t edit their CSS. The worse CSS rule I’ve come across is this: img {height:50px; width:50px;}

There’s two strategies to avoid this. 1) On every single tag you add to the document, you must set an inline style to override any possible inheritance. (There are at least 10+ common styles to account for.) 2) Make every element (except for images and iframes) an ispan element and odds are the publisher has no styles set for an ispan.

There are two catches: 1) You must create the <ispan> with the createElement method (you cannot use innerHTML or document.write). 2) I thought this was invincible to any CSS a crappy coder could create, but it’s still suceptible to any styles applied to the selector ‘*’.

So, if you’re dealing with javascript and unknown CSS, simply create your own tag. You can call it whatever you want: <whateveryouwant>

This neato magnifying glass widget (loupe.js) lets webmasters add some interactivity to an otherwise static image. Pictured here is a profile of Homer Simpson. Peering through the magnifying glass into his brain, Dr. Hibburt (or you) can see the thickness of Homer’s skull and the scarcity of his gray matter.

Loupe.js also lets you use the magnifying glass to zoom.

Note: only works in Firefox.

I just implemented this at work. It’s a really cool javascript class that’s used in the Wordpress admin panel (the fade feedback you get after editing a file’s code via admin).

It works by adding class="fade-#FFFF66" to any element on the page. Documentation can be found at http://www.axentric.com/aside/fat/. I’m surprised I didn’t know this before, but I also learned you can apply two classes to any one element by simply putting a space in between each class, like class="class1 class3".

I actually implemented it a little differently because I wanted the fade to be triggered by an event other than load. I called the fade_element method of the Fat class, like so: Fat.fade_element(id, fps, duration, from, to);

It should be self-explanatory, but id is the element’s id, fps is frames per second, duration is the time (in milliseconds), from is the beginning color and to is the final color of the element. Only the id is mandatory. Defaults for the rest of the arguments include 30 fps, 3 seconds (3000 milliseconds), from yellow (#FFFF33), and to the id’s orginal background color.

From a design standpoint, the fade is unique because it offers a compromise between and alert box and a printed message. Initially, there is a significant color change, on the page, but it slowly fades after your attention has been grabbed and is no longer needed. It’s quite similar to desktop email updates from Outlook and Gmail.

But really, this file is called Fade Anything because you can really fade anything on the page. It doesn’t just have to be used for alerts and messages. Use it to make an animated sunset on your page. Be creative.

I used prototype.js once before to do some AJAX, but it was so easy and I was in a hurry so I didn’t know exactly what it was doing. I was also unaware of everything else that it was capable.

This weekend I spent some time boning up on everything that prototype.js offers. It’s not exactly a standard (but most likely will be) so there’s not much documentation. The best documentation I could find was here.

It’s probably best known for its AJAX extensions due to its inclusion in 24ways.org but it also offers other much welcome shortcuts for javascript coders.