Karl Steltenpohl

Recreating Firebug's Element Selection Effect

11/30/2011
Javascript and jQuery

While working on a project I was googling how firebug achieves its element selection effect. I found some examples but ended up creating my own. I experimented for a long time with different methods before writing my own, and this works the best and is the simplest that I've seen.

The css for the selection highlight class:


.hoverhighlight{
    /*outline:1px solid #2381d0;*/ /* You can use either an outline or a box-shadow */
    box-shadow:0 0 3px 3px #2381d0;
    -moz-shadow:0 0 3px 3px #2381d0;
    -webkit-box-shadow:0 0 3px 3px #2381d0;
}

This is a very simplified version of the code, but it works suprisingly well. It requires jquery. If the element you are hovering over has a parent with no overflow the outline/highlight may be obscured. There are ways around this issue, but not Im not covering it in this post.


$("body").on("mouseover", function(event){
    $(".hoverhighlight").removeClass("hoverhighlight");
    $(event.target).addClass("hoverhighlight");
});

Wow much simpler than you'd think! (IE won't work with box shadow.)

Rework

11/16/2011
Books

Last night I picked up a copy of REWORK written by Jason and David, the founders of 37signals. I tore through the first 100 pages in 20-30 minutes. I can already tell this is a great book and I strongly recommend it. I wouldn't say that REWORK is a wealth of information you don't, but need to know. Instead the book is one of those reads that articulate common sense ideas so well that it becomes exciting.

The REWORK book has been out for over a year, but I just caught wind of it from a CEO's reply on Sprouter.com. The catchy text on the back cover caught my eye. But the warning from Seth Godin on the cover to "ignore this book at your own peril" sold me.

Anyway just wanted to give props to the guys at 37signals for building great tools, writing a great book, and continuing to be a source of useful inspiration to those who consider themselves starters!

Lazy Karl v1 - The ultimate cross-browser lazy load plugin for images with jQuery

07/05/2011
Javascript and jQuery

Demo & Download LazyKarl v1

The lazyKarl jQuery plugin loads a webpage's images once they are within the user's viewport.This is a working cross-browser lazy load jQuery plugin. Other lazy load plugins have been less than effective because some major browsers load all of the images on a page when the DOM loads. jQuery plugins are usually not effective until the Dom is finished loading and only after all the images on the page have already loaded.

The Lazy Karl plugin works around this issue with a less than perfect approach, but none the less a functional one. By leaving the src attribute empty or out of the img tag completely, and placing the path to your image inside the rel attribute, images will never load until they are within the user's viewport at DOM ready and on scroll event. A perfect solution would utilize server side scripts like php, but lazyKarl works great for images.

Usage

Place the following code into the head of your document

The following code is an example of how to write the html. Just wrap the list of images you wish to load lazily with the element that you declared lazykarl on in the head.

Make sure that you place path from standard src tag value in the rel tag. This is important to how LazyKarl v1 works correctly across multiple browsers. You do not have add the src attribute to the image tag at all.