QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back. The flip effect is similar to the UI animation on the iPhone

Download QuickFlip 2 for jQuery

Read the QuickFlip documentation

QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.

It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. However if you want a smoother option with … 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


Scrolling Parallax: A jQuery Plugin

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.

Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page.

The Scrolling Parallax plugin is also very versatile. There are a wide variety of options including scrolling faster, slower, looping and reversing the animation and tiling the … Read more…


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…


A million ways to embed custom fonts (and keep typography nerds off your back)

Custom font embedding

It’s time for developers to stop complaining about web typography. Custom font embedding has been around for years, and it has finally gotten to the point that typography nerds can be equally happy with the fonts on a website as they are with the Photoshop comps. Many of the things that were a total pain to support previously have become a piece of cake. Leading, kerning, and all the major typography buzzwords have been handled for some time. Even drop shadows and Photoshop-style font rasterization options such as ‘strong’ and ‘crisp’ are now fully supportable.

So let’s make sure that we don’t become dinosaur developers, and get up on these modern methods of custom font embedding.

In this article we‚Äôll cover all types of font embedding, from older image replacement methods to embedding fonts with Flash, as well as native browser methods and even full Javascript … Read more…


10 Javascript Resources – From Noob to Pro

10 Best Javascript Resources

When I started developing I was fortunate enough to have an experienced friend who pointed me to all the right articles, websites, etc. The right tools make all the difference and this educational jumpstart was exactly what I needed to hit the ground running.

Now that I’ve gathered a good deal of Javascript knowledge and used a wide variety of Javascript resources, I’d like to share these so that others can experience the same benefit I did. And don’t stop reading if you already know Javascript inside and out: there’s resources here for all skill levels, from noob to pro.

1. Mozilla Developer Center

The Mozilla Development Center should be your starting point for all things Javascript.

Beginners should start with the Core Javascript Guide. Javascript can be a really confusing language at first and going through each of these pages will make you comfortable with Javascript’s peculiar syntax … 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.


Translate-It: Easy Translation for Multiple Languages

Translate-It translation plugin

Translate-It is a free tool that makes multi-language translation easy to implement on any website. With just a few lines of Javascript you can quickly include up to 34 languages of internationalization on your site.

Download Translate-It.

The web is a global community with rapidly growing international markets. Translation allows sites to reach broader audiences, and tools like Google Translate and Yahoo’s Babelfish have made the web more accessible. While accessing these translation tools is often too cumbersome for your site’s visitors, leveraging these tools is relatively simple for developers.

(more…)


QuickFlip jQuery Plugin

Quickflip Plugin for jQuery

QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it‚Äôs not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over (more…)


normalurl.com: Free URL Redirection

normalurl.com: Free URL Redirection

There’s nothing worse than those long, ugly URLs with twenty variables in the query string. In recent years there have been a number of websites offering a free service where users can create shorter links to these complex URLs. While a short URL is great, the links provided by most of these sites are computer generated and impossible to remember.

This weekend I programmed a simple tool to allow users to create their own links and normalize ugly URLs called normalurl.com. Just like other URL rewriting services, this website is completely free and allows anonymous users to easily create new URL redirects. However this … (more…)