More and more sites you visit seem to have some kind of lightbox script displaying a multitude of elements, images, videos, ajax inline content and external and internal webpages. For those of you who may be unsure what a “lightbox” is, basically it is a script that allows you display large images using various modal dialogues utilizing libraries such as Prototype, MooTools and jQuery. Recently...

Sometimes there are situations where one might require a confirmation prior to leaving a site or maybe you just want a confirmation prior to executing an action.  This can be achieved very easily with a few lines of jQuery code. Let’s assume we have the following code: <a href="http://www.jquery.com" alt="jQuery - External Link" class="confirmexit" >jQuery</a> You...

qTip is an unobtrusive jQuery tooltip plugin with a list of nice features. It has: - rounded corner support without use of any PNGs - very flexible tooltip pointers are as they can be positioned in several locations - 5 ready to use stylish themes & you can create your own easily - support for not-overlacking. How close the tooltips are, they will preserve their stacking order - ready to use effects:...

Some times clients will request little features such as a word count on a form field or request the data collected from the user fall within a certain word count range. Although, this is slightly different then the more common practice of performing a character count for field size validation, it is still a easy task with the use of JQuery. Below is a little snipped which performs a word count: $(’#data’).keyup(function()...

Below is a code sample for creating a nice animated hover effect. This effect could be useful for the creation of tool tips or additional information snippets. However, developing the skills for this effect may take sometime and may be as difficult as mastering online poker or chess skills. One use that comes to mind in my work environment would be when requiring footnotes. This is an ideal solution...

If you have spent anytime at all trying to add dynamics to your pages then you will know that you tend to follow a pattern selecting an element(s) and then adding functionality to these elements in the way of conditional statements. You make be hiding/showing an element, adding/removing a class, modifying an attribute or performing some additional task. Now using basic javascript or server-side coding...

I stumbled onto a nice File Management example from developer Cory S.N. LaViska, which is quite slick and can be useful in creating a content management interface. LaViska gives us the following overview: jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side...

Sliding menus are very effective in areas where we have limited space . This is a sliding top menu built with JQuery which can be fired through the open & close buttons or with any tag with the related class name. You can also use it as an info box, login area & more. Below is the code that makes it happen: <script type="text/javascript"> $(document).ready(function()...

JQuery is growing rapidly and becoming a house hold name in the field of user interaction frameworks.  One quick example that I am sharing but also to document for future use, is that of the Links with URL Previewing capabilities.  To make this work you will need a version of JQuery as well as the screen capture of the intended link target, in my example, I use two of my sites, this one (tommycraig.com)...

How to make XHTML links that popup a new window and degrade gracefully using the jQuery JavaScript Library. With the deprecation of the target attribute in XHTML Strict, opening links in new windows has become a bit trivial, if not annoying, to standardize. I always look for a consistent, unobtrusive approach that degrades gracefully; and since JQuery is becoming the scripting language of choice I...