Posts Tagged ‘unobtrusive’

Appending Style Nodes with Javascript

Appending Style Nodes with Javascript

In Javascript it often makes sense to attach a stylesheet rather than style a bunch of individual attributes. Appending a stylesheet to the DOM has a number of advantages:

  • Stylesheets can be easier to work with than Javascript—it’s just more natural to use CSS syntax for styling.
  • It’s nice to avoid the cross-browser headaches associated with Javascript styling. Compare CSS’s simple float: left to Javascript’s style.styleFloat = ‘left’ and style.cssFloat = ‘left’.
  • Appending a stylesheet is better for performance when styling 15 or more elements.
  • CSS allows you to leverage pseudo-classes and define styles with the simple a:hover selector instead of both onmouseover and onmouseout event listeners.

There are a couple ways to append a stylesheet. Although it’s usually best to attach an external stylesheet, there are times when you need to build a stylesheet on the fly with Javascript. Let’s walk through the code we’ll need to append … Read more…


YouTubin’ Plugin for jQuery

YouTubin’ Plugin for jQuery

YouTubin’ is a jQuery plugin that makes embedding YouTube videos clean, easy and unobtrusive. In its simplest form, YouTubin’ grabs any links that point to a YouTube page and replaces them with an embedded video. To do so, YouTubin’ leverages SwfObject 2 if available, but otherwise just embeds the video through standard markup.

Advanced options include flagging specific video elements using a jQuery selector and setting a variety of swf properties such as dimensions, flash version, flashvars and params. Youtubin’ can even be used to cause the video to embed once a link is clicked rather than when the page loads.

Download YouTubin’ jQuery Plugin


Contact-Pop: Contact Form Overlays with a Simple jQuery Plugin

Contact-Pop jQuery Plugin

Contact-Pop is a jQuery plugin that makes contact forms with grayed out overlays incredibly easy. The basic script grabs any links that point to your contact page and flags them for the Contact-Pop popup. When these links are clicked, Contact-Pop grays out the page and pulls in the contact form using AJAX. That means that with just a few lines of code, you can convert your site to use Contact-Pop’s form and overlay rather than your current contact page.

While there are a lot of options for producing grayed out overlays in jQuery, Contact-Pop provides a more robust and specialized solution for in-page contact forms. The main advantage is ease of use: simply flag any links to your current contact page by href or jQuery selector, and ContactPop does the rest. Combining this simplicity with a plethora of customizable options, Contact-Pop is a useful plugin for … Read more…


Flipbook Movies with jQuery

Flipbook plugin for jQuery

Flipbook is a jQuery plugin that produces a movie effect by running images in quick succession. The concept is similar to something I always did in middle school: doodling in the margins of my notebooks to make short movies. Times have changed and nowadays I use a Javascript object, pulling the images dynamically with jQuery’s AJAX function and a PHP script ;) . But don’t worry, it’s just as easy to use as a real flipbook.

The jQuery Flipbook Plugin is built around my jQuery slideshow tutorial. It’s very flexible, providing great options for both new and seasoned developers alike. You can easily make anything from a short film to an image slideshow to a text viewer.


jQuery Video Game Remake: T&C Surf

T&C Surf Designs

When I was seven, my all-time favorite video game was T&C Surf Designs for the 8-bit Nintendo® (NES). Feeling nostalgic this weekend, I developed a version of this old school game using jQuery and Javascript.

Up and Down to move, Left and Right to skate faster or slower, Spacebar to jump

After playing Javascript Mario Kart, I’ve been wanting to develop a classic video game with jQuery. T&C seemed like a good fit because its motion and overall simplicity are ideal for jQuery’s animation library (and it’s really fun).

I’m fairly pleased with the performance, which is vastly improved through the use of cell-based collision detection. Instead of having to check for collision every pixel, it can be checked every 32, with huge processing savings. Additionally, the use of CSS sprites greatly reduces the number of HTTP requests and the need to use … Read more…