Archive for 2012

    CoolCarousels : Showcasing 50+ cool jQuery carousel examples

    CoolCarousels : Showcasing 50+ cool jQuery carousel examples

    All carousels on this website are created for your inspiration, using only the jQuery-library and the jQuery.carouFredSel-plugin.They have been tested to work on FireFox and Chrome.

    Paper.js : Swiss Army Knife of Vector Graphics Scripting

    Paper.js : Swiss Army Knife of Vector Graphics Scripting

    Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

    Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users.

    jQuery Responsive & Multi-Level Navigation

    jQuery Responsive & Multi-Level Navigation

    If you’ve ever worked on a responsive website, you’ve no doubt had to tackle one of the trickiest problems in this emerging field: navigation. For simple navigation, the solutions can be straight-forward. However, if you’re working on something a bit more complex, maybe with multiple nested lists and dropdowns, a more dramatic rearrangement may be in order.

    In this approach to responsive navigation, we’re going to use an approach that can accommodate large, multi-level navigation menus using media queries and jQuery, whilst trying to keep our markup simple and our external resources minimal.

    jQuery-Timing : Timing & Loops Made Easier

    jQuery-Timing : Timing & Loops Made Easier

     

    jQuery-timing provides easy-to-use methods to define iterations, timeouts, intervals, Deferreds, and event-based loops and handlers just in line with all your jQuery stuff. jquery-timing is designed to change the way that you use jQuery.

     

    JackBox : jQuery Responsive Lightbox

    JackBox : jQuery Responsive Lightbox

    JackBox is a Responsive Lightbox with Real Social Sharing.

    Features:

    • Responsive / Mobile Ready
    • Retina Ready Graphics
    • Share any item through Twitter, Facebook, Pinterest and Google+
    • Deep-linking, every item has it’s own unique link
    • Touch Swipe for Mobile Devices
    • Genuine Fullscreen for Firefox and Chrome
    • Group any items together and create item categories
    • Youtube Video w/ Mobile Fallback
    • Vimeo Video w/ Mobile Fallback
    • Automatic Youtube and Vimeo thumbnail loading
    • HTML5 Video w/ Flash backup
    • HTML5 Audio w/ Flash backup
    • Flash Video w/ Mobile Backup
    • Load HTML Divs, iFrames and Google Maps
    • A boatload of Custom Thumbnail Hovers and Tooltips
    • CSS3 Preloader for smoother animation

    Facebook Style Slide Out Menu in jQuery Mobile

    Facebook Style Slide Out Menu in jQuery Mobile

    I wanted to recreate the slide out menu in the Facebook iPhone app. I also wanted implement it in a jQuery mobile layout. This is what I came up with.

    Vertical Showcase Slider with jQuery and CSS Transitions

    Vertical Showcase Slider with jQuery and CSS Transitions

    In this tutorial we will create a very simplistic and responsive product slider for an online store or a portfolio. The idea is to have different sections in a fullscreen view: the image or preview, a navigation and the description. When navigating through the items, we will slide the preview section and the section with the description in opposite directions. The idea for this kind of “opposite” transition comes from the beautiful website of the National LGBT Museum which moves the left and right side in the same manner when navigating or scrolling the page.

    UIKit – modern ui components for the modern web

    UIKit - modern ui components for the modern web

    UIKit is a small (4kb minified / gzipped) collection of flexible, cohesive, decoupled components for the modern web. With an emphasis on structure-only styling making it simple to apply application specific styling. UIKit is not a replacement for larger UI frameworks, nor is it a CSS framework such as Bootstrap.

    jqueryrotate : jQuery plugin that rotate images by any angle

    jQuery Rotate Plugin

    This is a small plugin for jQuery that adds a nice feature to rotate images (img html objects) by a given angle on web pages. This is a simple plugin to allow you to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions. Main focus is to unify this behavior across different browsers.

    GreyBox : Smart Window in JavaScript

    GreyBox : Smart Window in JavaScript

    GreyBox can be used to display websites, images and other content in a beautiful way.We can use it in Showing external pages,AJAX uploading of files,Showing internal pages (login, user preference, properties, contact formulas etc.),Showing a video or a flash animation,Showing images,Showing product information,Admin sections.

    Why use GreyBox:

    • It does not conflict with pop-up blockers
    • It’s only 22 KB!
    • It’s super easy to setup
    • It’s super easy to use
    • You can easily alter the style as it is controlled through CSS