Makes everything ajaxify with flexible URL routing powered by html5 history API.JQuery.LazyJaxDavis brings the power of history.pushState to static websites.This changes all location changes to dynamic – ajax based.
Best jQuery HTML5 Plugins & Tutorials with Demo
Controlling History: the HTML5 History API with jQuery
Today we’re going to look at a way to keep a sense of consistency on your website by maintaining the state of some elements even when the user navigates through history. We’re effectively going to create history-inactive areas which remain in the same state while the rest of the document is navigable.
This technique effectively allows ‘selective’ loading of elements. Effectively, if the user clicks a link or presses the back button, instead of loading the whole page (most of which stays constant, like script and stylesheets), we will only load the stuff that changes, i.e. the content. By doing this we save load times There are two main reasons why you would want to only load certain elements when your user uses the back and forward button to navigate through history. This cuts out all the unnecessaries and creates a faster web experience.
Create a Minimal Coming Soon Page using HTML5 and CSS3
In this tutorial we are going to create a Coming Soon page using HTML5 and CSS3 with a minimalist style and light colors. We will use the minimal Coming Soon page designed in Photoshop by Stelian a few days ago. For the countdown timer we will use jQuery and the jQuery countdown plugin from tutorialzine.com. Of course we will customize it a bit to match our design.
Interactive Particles Slideshow with Html5 & JavaScript
This is an experimental interactive slideshow component with math shapes and texts using Html5 Canvas. The slideshow consists of pairs of shape and text, both made out of particles that the user can interact with and that transition into the next pair when navigating. With Canvas we can dynamically draw 2D stuff using JavaScript and this experiment shows some of the possibilities.
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.
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 Steps : A powerful jQuery wizard plugin
jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. Check out the demos and get a first-hand impression!
Features:
- HTML5 and Accessability support
- Async (AJAX) content loading
- Form validation made easy
- Embedded iframe content
- Cool transition effects
- Keyboard navigation
- Simple Step Manipulation
- Multiple wizards in one page
- Easy Navigation
- State Persistence *
ZoomBox 2 – The Photographer’s Premium Lightbox in jQuery & CSS3
ZoomBox 2 – The Photographer’s Lightbox ! What makes ZoomBox unique to the other lightbox scripts ? In short – quality, user-friendliness, design and social media connectivity. Take a look at the demos and be convinced.
Features:
- HTML5 technology – this gallery uses the latest html5 tehniques ( like Histroy API ) to deliver a never seen before experience to your clients
- fully responsive – looks great from mobile to HD
- touch optimized – touch devices are not forgotten
- two skins – two full skins to fit every brand
- CSS3 technology – this player uses cutting-edge css3 definitions
- Retina-ready – graphics have double resolution for smooth retina viewing
- easy install – purchase, download the zip, read the docs
- iPhone / iPad optimized – this gallery has been optimized for Apple touch devices
- Android optimized – this component has been tested on Android 4.0 and works awesome
- truly social – Zoombox 2 is truly social. It features the Facebook Like widget and Facebook Chat so your fans can comment on your art. And because deeplinking is done right in ZoomBox 2, each photo has it’s own likes and comments, even if on the same page. Wow!
iMapper : jQuery/HTML5/CSS3 Image Mapper
iMapper – jQuery/HTML5/CSS3 Image Mapper is a simple, yet powerful plugin that lets you select an image of your choice and pin stuff on it. It offers several embedded pins which offer special functionality, as well as the ability to import your own pins with the basic functionality. It is very intuitive and easy to use, and it will take but moments to set up your image with pins and customize the content connected to each of these pins.
iMapper is a perfect solution if you want to make your contact page a bit more dynamic. It will fit perfectly no matter what your profession is. It can easily be adapted to a health image mapper, product image mapper, contact image mapper etc.
