Archive for 2012

    jQuery My Fade Over Image

    jQuery My Fade Over Image

    This plugin create a fading effect for image on mouse over. In addition, you can select a color tone filter for your images. The tone is set for the images, when they are not hovered. When it is hovered, the color tong filter will be removed, so that there is a clear distinction between this selected image and other non-selected images. You do not need to prepare multiple sets of images, also you can change the color tone using javascript.

    jAnalytics : jQuery Add Google Analytics stats to your website

    jAnalytics : jQuery Add Google Analytics stats to your website

    With jAnalytics you can add Google analytics stats and event tracking to your website. It will automaticly add event tracking to your outbound, email and download links.

    Features:

    • Add google tracking code to your website
    • Optitional track email links
    • Optitional track outbound link clicks
    • Optitional track form submits
    • Optitional track download links from specific file extensions
    • Automaticly adds event tracking to the different links

    spriteOnHover (Sprite on Hover) – jQuery plugin

    spriteOnHover (Sprite on Hover) – jQuery plugin

    spriteOnHover (Sprite on Hover) is a lightweight jQuery plugin designed to animate your sprite sheets on hover (duh).The spriteOnHover plugin will autodetect how many frames your sprite has, based on the orientation parameter, but it’s crucial that every frame has the exactly same size as the others. For now, multi-line sprites are not supported.

    Makisu : jQuery CSS 3D Dropdown Menu concept

    Makisu : jQuery CSS 3D Dropdown Menu concept

    Makisu is an experimental jquery plugin for CSS 3D dropdown navigation menu supported for modern browsers like Chrome.

    jQuery Sticky Captions Concept with CSS3

    jQuery Sticky Captions Concept with CSS3

    When creating thumbnail grids, we usually want to show image captions on hover to provide more information about the item. Image captions are usually shown in a very specific part of the thumbnail, either on the top, the middle or the bottom. When adding captions to the bottom of a thumbnail it can happen that a thumbnail that is overflowing the viewport (i.e. is partly beyond the “fold”) is being hovered but the caption won’t be seen because it appears on the bottom part of the image that is not visible. The user would have to scroll the page in order to see the bottom of the item and eventually the caption.

    A small trick can solve that problem by simply making the caption “sticky”. This would mean that the caption will be visible not only at the bottom of every thumbnail but also in any place, sticking at the bottom of the page, if the thumbnail hovered is overflowing the current view.

    jQuery Smart Alert

    jQuery Smart Alert

    Smart Alert aims to replace standard dumb alert with fully configurable alternative, while maintaining its ease of use.

    Add-Shine : A Gradient background jQuery Plugin

    Add-Shine : A Gradient background jQuery Plugin

    Add Shine is a jQuery plugin that converts solid a background color into a gradient that simulates a subtle shine.

    Filter-me : jQuery plugin to filter images using canvas

    Filter-me : jQuery plugin to filter images using canvas

    jQuery filter.me is a jQuery dependant script that allows you to apply filters to images using Photoshop .acv Curves Adjustment files. jDataView is used to read the Photoshop file, from which we create a Monotonic Spline Curve representing its data. From this curve the new pixel RGB values can be calculated. These values are then applied using HTML5’s canvas element.

    Literally any Photoshop curves file can be applied to multiple images with ease. This is a great alternative to using something like PHP’s imagemagick to try and replicate similar filtering. It can sometimes be a little slow, especially in mobile browsers, but I’m sure this will improve as canvas becomes more mainstream.

    Fuel UX : Clean and lightweight UI controls

    Fuel UX : Clean and lightweight UI controls

    Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.

    SFX.js : Simple JavaScript audio wrapper for easy Sound Effects

    SFX.js : Simple JavaScript audio wrapper for easy Sound Effects

    Simple audio wrapper for easy sound effects on your website. SFX.js plays OGG files when browser supports them, and falls back to MP3 otherwise. OGG is prioritized because it is an open format with developer friendly licensing, unlike MP3… If a browser support for OGG files will be ubiquitous, I’d like to drop support for MP3 in SFX.js.

    SFX works in Chrome, Opera, Firefox, Safari (with issues), and IE9+ (haven’t tested other browsers). Supported file types are:

    • Chrome: OGG + MP3
    • Opera: OGG
    • Firefox: OGG
    • Safari: MP3
    • IE9: MP3