Creating Swipeable Side Menu in jQuery

Creating Swipeable Side Menu in jQuery

Today, I will be sharing an experiment to replicate the behavior of the side menu, similar to what you’ve seen on smartphone applications, but this tutorial is for the web. I will take you through each step from structuring your layout and adding swipe gestures to open/close the menu, usable on both desktop and smartphones.

form2js : jQuery library for collecting form data

form2js : jQuery library for collecting form data

Convenient way to collect structured form data into JavaScript object. Because everything is better with jQuery, jQuery plugin added, check out jquery.toObject.js.

This is not a serialization library. Library used in example for JSON serialization is http://www.json.org/js.html Structure of resulting object defined by name attribute of form fields. See examples below. All this library doing is collecting form data and putting it in javascript object. Obviously you can get JSON/XML/etc string by serializing it, but it’s not an only purpose.

Nifty Modal Window Effects with CSS3 & JavaScript

Nifty Modal Window Effects with CSS3 & JavaScript

Today we want to share some ideas for modal window effects with you. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration.

The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation).

Simple Instagram VIDEO with jQuery & HTML5

Simple Instagram VIDEO with jQuery & HTML5

Simple Instagram Video is a premium Instagram plugin that uses the power of HTML5 Video to showcase the latest functionality of the Instagram API. We know you will love it as much as we do because we’ve designed it to be as beautiful as it is useful. Give it a try, have some fun, and share you moments with the world!

Features:

  • Superior Codebase - Built on our amazingly bulletproof framework
  • Responsive Design - Fully mobile-ready design adapts to any device.
  • Fullscreen Video - Enjoy your videos fully regardless of the device.
  • Advanced Video Thumbnail Gallery Mode - Share your best Instagram videos with our clean thumbnail gallery.
  • Premium Video Playlist Gallery Mode - Display your videos with our unique playlist style video player.
  • Popular Instagram Feed Mode - This feed mode pulls in the photos from the Instagram popular feed.
  • Tag Instagram Feed Mode - This feed mode allows you to specify a tag to search from the Instagram API.
  • User Instagram Feed Mode - This feed mode allows you to specify a user id to pull in photos from a specific user.
  • Multiuser Instagram Feed Mode - This feed mode allows you to specify multiple user id’s to pull in photos from specific users. Note, this feature does NOT allow load more functionality.
  • Liked Instagram Feed Mode - Display photos and videos that you’ve liked all accross the Instagram API.

jQuery totalstorage : Local Storage Plugin

jQuery totalstorage : Local Storage Plugin

A jQuery plugin to manage local storage and cookies simultaneously in a simple interface.

We found that HTML5 Local Storage gave us the best return in terms of reliability and speed. Internet Explorer compatibility? Not so much. So we wrote totalStorage, a jQuery plugin that combines the ease and usefulness of totalStorage with the universal compatibility of cookies (along with some helpful tools like automatic JSON encoding/decoding).

  • The browser doesn’t support local storage it will fall-back to cookies! (Using the wonderful $.cookie plugin).
  • Send it strings, numbers even complex object arrays! TotalStorage does not care. Your efforts to defeat it will prove futile.
  • Simple as shit. jStorage and some other very well-written plugins provide a bevy of options for expiration, security and so forth. Frequently this is more power than you need and vulnerable to confusion if you just want it to work (JWITW)

Mason : Creating a perfect grid with jQuery

Mason : Creating a perfect grid with jQuery

Mason.js is a jQuery plugin that allows you to create a perfect grid of elements.Mason was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges. Mason was made to fill those gaps in.

Built on the idea of true masonry when a grid is constructed there are bound to be holes, so Mason calculates where those holes are fills them in.

jQuery Age : Plugin that formats dates as human readable text

jQuery Age : Plugin that formats dates as human readable text

Age is a jQuery plugin that formats and tracks dates and times as human readable text.

jQuery Mobile Events

jQuery Mobile Events

A collection of mobile event plugins for jQuery.This is a series of plugins that create additional events that can be used in combination with jQuery when developing for mobile devices. The events are also compatible with desktop browsers to ensure ultimate compatibility for your projects. In time, we will update the Repository to include some very basic demos to get you started with using the events, but for now, we’ve put together a list of the events that are provided, and what they do.

As explained, the events are each triggered by native touch events, or alternatively by click events. The plugin automatically detects whether the user’s device is touch compatible, and will use the correct native events whenever required. It is hoped that these events will help to aid single-environment development with jQuery for mobile web app development.

Gridly : jQuery plugin to enable drag and drop & resizing on a grid

Gridly : jQuery plugin to enable drag and drop & resizing on a grid

Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the demo below try tapping or dragging any of the bricks.

HostSlide Hosting Plan & Pricing Slider in jQuery

HostSlide Hosting Plan & Pricing Slider in jQuery

This HostSlide hosting plan & pricing slider is the best widget for your website. It’s lightweight and the layout can be changed easily in the CSS file. It’s powered by javascript and is supported in all major browsers. It enables you to use a simple and fast slide to view plan features and prices. It’s ready to be added to your website to give a brand new user experience. Unlimited plans/pricing/options can be added in seconds.

Features:

  • Compatible with all major browsers
  • Lightweight
  • Fully customizable
  • SEO friendly
  • Add unlimited prices and plans
  • Add unlimited options (e.g. price, bandwidth, CPU, RAM, Disk Space)