Making more and more appealing and interactive user interfaces have been one of the never ending competitions between web designers since html and browsers where in the mid nineties. The competition is there for a reason. The number of website on-line has experienced a nearly exponential growth and you need to stand out to be seen! Actually it is kind if scary if this trend is going to continue… Anyway most of you reading this post is probably agreeing that websites need to be special, look good and have features that is not found everywhere. I believe jQuery is the answer today just as Flash was 5 years ago. With simple steps and limited programmer skills jQuery will allow you to add goodies to your website you wouldn’t even allow yourself to dream about! This post is listing a lot of really cool plugins you can simply download and setup to impress your visitors!
qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.
Create a side tab that expands content for a feedback form or contact info. Make your own image to use as a tab and apply this plugin to any div to hide the content off the right side of the screen, It animates to show the content, when the handle/tab is clicked.
This is a great set of jQuery UI Tools. The effort used to present these tools on-line and document them is amazing. Its all in a single JavaScript file weighs only 5.72 Kb.
“The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.”
Documentation of the jQuery Tools library is good and way above what you would expect from a free set of jQuery plugins.
This plugin displays a confirmation message in place before doing an action. It does not require adding any extra code apart from a call to the plugin itself. One call to $(element).confirm() will do the magic. Also, this plugin does not require you to provide a callback function; it figures it out on its own. Demo Download
Learn how to add a cool popup bubble to an RSS feed link using jQuery. Demo
Learn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item. Demo
This jQuery plugin is a flexible and straightforward way of providing modal window functionality on your site.
The Image Overlay Plugin lets you present more information about your images. Hovering over an image reveals associated text on top of it.
It s important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div “strips” to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item. So if you step back and look at the cornered element, think of there being solid colored divs hiding the true squared off corners of the item you wish to be changed. This helps you understand the inherent limitations of this small plugin. It s best suited for rounding off block-level elements (divs, paragraphs, etc) and may present more challenges when trying to round off inline elements (spans, anchors, etc). Demo Download
I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here). Demo Download
Do you need a sliding div panel at the top (or bottom) of web pages that can contain more links or your login/sign-in feature? Check out SlideBox.
This tutorial will show you a method for replacing the built-in browser tooltips that appear on elements such as images and links with title attributes.
Todays tutorial is going to show how to create a horizontally scrolling div using jQuery, html, and css. The main part of this tutorial is going to focus on the jQuery which is used to build the slider which controls the scrolling. One of the first questions that is going to pop into your head is, “why?”. Well the main reason to do this is to be able to build a custom scroll bar/slider. You can also introduce extra functionality using the jQuery slider. Demo Download
The plugin creates rollover balloon-help style tooltips for any element on your page. While there were a few different tool tips plugins that existed for jQuery, none of them seemed to quite meet my need for a NetFlix (or Google Maps) style talk-balloon popup. Demo Download
jQDialog is a jQuery plugin for exhibiting unobtrusive modal windows for in-page notifications that can replace the alert(), prompt(), and confirm() JavaScript functions.
Panel Gallery is an image slideshow with a unique transitional effect. It transitions to another image in a sequential panel manner.
This jQuery-based navigation menu tutorial will show you how to create a menu that follows you up and down the page as you scroll.
This modal window tutorial uses a rel attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the .click() and .css() methods.
Columnize creates a newspaper-like column layout. The original HTML code only needs small adaptions. In most cases, it is not necessary to adapt the HTML code at all.
This tooltip technique will check whether a link has a title attribute or not, and if it doesn’t, it skips it title.
I received a request from my reader that asked to me how to implement facebook style alert box. So I had designed Facebook Style Alert Confirm Box with jquery plug-in jquery.alert.js. It is simple just changing some lines of CSS code. Demo Download
ColorBox is a light-weight, customizable lightbox plugin for jQuery 1.3. Demo Download
Create search boxes that are highlighted when the user focuses on them by following along this excellent jQuery tutorial.
Hi there in this tutorial il show you some simple effects you can use to spice up your websites using jquery. Your probably thinking oh no not another coding language ive got to learn. Dont worry its real simple to use and implement. Demo Download
jQuery Iconize allows you to reduce or expand page elements into an “icon state”, providing your web app a user-friendly way of minimizing page objects.
This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.
PikaChoose is a super lightweight image gallery that’s a cinch to integrate into your website. You can see it in action on the Belvedere Inc website.
I received a mail from my reader that asked to me how to implement Show the love rating system like amypink.com. So I had designed Favorite Rating with jQuery and Ajax.. It is very simple, just changing little code on my old post Voting system with jQuery, Ajax and PHP. Demo Download
Growl allows you to present DOM-inserted elements (divs by default) that are perfect for user warnings, messages, and status update notifications.
In this tutorial, you’ll learn about the concept of tweaking opacity of elements, as well as using the setInterval function to delay the firing off of another function.
Creating image thumbnail galleries is a snap when you implement the Easy Image Gallery jQuery plugin into your site’s template.
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I have seen by providing an object interface to control dialogs after they have been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user. Demo Download
This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events (in this instance – mouse hovers).
The Text Resizer plugin attempts to solve one problem: that of resizing text on demand by the user. A lot of us have visited sites, particularly news websites, where the user is given the option to enlarge or decrease the size of the website’s text. This is especially useful for sites where it is expected that older visitors will make use of the site.
This jQuery plugin allows you to display a progress bar for page components that are being downloaded – useful for image galleries that share large-scale photos.
nyromModal is a useful jQuery plugin that has a robust set of features and options for you to truly create a customized modal window for your web pages.
Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.
MOAText is a spiffy jQuery plugin for giving you the ability to animate HTML text triggered when the mouse cursor hovers over them.
In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like ). The tutorial will also show you how you can deal with keypress events so that you can incorporate keyboard shortcuts into your interface.
Scroll a large nested layer within a viewport using native scroll from the container. It does not require drag and drop functionality from UI and it is faster than UI dragging. Can be used to build a similar effect as in Google maps where you drag contents of a div acting as a viewport.
Twit is a jQuery Plugin to Display Twitter Tweets on a Blog.
jParallax turns a selected element into a window, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way. Demo Download
Uploadify is a package written on top of jQuery that gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.
jLoupe adds a “loupe” or “magnifying glass” effect to images. Applying the plugin is as easy as adding the class “jLoupe” to the images you want to enable the effect on. There are several ways to enable the zoom behavior depending on how you are loading the images on your page. The best way is to simply scale a large image using the html attribute “width” or “height”. But if you are displaying a gallery of small thumbnails, you can apply jLoupe by adding the URI of the larger image to the “longdesc” attribute to your image tag.
Tip! JavaScriptBank.com: provide thousands of free JavaScript codes, free JavaScript tutorials, free JavaScript training videos
Complete mcp and ccna certification passing guarantee by actual test exam material.