jQuery Before/After Plugin

    jQuery Before/After Plugin

    New York Times online had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were.

    CatchMyFame found this very useful and immediately created Before/After jQuery Plugin for the same purpose. The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

    jQuery YouTube Popup Player Plugin

    jQuery YouTube Popup Player Plugin

    This is an easy to use jQuery Plugin to embed YouTube videos on your page by displaying them in a popup dialog box. I have used jQuery UI Dialog Widget as the popup container instead of reinventing the wheel. jQuery UI Dialog is a robust cross-browser mechanism to display a popup dialog box with title bar including a movable box with modal behavior.

    This is plugin is very simple to configure and use. YouTube Video Id can be stored in any attribute of the DOM element. This plugin keeps track of all the assigned popup events and won’t assign the click event if there already exists one, that way you can reassign the event for dynamically added HTML elements without affecting the existing ones.

    simpleWeather : How to display weather with jQuery

    simpleWeather : How to display weather with jQuery

    A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.In the demo shows how easy it is to display a simple weather widget that is clean and customizable. This is the basic usage showing only the current weather and an image. simpleWeather does not return any html or css classes which lets you do with the data as you please.

    jQuery Facebook Multi-Friend Selector Plugin

    jQuery Facebook Multi-Friend Selector Plugin

    I created a new jQuery pluging that works with the new Facebook javascript SDK to present a users list of friends and allows them to select the friends they would like to do X with. That “X” is up to you; once the user has selected their friends, you call a function on the plugin that returns an array of the friends Facebook Ids. A few key points:

    • client-side, no server-side PHP blah blah blah dependencies like some of the other alternative friends selectors
    • depends on jQuery and the new Facebook Javascript API
    • only requires several lines of code to drop-in

    Plax : jQuery powered parallaxing

    Plax : jQuery powered parallaxing

    Plax is a jQuery / Ender plugin that makes it suuuuuper easy to parallax elements in your site based on mouse position. You can see it implemented in many places throughout GitHub, including the 404 page, the 500 page, and the about page. I’ve also used a modified version to parallax a URL.

    JQVMap : jQuery Vector Maps

    JQVMap : jQuery Vector Maps

    JQVMap is a jQuery plugin that renders Vector Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.  Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

    This project is a heavily modified version of jVectorMap. I chose to start fresh rather than fork their project as my intentions were to take it in such a different direction that it would become incompatibale with the original source, rendering it near impossible to merge our projects together without extreme complications.

    jQuery Rockstar Map plugin

    jQuery Rockstar Map plugin

    Rockstar Map is a jQuery plugin for displaying an interactive map with locations, navigation and more. It’s perfect for any Contacts page and it’s super easy to setup and use. It has features like fullscreen mode, smooth animations, inertia, fluid width, touch gestures and a beautiful interface that is visible and reads well with any image in the background.

    Rockstar Map is designed with mobile devices in mind from the ground up! It’s fully responsive, the width dynamically changes when the viewport is resized (when the device goes in landscape mode), and it remains responsive in fullscreen mode as well.

    Finger gestures are also supported! The map is even more intuitive to use on a touchscreen device, because of that. Pinch to zoom, tap and move to navigate around – it’s all there.

    tablecloth.js : jQuery bootstrap to Style & Manipulate data tables

    tablecloth.js : jQuery bootstrap to Style & Manipulate data tables

    tablecloth.js is a jQuery plugin that helps you easily style HTML tables along with some simple customizations.Either you’re redesigning a large site or working on a completely new one… styling tables is typically tedious and time-consuming. If you’d rather spend your valuable time making the other elements of your site pretty, use tablecloth to do the heavy lifting

    jQuery floating menu

    jQuery floating menu

    A simple navigation menu that “follows” page scrolling and expands on mouse over, made with css and jquery.