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
Nasıl? Percentage Loader run loaderor download on BitBucket jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. Installation and use is quick and simple. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional), using vectors rather than images so can be easily deployed at various sizes. more examples Controllable It's also possible to use the percentage loader as a controller - try clicking and dragging on the widget. Multiple run loaders You can easily run multiple loaders simultaneously. back to top
jQuery PointPoint – A Plugin For Pointing To Things Martin Angelov Web designers find themselves in a tough situation – they have to build beautiful user interfaces that are intuitive and usable in the same time. Sometimes, despite our earnest efforts, web applications may become difficult to use for novice users. One solution is to create some sort of a tour of your application’s features. In this tutorial, we will be writing a jQuery plugin that will help you draw users’ attention to a specific part of the page, in the form of a small arrow that is displayed next to their mouse cursor. How it works Lets dive straight to the code – it comes at around 100 lines (with comments), so it is not difficult to follow. jquery.pointpoint.js When you call pointPoint(), it creates an event listener for the mousemove event. I am also using the transform.js CSS hooks for jQuery, which level the support for CSS3 rotations in browsers that support them (this means the plugin will not work in IE678). jQuery PointPoint Plugin How to use it We are done! jQuery
PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane Advertisement a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin Download PageSlide Now If you've ever used the mobile version of Facebook, or Path,then you've probably seen something akin to PageSlide in action. Clicking on a button or link slides the page over to reveal a hidden pane,one that usually contains secondary navigation, a form, or additional information. There are several ways to use PageSlide, some of which are shown below.Additionally, there is a responsive demo which shows how PageSlide can be used as a mobile solution. Slide to the right, and load content from a secondary page Slide to the left, and display hidden content from this page in a modal pane Modal This slide uses "modal" option set to "true". Where can I get it? If you are interested in learning more about PageSlide, it's recommended that you view the project on GitHub. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built.
Nasıl? jQuery Timelinr 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
Code a Fantastic Animated Circular Thumbnail Gallery With CSS Thumbnail galleries are a constant source of fascination for me. There’s so much more fun to be had than simply creating a grid of squares and calling it a day. Especially since CSS3 gives us so many powerful new tools to work with. Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Sneak Peek If you’re the kind of person who likes to skip to the end so you can see where you’re going, check out the live demo of the finished product below. Demo: Click here to launch. The Concept Before we get into building the thumbnail gallery, let’s talk a little bit about what we’re trying to achieve. When I was planning out how to accomplish this feat, I came across a bit of a snag. Background Image Pros The image will automatically be placed behind the textIt’s easy to clip the image to its parentAnimating the image is easy, just shift the background-position As you can see, there’s a strong argument for taking this route. HTML Image Cons
Adding a Timepicker to jQuery UI Datepicker Getting Started Highly Recommended Handling Time eBook Check out the Handling Time eBook to learn from the basic setup to advanced i18n usage, and from client's javascript to the server's database. eBook + Example code eBook Subscribe to Blog and Twitter Subscribe to my blog via email and follow @PracticalWeb on Twitter. Download Download Timepicker Addon Download/Contribute on GitHub (Need the entire repo? There is a small bit of required CSS (Download): Requirements You also need to include jQuery and jQuery UI with datepicker and slider wigits. jQuery jQueryUI (with datepicker and slider wigits) Timepicker Version Version 1.4.4 Last updated on 2014-03-29 jQuery Timepicker Addon is currently available for use in all personal or commercial projects under the MIT license. MIT License Formatting Your Time The default format is "HH:mm". Hour with no leading 0 (24 hour) Hour with leading 0 (24 hour) h Hour with no leading 0 (12 hour) hh Hour with leading 0 (12 hour) m Minute with no leading 0 mm s ss l c t tt z Examples
Website Tour with jQuery Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way. You might have noticed that Facebook used something like […] View demoDownload source Today we want to share a little script with you that allows to create a tour on a website with jQuery. You might have noticed that Facebook used something like this to explain the new features of the profile. The idea is to add a certain class to elements that you want to guide the user through and explain what they do. Another option that you can use is autoplay which will allow the user to simply sit back and watch every step without having to click on the next button. To use this, you simply have to add a certain class to an element that you want to describe in the walk-through. Now, we will configure the steps in a JSON object. By default, we will have autoplay disabled.
Lazy Load 1.7.0 Released PhotoPhoto Marise Caetano Previous version of Lazy Load gained traction pretty fast. Good patches were submitted to GitHub. This version of plugin mostly concentrates on speed optimization and event handlers. New Events Two new events were added. New Parameter New parameter data_attribute was added. Renamed Parameter Parameter effecspeed was renamed to effect_speed. Selectors Viewport selectors got tuned up. $("img:in-viewport").something(); $("img:below-the-fold").something(); $("img:above-the-top").something(); $("img:left-of-screen").something(); $("img:right-of-screen").something(); Download Latest source or minified. When asking a question please include an URL to example page where the problem occurs.
Ajax AutoComplete for jQuery About jQuery Autocomplete allows you to easily create autocomplete and autosuggest boxes for text input fields. Built with focus on performance - results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root. What's new $('#query').autocomplete(options) now returns an Autocomplete instance only for the first matched element. Autocomplete functionality can be disabled or enabled programmatically. var ac = $('#query').autocomplete(options); ac.disable(); ac.enable(); Options can be changed programmatically at any time, only options that are passed get set: If you need to pass additional parameters, you can set them via setOptions too: New parameters when initializing autocomplete. var reEscape = new RegExp('(\\' + ['/', ' Installation Include jQuery in your header. How to use Here is an Ajax Autocomplete sample for the text field with id "query"
Response JS: mobile-first progressive enhancement in HTML5. How to Code a jQuery Rolodex-Style Countdown Ticker Get the FlatPix UI Kit for only $7 - Learn More or Buy Now I’m sure many of you are familiar with how an office rolodex works. You have a series of cards with contact information which you can flip over to sort through alphabetically. These are most common in the office settings because businesses must to keep in touch with so many different people. Although the value is in translation into a web interface, we can still use this idea to create a really neat timer effect. More specifically I have seen a couple countdown widgets on landing pages. Selecting Graphics I am admittedly not an amazing Photoshop design guru. I really love this flip-clock countdown for both the gradients and textures. However I want to use dynamic HTML inside each div to update the counter. Core HTML Layout For this example we don’t need a whole bunch of confusing HTML markup. Inside a single block area we have three core sections. The last area contains the label text for each card. Detecting Clock Numbers