Archive for 2013

    Pongstagr.am : jQuery plugin that display instagram photos to website

    Pongstagr.am : jQuery plugin that display instagram photos to website

    A jQuery plugin that lets you display instagram photos to your website. For the most part, Instagram’s API only requires the use of a client_id. A client_id simply associates your server, script, or program with a specific application. However, some requests require authentication – specifically requests made on behalf of a user. Authenticated requests require an access_token. These tokens are unique to a user and should be stored securely. Access tokens may expire at any time in the future.

    How to build a realtime jQuery plugin

    How to build a realtime jQuery plugin

    The jQuery realtime library is a first attempt at making it really easy for anybody to add realtime data to a web page by just adding markup to a page and using jQuery and a jQuery library.

    In this tutorial we’ll create a jQuery plugin that makes it really easy to add realtime content to a page by simply adding some markup. First, we’ll cover how to use a service called Pusher to subscribe to realtime data. Then we’ll define a way of marking up an HTML5 document with ‘data-*’ attributes in a way which can then be queried by our realtime jQuery plugin and converted to realtime data subscriptions. Finally, we’ll create the jQuery plugin which will use the attributes to subscribe to data and instantly display updates within the page.

    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.