background preloader

jQuery Misc

Facebook Twitter

Color Swatches. Creating a Swipeable Side Menu for the Web. Tutorials 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. Note: This tutorial will require jQuery Library, so make sure you include the latest jQuery library to your HTML page before continuing. Creating a Swipeable Side Menu for the Web 1. Structure In the first step, we are laying out the structure for the left side menu that we will eventually hide to the left. 2.

Now, we hide the side menu to the left with position:relative and left: -240px (the number is equivalent to the width of the sidebar). I then simply move the whole container to the left by 240px making the left side menu appear. Now we have the basic side menu that can activated with a mouse click. 3. Conclusion And that’s it! jQuery Local Storage done right (and easy) | Upstatement. By jared • January 3, 2012 This year we worked on a cool project (launching mid-2012) to help users plan their finances and retirement. The site involved lots of calculators to capture user data and return estimates for their mortgage, Social Security benefit and other factors they would need to help them plan. We found that HTML5 Local Storage gave us the best return in terms of reliability and speed.

Internet Explorer compatibility? Not so much. It’s designed to work with the awesome $.cookie plugin for jQuery so that less-than-desirable-browsers (like Microsoft’s Internet Explorer web site viewing tool) can play without any special code on your end. This sets a value of 6000 to the key ‘high-score’ $.totalStorage('high-score', 6000); What to get the value of high-score? $.totalStorage('high-score'); What if it’s a complex array of objects? TotalStorage is a safe, family-friendly way of introducing local storage to your web-apps without fear or scummy build-up. Download from GitHub. Ksylvest/jquery-age. jQuery Steps. Overview 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 * And much more ... * The step position of each individual wizard will be saved into a cookie after a step change, add or remove if saveState is set to true .

Download License Copyright (c) 2013 Rafael J. jQuery On-Screen Keyboard Demo. Marcuswestin/store.js. Label.css - Label every thing! Blueprint: Horizontal Slide Out Menu. Dragend JS – a jQuery plugin for content swiping. MixItUp - A CSS3 and JQuery Filter & Sort Plugin. Michaek/jquery-socialButtons. Gridster.js. Gallery of free HTML snippets for Twitter Bootstrap. | Bootsnipp.com.

Typeahead.js. jQuery File Upload Demo. Bootpag - dynamic pagination jQuery plugin. Chardin.js. Simple Effects for Drop-Down Lists. Roundabout for jQuery by Fred LeBlanc. It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results. Roundabout requires jQuery (at least version 1.2, successfully tested through version 1.7.2). It works in all major modern browsers and even some of the older, not-so-modern ones. It’s open source and released under the BSD license, meaning that it’s free to use in your personal or commercial projects. See Roundabout In Action Add-Ons Roundabout is equipped to play nicely with a couple of other plugins if they’re made available. Roundabout Shapes by Fred LeBlanc Roundabout can move in more ways than just a turntable.

But That’s Not All! The list above is only a list of the plugins that have support baked in, but Roundabout will play nicely with many other plugins. Learn Support New in V2 The code is also a lot cleaner and better commented, which will hopefully allow you to get in there and tweak if you want to. to this: Usage. BookBlock: A Content Flip Plugin.

Sidr - A jQuery plugin for creating side menus. You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get started Like any other plugin, you must include it after the jQuery script. For a better performance load them at the bottom of your page or in an asynchronous way. You have to include a Sidr Theme stylesheet too, choose between the dark or the light one, or if you prefer create one by your own. Using bower or NPM Instead of downloading the plugin, you can install it with bower or with npm: bower install sidr --save From a CDN If you want to load the scripts from a CDN to save bandwith or improve the performance you can use jsDelivr.

Demos & Usage Here are described differents ways of usage for this plugin, you can read and adapt them to your website’s requeriments. The Simplest Usage Create a div called sidr and place your menu there. Cookbook. jQuery Timelinr ↩ CSSLab. Dando vida al tiempo / Giving life to time Selecciona tu idioma / Select your language: This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc. Last stable version: 0.9.6 Configuration: Include the jQuery library and this plugin: Inicialize-it with the default parameters: $(function(){ $().timelinr();}); Or configure it as preferred: HTML markup must be as follows: <div id="timeline"><ul id="dates"><li><a href="#">date1</a></li><li><a href="#">date2</a></li></ul><ul id="issues"><li id="date1"><p>Lorem ipsum.

Icon designed by Sebastián Cortés Changelog: Este sencillo plugin ayuda a que le des más vida y estilo a las aburridas líneas de tiempo. Última versión estable: 0.9.6 Configuración: Incluye la librería jQuery y luego este plugin: Inicialízalo con los parámetros por defecto: O customízalos: El marcado HTML debe ser de la siguiente forma: Cambios: Demo Horizontal. Jeromeetienne.github.com/jquery-qrcode/ Jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go on and off, or add latency while loading.

It is based on a library which build qrcode in various language. jquery.qrcode.js wraps it to make it easy to include in your own code. Show, dont tell, here is a example How to Use It Let me walk you thru it. Then create a DOM element which gonna contains the generated qrcode image. Then you add the qrcode in this container by jquery('#qrcode').qrcode("this plugin is great"); This is it. see it live. Conclusion jquery.qrcode.js is available on github here under MIT license. Turn.js: The page flip effect in HTML5.

qTip - The jQuery tooltip plugin - Home.