3 jQuery plugins to show context menu

A context menu (also contextual menu, shortcut menu and, popup menu) is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right mouse click. Context menus offer a limited set of items that apply to the current state, or context, of the system or application in which the context menu is invoked

Source: Wikipedia (http://en.wikipedia.org/wiki/Context_menu)

Here is a review of 3 jQuery plugins that can override the browser default context menu with our own context menu.Opera browser doesn’t support custom context menu

ContextMenu by Chris Domigan

It is one of the earliest plugin to show context menu. It is fully customizable and supports callback
functionality.

jContext

It is a very lightweight jQuery plugin to show context menus (0.6KB when minified). The menu is fully customizable using HTML and CSS.

DEPENDENCIESjQuery 1.2
SIZELess than 1KB (Compressed)
RESTRICTIONSNone
DEMOOpen | Open in new window
INFO & DOWNLOADOpen | Open in new window
SUPPORTED BROWSERSFirefox 1.5+, IE 6.0+

jQuery Context Menu Plugin By Cory S.N. LaViska

This is the most powerful plugin with many customization options and callback support.

Advantages

Fully Customizable via CSSSupports keyboard shortcutsAbility to disable menu/menu items on the fly

DEPENDENCIESjQuery 1.2.6 Or jQuery 1.2 with dimensions plugin
SIZELess than 7KB (Uncompressed)
RESTRICTIONSNone
DEMOOpen | Open in new window
INFO & DOWNLOADOpen
SUPPORTED BROWSERSFirefox 2 & 3, IE 6.0+, Safari, Chrome

jQuery Ajax File Upload

Ajax file upload plugin allows users to easily upload multiple files without refreshing the page. In addition, you can use any element to show file selection window.

This plugin creates invisible file input on top of the button you provide, so when user clicks on your button the normal file selection window is shown. And after user selects a file, plugin submits form that contains file input to an iframe. So it isn’t true ajax, but brings same user experience.


Advantages

  • AJAX like behaviour using iframe technique. (AJAX does not support file handling)
  • Multiple file upload
  • Allowed file types can be specified
  • Callback functions for all events
DEPENDENCIESjQuery 1.2
SIZE4KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

jGrowl – To show unobtrusive messages

jGrowl is a nice way to show unobtrusive messages or informations to user.

Advantages

  • The default style is good enough
  • The message can be shown for a pre defined time (For eg: 10 seconds and then it will close automatically)
  • Support for sticky messages – which do not close automatically
  • Customizable
DEPENDENCIESjQuery
SIZE5 KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

Three jQuery modal plugins to repace alert and confirm

alert() and confirm() are two javascript functions that you should not use in your web 2.0 sites  . The main problem with these are the way those blocks the user from interacting with browser. They are modal in behaviour, that means the user should take an action before he can do anything with browser. He can’t even switch to another tab. Here, we suggest three jQuery plugins to ditch the notorious alert() function.

They are jQuery Modal Dialog, jqModal, jQuery SimpleModal

jQuery Modal Dialog


Unlike many modal scripts (which are coded to show any type of contents along with modal dialog support), this plugin is just made to show messages to the user and a complete replacement for javascript alert() and confirm.

By default it supports 4 types of messages – error, warning, success and prompt. The styles are highly customizable. One feature I liked in this is the built in support for auto close option. It is a very useful feature. For eg: To show a success message for 5 seconds and close the message automatically.

Advantages

  • Highly customizable
  • Supports error, warning, success and prompt messages
  • Auto Close option
DEPENDENCIESjQuery
SIZE6KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Support page

jqModal

jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework.

As the author claims, it is a good script to show messages to the user. It can be used to replace the alert() and confirm() javascript functions.

Advantages

  • Highly customizable
  • Can show Ajax/Iframe content
  • Can replace alert() and confirm()
DEPENDENCIESjQuery
SIZELess than 4KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Download

SimpleModal

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided.

DEPENDENCIESjQuery
SIZE6KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

Featured content slider – Auto advancing

Using jQuery Coda plugin, css-tricks.com has created a very good script for a featured content gallery with auto advancing. It can be created with simple html markups.

DEPENDENCIESjQuery, jQuery Easing & Compatibility plugin, jquery Coda plugin
SIZELess than 40KB (All scripts including jQuery compressed)
RESTRICTIONSNone (Free to use on any site)


Suggested Enhancements

Add scroll functionality (carousel functionality) in the thumbnails so that any number of items can be featured.For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download code

jQuery Coda Slider

There are two jQuery plugins to emulate the Coda style. One uses scrollTo plugin and the other uses jQuery easing plugin

1. jQuery Coda Slider

It uses the jQuery scrollTo plugin.

DEPENDENCIESjQuery, jQuery ScrollTo, local Scroll & serial Scroll
SIZE10 KB (with all the requried plugins – excluding jQuery)
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

2. jQuery Coda Slider

It uses jQuery easing plugin for the effects

DEPENDENCIESjQuery, jQuery easing, easing comaptibility
SIZE9 KB (with all the requried plugins – excluding jQuery)
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

jQuery floating box plugin

In may cases, web page contents does not fit into the screen, we will have scroll down to the page to read whole contents. bu doing so, we will lose those information on top. This javascript Floating Menu will do the trick and to keep  specified contents already visible.

Like the author says, sometimes we want to show some information to the user regardless of the page position. For eg: On a long page of information a link to the top can be shown always at the bottom right corner. In those cases you can use this plugin.


Suggested enhancement

May add some code to show/hide a close button.

DEPENDENCIESjQuery
SIZE5KB (Uncompressed)
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open | Open in new window | Download jQuery Floating Box code

This jQuery plugin is based on the floating box javascript by jtricks. This script doesn’t need any libraries. So if you’re not using jQuery use this one instead.

Vertical alignment of contents inside an element using jQuery

One of the old problems! Vertical alignment of contents inside an element. For those who don’t know about this issue,

What is the issue?

  • For eg; there is an area (e.g. <div> or <p>) with known height in the page (For eg: 300px;)
  • an internal object (typically a paragraph, image etc) is inside the area andthe height is unknown(May be this content is from a table – we don’t know how much is the text)
  • This object should be centered vertically inside the required area.
  • Tables should not be used.

Though there is a CSS property vertical-align, it won’t work like attribute valign in HTML tables. CSS property vertical-align doesn’t seem to be able to solve this vertical alignment problem.

There were ofcourse a couple of solutions using css. But all involves elements inside an element (For eg: <div>inside another <div> and style). But this may be difficult for bloggers, who want to show some content in special formatting (For eg: In my site, notes are shown in a special style). For eg: you want to give a 200px height to a <p> element and vertically center the elements (Same was the case with mine).

So the simplest method is to use javascript. Here I am describing how to solve the vertical alignment issue with jQuery. 

The logic:

  1. Find the content inside the element
  2. Create another element inside it and assign the content to the newly created element
  3. Find the height of the new element
  4. Adjust the height of the parent if required (the new height may be more than the given one)
  5. Find the margin, and assign it to the new element using css margin-topproperty.

Code

(function ($) {     $.fn.vAlign = function(container) {         return this.each(function(i){    if(container == null) {       container = 'div';    }    var paddingPx = 10; //change this value as you need (It is the extra height for the parent element)    $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">");    var el = $(this).children(container + ":first");    var elh = $(el).height(); //new element height    var ph = $(this).height(); //parent height    if(elh > ph) { //if new element height is larger apply this to parent        $(this).height(elh + paddingPx);        ph = elh + paddingPx;    }    var nh = (ph - elh) / 2; //new margin to apply    $(el).css('margin-top', nh);         });      }; })(jQuery);

A little explanation of function

  • First three lines are for the normal jQuery chainable methods
  • If no container is given, <div> is used
  • Line # 7 is for the padding height. It will make sure that there is enough padding even if the height of the new element is larger than the parent. For eg: If you want to ensure that 5px width should be there for top and bottom give the value 10
  • Line # 8 creates the new container with the existing content
  • Line #9 – 11 finds the height of the new element, and newly created element
  • Line #12 – 15 ensures that the parent div has enough height and padding to hold the new element
  • Next lines calculates the center value and applies it to the newly created element using the css margin-top property

Usage

Include the jQuery library and then include this function in your script file or html.Do not copy from the above code, it is formatted for display and will not work as javascript. Please download the files (Scroll below)

Just call the function vAlign() with the required element. The contents inside will be automatically aligned vertically. You may optionally speciy the new element to be created. Useful, if you want to create a <p> element inside instead of a <div>. By default <div> elements will be created.

Eg:

$("p.special").vAlign();
$("div.info").vAlign("p"); //This will create &lt;p&gt; as the holder element.
$("p.warn").vAlign("span"); //This will create a &lt;span&gt; element.
$("p.warn").vAlign().css("color","red"); //Yes, you can chanin methods.

<span>selements are inline elements, the block properties do not apply to them. So if you want to use inline elements like <span>, <a> then the display:block property should be applied.

For eg:

p.warn span {
   display: block;
}

Advantages:

  1. No need to worry about additional mark ups and style. All required styles and markups will be generated automatically
  2. Content can grow
  3. Simple for content entry

Disadvantages:

  • The only disadvantage is it is javascript based and if javascript is turned off it will not work. But this is a very rare case in the modern world. Even the hand held devices support javascript and there is no reason to turn it off.

Hope it was useful