All posts in HTML5

ZoomBox 2 – The Photographer’s Premium Lightbox in jQuery & CSS3

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

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.

least.js : jQuery Responsive HTML 5, CSS3 Gallery with LazyLoad

least.js : jQuery Responsive HTML 5, CSS3 Gallery with LazyLoad

least.js is ajQuery plugin for Random & Responsive HTML 5, CSS3 Gallery with LazyLoad.

PathJS : Simple, lightweight routing for web browsers

PathJS : Simple, lightweight routing for web browsers

PathJS is a lightweight, client-side routing library that allows you to create “single page” applications using Hashbangs and/or HTML5 pushState.

Features:

  • Lightweight
  • Supports the HTML5 History API, the ‘onhashchange’ method, and graceful degredation
  • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
  • Well Tested (tests available in the ./tests directory)
  • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
  • Independant of all third party libraries, but plays nice with all of them

Responsive HTML5/jQuery Sign In/Registration Form

Responsive HTML5/jQuery Sign In/Registration Form

Responsive HTML5 Sign In / Registration form, with jQuery effects and CSS3 customization.

Features:

  • it is compatible with all major browsers (IE8, IE9, IE10, Chrome, Mozilla Firefox, Opera, Safari)
  • really easy to use and to integrate into your website
  • cool effects
  • html5 custom validation
  • responsive layout
  • really easy to modify (100% CSS customizable)

Bootstrap Maxlength : jQuery Html5 maximum length field Plugin

Bootstrap Maxlength : jQuery Html5 maximum length field Plugin

This plugin integrates by default with Twitter bootstrap using badges to display the maximum lenght of the field where the user is inserting text. Uses the HTML5 attribute “maxlength” to work.

The indicator badge show up on focusing on the element, and disappear when the focus is lost.

gury : jQuery inspired canvas utility library

gury : jQuery inspired canvas utility library

Gury (pronounced “jury”) is a simple to use utility library for drawing, animating, and managing HTML5 canvas tags. The goal is to support the HTML5 Canvas API with a framework that allows for faster/easier application development.

It was built with simplicity in mind and its usage was modeled in the image of jQuery. For instance you can initialize, style, and animate an entire scene in a single expression using chaining.

History.js : HTML5 History/State APIs with jQuery

History.js : HTML5 History/State APIs with jQuery

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.

MelonHTML5 – Metro UI in HTML5, CSS3 & jQuery

MelonHTML5 - Metro UI in HTML5, CSS3 & jQuery

Metro UI is a flexible and easy to integrate framework to build your one page website in Windows 8 Metro UI. It is fully powered by HTML5, CSS3 and JavaScript with plengy of options for you to configure it to suit your own needs.

Features:

  • Desktop and Mobile Device (Phone + Tablet) Ready
  • Resonsive UI Design
  • Old IE Support
  • Sliding Button Bar
  • One Page Application
  • Working with Browser Back button
  • Customizable Tiles
  • Smart Page Content Caching
  • Integration with Google Analytics
  • Object oriented JavaScript framework

Play Notification Sound using jQuery

Play Notification Sound using jQuery

I received lots tutorial requests from my readers that asked to me, how to play a notification sound on website chat?. We implemented this in a simple chat box application using Jquery and HTML5 audio tag, it is just five lines of code. Use Modernizer library for Internet Explorer HTML5 support, please turn on the volume and try this live demo.



Best jQuery websites design awards