FullPaged: A Single Paged Layout jQuery Plugin with UI Animations

FullPaged: A Single Paged Layout jQuery Plugin with UI Animations

Single page layouts are taking off in a big way. It seems as if every product page nowadays is single paged, so I thought I’d have a little spin at it with this jQuery plugin. This allows you to create single paged layouts with a few optional custom UI elements such as fold up menus.

I’ve tested this on most major platforms and browsers and it seems to work fine on all of them. The idea is simple, it lets you make a quick single page layout and gives you the option of some UI effects, such as disappearing pieces of image to reveal menus. I’ve also added some options to disable all that if it’s not for you. How does it work? Well let’s have a look.

Device.js : Write Device based conditional CSS and JavaScript

Device.js : Write Device based conditional CSS and JavaScript

Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).

jQuery Equalizer : Multi-row column resizer

jQuery Equalizer : Multi-row column resizer

Equalize column heights across multiple rows.

Features:

  • Equalize column heights across multiple rows.
  • Resize column heights when the page is resized. Can be disabled for fixed width layouts.
  • Choose between height (default), outer height or inner height.
  • Set a minimum or maximum height of a column, with an css class added when content overflows for additional styling.
  • Set a breakpoint to disable the Equalizer plugin when the wrapping element size is below a set width.

HTML5 Drag And Drop To Create A Shopping Cart

HTML5 Drag And Drop To Create A Shopping Cart

The release of HTML5 introduced native Drag and Drop functionality to modern web-browsers. This means it is now possible to have movable elements on screen without the aid of frameworks like jQuery. This week we’ll be taking advantage of the drag and drop functionality to create a basic shopping cart. The basic functionality we’ll cover, will be adding an item to the cart and if it already exists updating the quantity and totals.

jQuery Crystal Notifications

jQuery Crystal Notifications

Two main functions, Small Notifications that works like banners and a Notification Center that can be use as website control or sistem notification panel.

Features:

  • Touch Enabled
  • Responsiveness
  • Infinite options
  • Easy to set up
  • Callbacks
  • Properties to change
  • Can hold custom HTML
  • Retina Display ready

jQuery Gradient Picker Widget

jQuery Gradient Picker Widget

A jQuery plugin to allow you to add gradient choosers to your website.

  • The type of gradient (radial, linear) is configurable as well as the fill direction of the gradient.
  • Currently works in Webkit, Mozilla and Opera. Support for IE may be coming in a future version.
  • Control points can be added by clicking on the gradient preview
  • Control points may be removed by clicking the “x” on that control point’s color configuration
  • The colors of individual control points may be assigned

Animated Checkboxes and Radio Buttons with SVG

Animated Checkboxes and Radio Buttons with SVG

By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.

Check File Size Before Form Submit with Html5 & jQuery

Check File Size Before Form Submit with Html5 & jQuery

Checking the file size before submitting the form has always been like a forbidden fruit to us, that’s because there was no easy way to access clients’ file system, which can return the exact size of a file before sending it to the server. Old browsers have no inbuilt capability, and Javascript won’t do it, so normally people would use flash to calculate the file size in HTML upload forms, and most of us just preferred to skip the client part, letting server handle the problem.

But in recent years, the HTML5 is doing wonders for the web browsers. It comes with many features, including the client-side file objects manipulation (File API). Which means we can now throwaway the old methods, and adopt to this new system, which not only returns file properties, but it opens a whole new set of possibilities.

Scrolld.js : jQuery Unique Dynamic Page Scrolling

Scrolld.js : jQuery Unique Dynamic Page Scrolling

Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task. Scrolld.js is intended for easy use and is fully deployable within minutes.

ion.zoom : Image zoom lightbox jQuery plugin

jQuery lightbox plugin for image zoom

Image zoom lightbox jQuery plugin.

Description:

  • ion.zoom — easy image lightbox jQuery plugin for small galleries. Allow to zoom images at place.
  • Supports keyboard controls with ESC, LEFT and RIGHT button.
  • Supports multiple independently operating galleries in one page.
  • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Works on touch screen devices (iPhone, iPad, etc.).