Using jQuery we can easily sort a list of html elements alphabetically. In the following tutorial I will give 2 examples – sorting an unordered list and sorting a table.Using jQuery we then append each item row to the unordered list to rebuild in the correct order.
Animating Colored Ajax Comments with jQuery
There are plenty of social networking websites today where you can find dynamic Ajax-based comments. This system is more usable because you don’t need to refresh the page every time you post something new. However setting up a whole database for user comments from scratch can be difficult.
In this tutorial I want to look at using jQuery just for animating custom comments. The form will submit each post anonymously and won’t save anything to a local database. The effects are only for show – but you can easily adopt the dynamic code into a system such as WordPress, vBulletin, Joomla!, or even your own custom backend.
Notification bubble with CSS3 keyframe animation & jQuery
I had to emphasize somehow a dynamic notification bubble. Basically, every time the notification value changes, a visual effect was needed in order to get user’s attention. So I made that using CSS3 keyframe animation.I think this is a simple and practical example on how to use a CSS3 animation to enhance user experience. Further, you can experiment with the bezier curve values and come up with some other cool effects.
jqBootstrapValidation : jQuery validation plugin for bootstrap forms
A JQuery validation framework for bootstrap forms.jqBootstrapValidation will scan for HTML5 validator attributes directly on the elements, plus any extra options specified via data attributes. By default, it will also sniff for native HTML5 form validation attributes, as detailed above.
If you decide this isn’t what you want, you can restrict jqBootstrapValidation to only data attributes by setting sniffHtml to false when calling it on your form elements.
Expo360º : 360º Product Viewer in jQuery
With Expo360° you take showcasing products on your website to the next level. Your customer not only gets a better look and feel of the product that you are presenting, it also is a cool feature on your website that will blow everyone away!.Opposite to existing 360° viewers available online, this viewer doesn’t use Flash and offers great interaction on mobile devices such as iPad and iPhone. What makes it even more unique is the extensive set of configurations possible. It allows you to create a look and feel that will match your online presence perfectly.
Features :
- Easy 360° views of your products;
- Easily change the width and height of the viewer;
- Loads external images;
- 100+ XML configurations;
- Add hotspots to show details;
- Custom grabhand cursor;
- Smart zoom functionality with mousewheel support;
- Optional zoom navigation window;
- Use as a fancy zoom/pan viewer with a single image.
wScratchPad : HTML5 jQuery Scratch Pad Plugin
The Websanova Scratch Pad is a unique one of a kind plugin that allows you to add a scratching effect to images something similar to scratching a lottery ticket. It is written using canvas so you would need an HTML5 compliant browser to use it but it does support a fallback to display a message to upgrade to a newer browser if the browser does not have canvas support. What’s really cool is that it keeps track of the percentage of area scratched so that you can trigger a callback once a user scratches a certain amount of the surface area.
scale9grid : jQuery Plugin for Scaling Background Images Using a Grid
This plugin adds support for scaling background images using a 9-grid. Developers can specify a grid for selected elements which causes the background-image to be scaled selectively, depending on what part of the grid the background lies. Parts of the background which lie in the corners of the grid will not be scaled and parts in the sides of the grid will only be scaled in one direction.
Features:
- No more slicing up images into multiple files
- No more tedious styling and structural markup for the same effect
- Achieve rounded corners
- Achieve drop shadows
- Complex fluid backgrounds
Autogrow Textarea Plugin Version 2.0
Today, I am glad to announce a new version of the Autogrow Textarea plugin. It automatically resizes your textarea; before you had an algorithm that calculated the correct width according to your font-size and cols settings. Now, the plugin does it automatically. Big time saver.
It automatically sets the correct CSS attributes; before the user had to enter this manually in the CSS file. Now it’s done by the plugin.The plugin is fired when the page loads; a lot of users requested this feature. When you load a page with data already entered in the textarea, the latter will automatically resize itself.The plugin fires on more events; the plugin used to be fired when the user was typing. Now it does more than that.It no more pollutes the global namespace; if you’re not familiar with these terms, let’s just say the code will not conflict with other Javascripts.