Redesigning the DOM.

Tour with Focus

This provides a way to dim the page while leaving specified elements, defined in a separate json file, at full brightness. It works by playing with z-indexes, position relative and absolute, and a few other tricks. I used this technique to create the tour for new users of Vodpod.
View Source: JS · JSON · CSS

Start The Tour

Hovercard

• 
  

  Captain Chaos

  Caped Crusader

  He is the alter-ego of mild-mannered Victor Prinzim. Whenever Victor or any of his friends are being threatened, Victor is instantly compelled to don his satin cape and mask to become Captain Chaos.
  Read More »
• 
  

  Virgil Starkwell

  Bank Robber, Lover

  The regular cast and crew were stamped each day with a special ink that glowed under ultra-violet light so the guards could tell who was allowed to leave the prison grounds at the end of the day.
  Read More »
• 
  

  Robert Pollard

  Leg-Kicking Rock God

  He called the band, which involved dozens of revolving members, Guided By Voices. Using a loan, taken out from a local credit union, Guided By Voices released a number of self-financed releases.
  Read More »

For a few different projects I've needed a way to show additional information when a user hovered over a game image or user avatar. In my version the code determines how much space is available and is capable of displaying above or below, and the right or left, of the trigger.
View Source: JS · CSS

Lightbox

Lightbox provides a way to show dialogs to users and dims the rest of the screen.
View Source: JS · CSS

Show Lightbox

Slider

There are lots of existing javascript carousels but I wanted to build my own light version with as little code as possible. The panels accept any images or text and you can place multiple slider instances on the same page. Only requirement is to declare the height of the slider in the CSS.
View Source: JS · CSS