In the tutorial today you will learn how you can use jQuery to get the distance of the mouse from a certain element on the page. This bit of code can be useful on a small web app which has a lot of user interaction and you want an event to run when the user mouse is in a certain distance from an element.There is a demo page for this code, which has a label to show the distance in pixels and an element which we will take the center position for.
Auto-populating Select Boxes using jQuery & AJAX
If you are familiar with using select boxes for categorisation and sub-categories, such as ebay does when selling an item, usually this can require a lot of JavaScript to maintain the select boxes, but jQuery can hugely simplify this task by adding a dash of AJAX.Allow the user to select a top level category from one select box and to automatically populate the sub-category.
Styling Buttons and Toolbars with the jQuery UI CSS Framework
By popular demand: coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.
jQuery UI CSS framework which provides a set of semantic classes that can be applied across a wide range of UI widgets. The framework works by stacking multiple classes on an element, some generic to the framework and others that are custom to each widget.
Bacon : jQuery Wrap Text around a bezier curve
Bacon is a jQuery plugin that allows you to wrap text around a bezier curve or a line. You can view a demo with a conveniently placed slice of juicy, delicious bacon below. It’s easier than you might think. You’ll need a block element containing text only that has its height and width set, as well as jQuery, bacon.jquery.js and bacon.jquery.css included in your site.
Metro JS : jQuery Metro interfaces on the web
Metro JS is a JavaScript plugin for jQuery developed to easily enable Metro interfaces on the web . This release focuses on Live Tiles, the Application Bar and Theming. It’s early in the development phase, but all features should work on at least IE7+(Win/WinPhone), Firefox, Chrome, Android, Opera, and Safari(OSX/iOS).
Features
- Full “future proof” hardware acceleration for browsers that support it now and those that will in the future
- Uses Modenizr if already available or built in capability checking via the same methods if not
- Slide tiles that stop at an arbitrary number of points to reveal the tile behind it (e.g. Me tile, or the animated clouds on the projects page)
- Flip tiles that flip between two static containers
- Flip tiles that assign new images at random or sequentially from an array of images
- Lists of tiles that can flip between static containers
- Lists of tiles that assign images with adjustable levels of randomness for mosaics and other unique content presentations
Camera : A free jQuery slideshow With Touch Support
The developer of Diapo has created a fresh plugin named Camera which has more features and works very well with responsive layouts.
Slides can be created with any HTML elements (images, text, videos, etc.) and Camera displays them with a good looking interface+ a set of transitions.Items can be browsed with prev-next buttons or bullet navigation, a play/pause option exists and a loader informs the user about the timing of the next slide.
The plugin can be skinned via CSS and there are already multiple skins provided.It has options for almost everything, all aspects of the interface + functionality can be customized and callbacks exist on every level.
Create A Dead Simple Twitter Feed with jQuery
In this tutorial, we will be creating a jQuery script that retrieve twitter tweets from user account. It’s quick and easy, come with link, hash tag, alias parser as well as time posted (calculated relatively). Most importantly, everything has a class and will be flexible to style and match your design!
jQuery-Switch : A slide/toggle switch for jQuery
jQuery/Switch is an iOS-inspired slide/toggle widget. It began as an alternative switch for jQuery Mobile, but it also targets desktop browsers as well.jQuery/Switch builds from <select> elements which contain two <option> elements relating to the “on” and “off” states respectively. These can be in any order, but the first <option> will by default be assumed to relate to the “on” state (this can be overridden).
jQuery.listScroller : A jQuery image slider
Make a list of items scrolls in a circle is a simple task. A bit of CSS, a few dozen lines of code. But as a web developer, I have to keep writing this over and over again and I couldn’t find a flexible enough plugin for me. So I wrote up this plugin so web developers/designers can quickly create an list of item with previous and next button to scroll through the list in circle. You can also set an interval so the list will scroll automatically.
TouchSwipe : A jQuery plugin for Touch devices
TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.
Features :
- Detects swipes in 4 directions, “up”, “down”, “left” and “right”
- Supports single finger or double finger touch events
- Supports click events both on the touchSwipe object and its child objects
- Definable threshold to determin when a gesture is actually a swipe
- Events triggered for swipe “start”,”move”,”end” and “cancel”
- End event can be triggered either on touch release, or as soon as threshold is met
- Allows swiping and page scrolling