The following are examples of useful code snippets that can be used – some of the examples use standard javascript functions and are not specific to jQuery:

1. Get The Current Page URL

A very simple snippet, which stores the current page URL in a variable:

// Retrieve current URL
var url = document.URL;

2. Get The Current Root URL

A very simple snippet, which stores the root URL in a variable:

// Retrieve root URL
var root = location.protocol + '//' + location.host;

3. Get A URL Hash Parameter

Retrive a hash parameter and store in a variable:

// Get # parameter
var param = document.URL.split('#')[1];

4. Change Browser Address Bar Hash Parameter

In the example below we replace the hash parameter, which we get from the clicked link. Useful for adding bookmarking capabilities when using AJAX:

// update browser address bar URL
$('a.demo-link').click(function(){
	var hash = $(this).attr('href');
	location.hash = hash;
});

5. Redirect Using Javascript

If you need to redirect a page using jQuery:

// Redirect - insert required URL
window.location.href = "http://designchemical.com/";

6. Get Querystring Parameters

If the URL contains a querystring with multiple parameters the following snippet will parse each parameter and store the array as a variable:

var vars = [], hash;
	var q = document.URL.split('?')[1];
	if(q != undefined){
		q = q.split('&');
		for(var i = 0; i < q.length; i++){
			hash = q[i].split('=');
			vars.push(hash[1]);
			vars[hash[0]] = hash[1];
		}
}

To use any of the parameters you can access the value using the parameter name. E.g. if the URL contains the querystring “?a=3&b=2&c=1″ you can access the value for “a” using:

// Will alert the value of parameter a
alert(vars['a']);

7. Highlight Current Menu Item

Rather than manually modify navigation menus to add an “active” class to the current page we can use jQuery to identify which link contains the current URL:

var url = document.URL;
$('#menu a[href="'+url+'"]').addClass('active');

8. Check If Link Contains External URL

The following snippet will check if a clicked link contains a URL to an external web page and if so, open in a new browser window:

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});

Add more excitement to data tables using jQuery and conditional formatting to generate flexible data “heat maps”.

Long tables of numbers are never fun to look at and when presenting this kind of data on the web, where attention spans are already at their limits, you need to be able to present the highlights as quickly as possible.

Data heat maps provide the perfect way of taking ordinary data and creating something more visually appealing and informative.

jQuery Data Heat Map Demo

Download tutorial source files

Tutorial Objectives

To create our heat map in a way that is flexible enough to cover any range of values, there are several key components to our jQuery code that we need to consider:

• Capture and statistically analyze all data points
• Have a method of then grouping the data and being able to identify what formatting should be applied
• Dynamically generate the CSS to be used for each group to create a heat map style effect
• Apply the correct CSS to each data point

For this tutorial we will be using a random table of numbers and the formatting will be applied based on each value as a % of the largest value.

The Basic HTML

The complete table can be found on the demo page. The HTML below gives the basic table structure, showing one row of data and the CSS classes we will be using:

<table cellpadding="0" cellspacing="0" border="0" class="heat-map">
    <thead>
        <tr>
		    <th class="first">Title</th>
			<th>data 1</th>
			<th>data 2</th>
			<th>data 3</th>
			<th>data 4</th>
			<th>data 5</th>
			<th class="last">data 6</th>
		</tr>
    </thead>
	<tbody>
	    <tr class="stats-row">
		    <td class="stats-title">Wanda</td>
			<td>25</td>
			<td>55</td>
			<td>26</td>
			<td>19</td>
			<td>39</td>
			<td>21</td>
		</tr>
	</tbody>
</table>

The jQuery Code

1. Capture and analyze the data

The first thing we need to do is find out the largest value within the data range. To do this we use fairly simple but useful code to create an array of all data points and then return the maximum value:

<script type="text/JavaScript">
$(document).ready(function(){

	// Function to get the max value in an Array
    Array.max = function(array){
        return Math.max.apply(Math,array);
    };

	// Get all data values from our table cells making sure to ignore the first column of text
	// Use the parseInt function to convert the text string to a number

    var counts= $('.heat-map tbody td').not('.stats-title').map(function() {
        return parseInt($(this).text());
    }).get();

	// run max value function and store in variable
	var max = Array.max(counts);

});
</script>

2. Group data points

For this tutorial we have already decided that we will use % of each value from max value. We do this so that we can find exactly where the data point is positioned on a scale of 1 – 100. This is the critical part in creating the heat map as we will then use this scale to dynamically generate the CSS styles

100 is probably a little excessive but is an easy number to work with for the tutorial. You can obviously adjust this number to suit your data and style of heat map.

We only want to use integers so we also include some additional rounding of the results

n = 100; // Declare the number of groups

// Loop through each data point and calculate its % value
$('.heat-map tbody td').not('.stats-title').each(function(){
	var val = parseInt($(this).text());
	var pos = parseInt((Math.round((val/max)*100)).toFixed(0));
});

The above code is not yet complete since we will add the actual formatting into the same loop but have broken it down to explain how we create each step.

3. Dynamically generating the heat map styles

To create the heat map effect we are basically going to use background colour.

Technically there is no restriction on how you apply the styles and background colour is only one option. The code is fairly flexible and with some minor adjustments can be applied to font size, container size, background image, etc.

Colour is easy because we can directly calculate each colour value between 2 defined colours – our start point and the end point, which across 100 points should create a gradient style effect.

To calculate colour we need to use the RGB values, which are 0 to 255 for Red, Blue and Green.

// Define the ending colour, which is white
   xr = 255; // Red value
   xg = 255; // Green value
   xb = 255; // Blue value

// Define the starting colour #f32075
   yr = 243; // Red value
   yg = 32; // Green value
   yb = 117; // Blue value

// Calculate a specific colour point
// pos - calculated in the earlier code identifies where on the scale the data point is

red = parseInt((xr + (( pos * (yr - xr)) / (n-1))).toFixed(0));
green = parseInt((xg + (( pos * (yg - xg)) / (n-1))).toFixed(0));
blue = parseInt((xb + (( pos * (yb - xb)) / (n-1))).toFixed(0));

// Once we have our RGB values we combine them to create our CSS code
clr = 'rgb('+red+','+green+','+blue+')';

4. Apply the heat map styles to each data point

Finally we apply the new RGB value by setting the background colour of the table cell.

$(this).css({backgroundColor:clr});

We combine steps 2, 3 & 4 so that this is all being carried out within the same loop.

The Complete jQuery Code

The code below shows all 4 steps combined to create the complete heat map function:

<script type="text/JavaScript">
$(document).ready(function(){

	// Function to get the max value in an Array
    Array.max = function(array){
        return Math.max.apply(Math,array);
    };

	// Get all data values from our table cells making sure to ignore the first column of text
	// Use the parseInt function to convert the text string to a number

    var counts= $('.heat-map tbody td').not('.stats-title').map(function() {
        return parseInt($(this).text());
    }).get();

	// run max value function and store in variable
	var max = Array.max(counts);

	n = 100; // Declare the number of groups

    // Define the ending colour, which is white
    xr = 255; // Red value
    xg = 255; // Green value
    xb = 255; // Blue value

    // Define the starting colour #f32075
    yr = 243; // Red value
    yg = 32; // Green value
    yb = 117; // Blue value

    // Loop through each data point and calculate its % value
    $('.heat-map tbody td').not('.stats-title').each(function(){
	    var val = parseInt($(this).text());
	    var pos = parseInt((Math.round((val/max)*100)).toFixed(0));
		red = parseInt((xr + (( pos * (yr - xr)) / (n-1))).toFixed(0));
		green = parseInt((xg + (( pos * (yg - xg)) / (n-1))).toFixed(0));
		blue = parseInt((xb + (( pos * (yb - xb)) / (n-1))).toFixed(0));
		clr = 'rgb('+red+','+green+','+blue+')';
    });
});
</script>

To completely change the look of the heat map all it requires is to change the start colour and end colour RGB values!

Check out the demo page for more examples – jQuery Data Heat Map Demo or Download the tutorial source files

In today’s post we are going to look at changing the jQuery code so that the slider menu can handle both vertical and horizontal animation.

Both the HTML and CSS remain exactly the same for this improved version and you can refer to yesterdays tutorial for the details.

View Demo Download Source Code

The jQuery Code

To make the slider handle both directions we only need to add a few changes to our jQuery code:

$(document).ready(function() {

    // Declare variables
    var direction = 'vertical'; // Additional variable which determines the slider direction - vertical or horizontal
    var width = 400;
    var height = 292; // Declare the height of the slider panel
    var slides = $('#list-images li');
    var numSlides = slides.length;

    // Set CSS of slide-wrap based on direction
    wrapCss = direction == 'vertical' ? {height: height * numSlides} : {width: width * numSlides} ;

    // Wrap the slides & set the wrap width
    slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
    $('#slide-wrap').css(wrapCss);

  // Hover function - animate the slides based on index of links
  $('#list-links li a').hover(function(){
	$('#list-links li').removeClass('hover');
	var i = $(this).index('#list-links li a');
	$(this).parent().addClass('hover');

	// Set animation based on direction
	params = direction == 'vertical' ? {'marginTop' : height*(-i)} : {'marginLeft' : width*(-i)} ;
	$('#slide-wrap').stop().animate(params);
  });
});

To change the slider animation set the “dimension” variable to either “horizontal” or “vertical”. Our modified hover function now sets the animation parameters using either the width or the height and creates the slider effect by adjusting the left margin or top margin.

View original post – jQuery Tutorial – Create a jQuery Menu Slider

View Demo Download Source Code

In the following tutorial we are going to go through how to create a jQuery menu slider similar to the one used in our own website’s mega menu navigation (see “WordPress Plugins” menu item).

View Demo Download Source Code

The HTML

The HTML is very simple and basically includes:

• A wrapper (“#menu-slider”) – only used for styling the jquery menu slider
• An unordered list of text links (“#list-links”), which will make up the menu section
• A list of images (“#list-images”) including captions, which will be used to create the slider

<div id="menu-slider">
    <ul id="list-links">
        <li class="hover"><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/">Mega Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/">Vertical Mega Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/">Vertical Accordion Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drill-down-ipod-menu-widget/">jQuery Drill Down iPod Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-slick-menu-widget/">jQuery Slick Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-floating-menu/">Floating Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-floating-tweets/">Floating Tweets</a></li>
        <li><a href="/blog/index.php/wordpress-plugin-slick-contact-forms/">Slick Contact Forms</a></li>
        <li class="last"><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/">Slick Social Share Buttons</a></li>
    </ul>

    <ul id="list-images">
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/">
            <img src="/media/images/mega_1a.jpg" alt="" />
            <span>jQuery Horizontal Mega Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/">
            <img src="/media/images/mega_2a.jpg" alt="" />
            <span>jQuery Vertical Mega Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/">
            <img src="/media/images/mega_3a.jpg" alt="" />
            <span>jQuery Vertical Accordion Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drill-down-ipod-menu-widget/">
            <img src="/media/images/mega_4a.jpg" alt="" />
            <span>jQuery Drill Down iPod Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-slick-menu-widget/">
            <img src="/media/images/mega_5a.jpg" alt="" />
            <span>jQuery Slick Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-floating-menu/">
            <img src="/media/images/mega_6a.png" alt="" />
            <span>Floating Menu Widget</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-floating-tweets/">
            <img src="/media/images/mega_7a.png" alt="" />
            <span>Floating Tweets Widget</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugin-slick-contact-forms/">
            <img src="/media/images/mega_8a.jpg" alt="" />
            <span>Slick Contact Forms</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/">
            <img src="/media/images/mega_9a.jpg" alt="" />
            <span>Slick Social Share Buttons</span></a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

On the first link we have added the class “hover” to show the active state for the slider when the page loads.

The Slider jQuery Code

The jQuery is surprisingly simple for the menu slider. Basically it involves 2 parts – creating the slider structure and then the function to handle the hover event when hovering over the list of links:

$(document).ready(function() {

    // Declare variables
    var width = 400; // width of slide - required for animation calculation
    var slides = $('#list-images li');
    var numSlides = slides.length;

    // Wrap the slides & set the wrap width - this will be used to animate the slider left/right
    slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
    $('#slide-wrap').css({width: width * numSlides});

    // Hover function - animate the slides based on index of active link
    $('#list-links li a').hover(function(){
        $('#list-links li').removeClass('hover');
        var i = $(this).index('#list-links li a');
        $(this).parent().addClass('hover');
        $('#slide-wrap').stop().animate({'marginLeft' : width*(-i)});
    });
});

In the above code we wrap the sliders in a div tag (“#slide-wrap”) – this is what is actually animated to give the sliding effect when hovering over a menu item.

The hover function on the list of links calculates how far to animate the slide-wrap based on the width of the slide and the index number of the active link. The function also adds class “hover” to the active li tag, which we can use to style the menu to indicate the active menu item.

The Menu Slider CSS

Finally some CSS styles to create the required design:

#menu-slider {
background: url(images/bg_menu_slider.png) no-repeat 0 0;
padding: 15px;
margin-bottom: 20px;
}

/* Required */
#list-images, #list-images li {
height: 292px;
width: 400px;
display: block;
}
#list-images {
float: right;
overflow: hidden; /* Required to hide the inactive slides */
border: 1px solid #ccc;
}
#list-images li {
position: relative;
}

#list-images li img {
background: #fff;
position: absolute;
top: 0;
left: 0;
}

/* Image captions */
#list-images li span {
background: url(images/grid1.png) repeat 0 0;
position: absolute;
bottom: 0;
left: 0;
width: 362px;
display: block;
padding: 14px 20px;
font: bold 20px Arial, sans-serif;
color: #fff;
height: 20px;
line-height: 20px;
}

/* Menu text links */
#list-links {
width: 220px;
float: left;
}
#list-links li {
padding: 0 15px 0 0;
}
#list-links li a {
font: normal 12px Arial, sans-serif;
color: #222;
padding: 8px 5px 8px 8px;
border-bottom: 1px solid #ccc;
font-weight: bold;
font-size: 13px;
display: block;
}
#list-links li.hover {
background: url(images/tab_current.png) no-repeat 100% center;
}
#list-links li.hover a, #list-links li.hover a:hover {
color: #fff;
background: none;
border-bottom: none;
padding-bottom: 9px;
}
#list-links li.last a {
border-bottom: none;
}

View Demo Download Source Code

Adding Vertical Slider Animation

Check out our follow up post – jQuery Tutorial – Adding Vertical Animation to the Slider Menu.

Add facebook like, twitter tweet button, google +1, linkedin, digg, stumbledupon, delicious, reddit & pinterest.com pin it social media share buttons in a floating or slide out tab to any WordPress website with the Slick Social Share Buttons plugin.

Slick Social Share Buttons also includes a social statistics page in WordPress admin, which gives you complete share totals for each page, post and category page.

The plugin has a range of options giving you full control of position of button panel, size of social media buttons, display order and whether to show or hide the floating or sticky panel on page load.

The plugin gives you the choice to include the social media share buttons on:

• WordPress Home page
• Posts page if using static home page
• Posts
• Pages
• Category Pages
• Archive Pages

If you are looking for a non-Wordpress version, which can be used on all websites check out our jQuery Social Share Buttons Plugin – allows you to add all of the main social media share buttons to any web page.

Demos for WordPress Social Share Buttons Plugin

Plugin also used on this site – see social share buttons on left. Additional demos include:

• Sliding Vertical Button Panel
• Horizontal Sliding Button Panel
• Top Vertical Slide Down Panel
• Vertical Floating Panel
• Bottom Floating Panel

Download Slick Social Share Buttons plugin

Download Slick Social Share Buttons 2.2 (72,957)

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `slick-social-share-buttons` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Configure the plugin options via the “Social Buttons” menu option in WordPress admin -> Social Buttons
4. After selecting the button and plugin options click “Save” to activate the buttons on your WordPress website

Floating/Sticky Tab Options

The type and position of the social button panel can be configured via the plugin settings page in WordPress admin:

Method

Select either a “floating” panel or a sticky “Sliding” tab

Location:

The position of the social button panel in the browser window:

Position From Center

Only available if using floating buttons. Check this if you wish to have the floating button panel positioned from the center of the page as opposed to the edge of the browser. In the text box enter the number of pixels that the panel should be positioned from the center of the screen. Useful for fixed width websites.

If not checked the position of the floating panel will be based on the edge of the browser – i.e. if the browser window is reduced the buttons will move towards the center.

Offset

Offset allows you to fine tune the positioning by adding the number of pixels that you would like to offset the panel from the edge of the browser window.

For sliding tabs only one offset is used:

• Top-left & bottom-left – number of pixels from left edge of browser
• Top-right & bottom-right – number of pixels from right edge of browser
• Left & right – number of px from the top of the browser window

Floating social buttons:

• Top-left & left – pixels from top & pixels from left
• Top-right & right – pixels from top, & pixels from right
• Bottom-left – pixels from bottom & pixels from left
• Bottom-right – pixels from bottom & pixels from right

Direction

Only applicable for “Slide Out” panels. This allows you to select whether the buttons are displayed horizontally or vertically.

Disable Floating Effects

If checked the floating style animation used for the floating buttons panel will be disabled and the panel will now stick to its location in the browser (only applicable to floating button panels)

Floating Speed:

The speed for the floating animation (only applicable for the floating type) in milliseconds – i.e. the time it takes to “catch up” when the page scrolls up or down) – e.g. to set the floating speed to 1.5 seconds use 1500.

The default speed is set to 1.6 secs.

Animation Speed:

The speed in milliseconds to open and close the button panel.

The default speed is set to 0.6 secs.

Auto-Close:

If checked, the panel will automatically slide closed when the user clicks anywhere else in the browser window

Load Open:

If checked, the social buttons will be displayed open when the page first loads. The tab will still close the panel when clicked.

Default Skin:

Check this box to use the default skin that comes with the plugin. To use your own styles uncheck the box and add the CSS to your theme’s style sheet. The default CSS file can be used as a template.

Tab Image URL:

To use your own image for the button panel tab insert the full URL for the image into the text field. Leave the box empty if you wish to use the default “Share” tab that comes with the plugin.

Page Display Options

Check the boxes of those pages/posts where you would like the social media buttons to appear:

• WordPress Home page
• Posts page – if using a static home page this will be the page that displays posts
• Posts
• Pages
• Category Pages
• Archive Pages

Excluding Individual Categories

For category pages you also have the option to specify any categories you would like to exclude from showing the social media buttons.

Click the “Show Categories” link to display a complete list of all categories on your website. Clicking on a category will move the category between the include and exclude lists.

Click the “Save” button once you have selected the relevant categories.

If a category is excluded the social media buttons will not appear on the category page or any post assigned to that category.

Social Media Button Options

To disable a button uncheck the checkbox next to the button name.

The size of each button and whether to display a count of total shares for that page can be selected from the dropdown menu. A sample showing an actual, active button with the selected settings will display in the right-hand column.

The buttons will display on the website in the same order that they are listed in the settings page. To change this order drag & drop the buttons and arrange as required.

Current Supported Social Media Share Buttons:

• Twitter Button
• Facebook Like
• Google +1 Button
• Delicious Button
• LinkedIn Button
• StumbleUpon Button
• Digg Button
• Reddit Button
• Pinterest “Pin It” Share Button

In addition to the basic settings some Social APIs require additional information.

Twitter

Input your twitter username (minus the ‘@’ symbol) to include this in the tweet.

Facebook

The facebook like button includes the option to use either the iFrame or xfbml methods of adding the button.

If you select the xfbml version you must add the following settings:

• Either a Facebook App ID or a Facebook Admin ID – although both can be entered you only need one for the xfbml version to work.
• Default Facebook Image – enter the URL for an image that will be entered into the facebook open graph meta tag in the event that a post thumbnail is not available for the page.
• Disable Opengraph – if you already have a plugin adding the facebook opengraph settings you can disable this plugin adding an additional set by checking this checkbox.

Pinterest.com Pin It

The “Default Pin It Image” option allows you to enter the URL for a default image to use for the “Pin It” button if a featured image in your blog post is not available.

Twitter URL Shortening

The plugin includes the option to select URL shortening for twitter from several services:

• Bit.ly
• Digg
• Su.pr
• tinyurl

If using bit.ly the API Key and account login must also be entered. For su.pr these are both optional.

Social Statistics & Metrics

Starting with version 2.0, the Slick Social Share Buttons plugin now includes a statistics page in WordPress admin, which gives you a complete overview and summaries of shares on your posts, pages and category pages.

To access this page go to WordPress Admin -> Social Buttons -> Social Stats

Social Stats options include:

Show

Select whether to show just your home page, posts, pages or category pages. Selecting the pages option will also include the home page results as the first item.

Filter

Available for posts only this lets you filter the results by category.

Order By

Select whether to sort the results by either date or alphabetically by title in either ascending or descending order. Only available for posts or pages.

Display

Show the total shares per URL either as text, text using conditional formatting to give a data “heatmap” or as active share buttons.

Note: selecting the “buttons” option will increase loading time as each button must be generated from the relevant social network site.

Per Page

Adjust the number of results per page. For faster loading time select a lower number per page.

Shortcodes

The plugin includes the feature to add text links within your site content that will open/close the sticky or floating button panel.

Click the links below to open/close the share button panel.

Share – default link, which will toggle the social share button panel open/closed with the link text “Share”

Tell Your Friends – toggle the button panel open/closed with the link text “Tell Your Friends”

Share – open the button panel with the default link text.

Share – close the button panel with the default link text.

Troubleshooting & Frequently Asked Questions

Check out our Frequently Asked Questions for Slick Social Share Buttons.

If you have a problem with the facebook like button try this first – Checking you facebook like button.

Many issues that can crop up with installing and using the plugin with different themes have also been covered in our comments section. Please check previous comments for further information/tips.

Demos for WordPress Social Share Buttons Plugin

Plugin also used on this site – see social share buttons on left. Additional demos include:

• Sliding Vertical Button Panel
• Horizontal Sliding Button Panel
• Top Vertical Slide Down Panel
• Vertical Floating Panel
• Bottom Floating Panel

Download Slick Social Share Buttons plugin

Download Slick Social Share Buttons 2.2 (72,957)

Feedback

If you find this plugin useful please take the time to rate it at wordpress.org.

If you have any problems, suggestions on how we can make the plugin better or would like help creating a new skin for your social buttons panel let us know via comments, email or our online contact form.

Screenshots

Example of vertical sliding social buttons panel

Example of horizontal sliding social buttons panel

Example of floating panel

Social Statistics admin page

Other Social Media/Network Plugins

If you like Slick Social Share Buttons then try out our other social media WordPress plugins:

Social Media Tabs

Add a facebook like box, google +1, google buzz, twitter and RSS profiles and feeds to any widget area with compact, slick sliding tabs. Plugin has the option of adding the tabbed box to either a slide out panel at the side of your browser window or as a static tabbed box in your widget area – see plugin page

Floating Tweets

The Floating Tweets plugin adds a floating, slide out tab containing the latest tweets from any twitter account. The widget is easily set up via any widget panel and can handle multiple twitter feeds per page – see plugin page

Updates

Version 2.3 – 22nd January 2012

• Added: Reddit button
• Fixed: Stumbleupon width & height

Version 2.2 – 30th December 2011

• Added: Delicious button
• Removed: Obsolete google buzz button

Version 2.1.4 – 22nd November 2011

• Added: Option to disable facebook opengraph settings

Version 2.1.1 – 22nd October 2011

• Added: Option to show buttons on posts page when using a static home page
• Added: Conditional loading of jquery &CSS files
• Added: Option to view social statistics counts using a data “heatmap”

Version 2.0 – 17th October 2011

• Added: Social statistics admin page
• Added: Only show statistics for active buttons
• Fixed: Total posts when filtering posts by category

Version 1.4.2 – 12th October 2011

• Fixed: Bug with short url meta data

Version 1.4.1 – 7th October 2011

• Update: Pin It button size drop down menu
• Update: Optimize jquery plugin files
• Update: Changed method of retrieving post ID

Version 1.4 – 5th October 2011

• Added: pinterest.com “Pin It” share button

Version 1.3 – 29th September 2011

• Updated: remove additional facebook js script
• Updated: facebook opengraph type meta tags

Version 1.2.9 – 27th September 2011

• Updated: Added local GA social tracking script

Version 1.2.8 – 23rd September 2011

• Updated: Increased title/description text

Version 1.2.7 – 9th September 2011

• Fixed: Tweet home page & category page URL using shortener
• Fixed: Hiding of facebook like comment box

Version 1.2.6 – 4th September 2011

• Added: Option to disable floating button effects

Version 1.2.5 – 25th August 2011

• Added: Option to position floating buttons from center of page

Version 1.2.4 – 19th August 2011

• Added: Google Buzz button

Version 1.2.3 – 14th August 2011

• Added: Ability to exclude specific categories

Version 1.2 – 11th August 2011

• Added: Digg button
• Fixed: Bug with Stumbleupon & Safari

Version 1.1 – 11th August 2011

• Added: Default image for facebook like button Open Graph tags
• Fixed: URL for WordPress home page for Open Graph tags

The plugin offers several options, which allow you to customise the level of security:

• Customise the characters used to replace the “@” symbol and the domain name “.”.
• Select whether to convert reversed text into a human readable email – e.g. moc[dot]niamod[at]sserdda.liame would be rendered as email.address@domain.com
• Automatically add a mailto link

The plugin can also be used on mailto links and will automatically identify when a link is used and convert the href text.

Check out the jQuery Spamless project pages for more information, examples and downloads.

The objective of today’s jQuery tutorial is to automatically generate a list of “category” links from CSS class names and use these links to filter our HTML content.

For the tutorial demo we are going to use a list of links for our jQuery tutorials, which we would like to filter by subject/category. This technique however is useful for any kind of HTML elements including; images, creating dependant select lists, unordered/ordered lists, etc and is ideal for content that needs to be listed under multiple categories or creating portfolios.

Since the actual filter list is generated dynamically we can quickly and easily add/edit/delete items that we would like to filter as well as change the categories.

View DemoDownload Source Files

HTML List

First we create our list of items to be filtered. For the purpose of the tutorial we wont include all of the list items show in the demo. On the few samples though note the class names added to each item – these are our categories/tags that we would like to use for filtering:

<ul id="demo-list">
  <li>
    <a href="/lab/jquery/demo/jquery_demo_light_weight_animated_slider.htm" class="menus animation horizontal">Lightweight Slider</a>
  </li>
  <li>
    <a href="/lab/jquery/demo/jquery_simple_horizontal_accordion.htm" class="menus animation horizontal">Simple Horizontal Accordion</a>
  </li>
  <li>
    <a href="/lab/jquery-mega-drop-down-menu-plugin/getting-started/" class="menus plugins">jQuery Mega Drop Down Menu Plugin</a>
  </li>
  <li>
    <a href="/lab/jquery/demo/jquery_animation_form_validation_errors.htm" class="forms validation ajax animation">Animated Error Messages &amp; Form Validation</a>
  </li>
  <li>
    <a href="/lab/jquery/demo/jquery_demo_image_swap_gallery.htm" class="images">Ultimate Image Swap Gallery with 3 Lines of Code</a>
  </li>
  <li>
    <a href="/lab/jquery/demo/jquery_demo_slick_jquery_captions.htm" class="images animation">jQuery Fading Image Captions</a>
  </li>
</ul>

The jQuery Code

There are basically 2 main parts to the jQuery:

Create The Filter Links – this involves retrieving all of the item classes and create a list of filter links based on the class names

A function to filter the demo list using the above links

1. Create The Filter Links

$(document).ready(function() {

// map the classes for each item into a new array
classes = $("#demo-list li a").map(function(){
    return $(this).attr("class").split(' ');
});

// create list of distinct items only
var classList = distinctList(classes);

// generate the list of filter links
var tagList = '<ul id="tag-list"></ul>';
tagItem = '<li><a href="#" class="active">all</a></li>';

// loop through the list of classes & add link
$.each(classList, function(index,value){
    var value = value.replace("-", " ");
    tagItem += '<li><a href="#">'+value+'</a></li>';
});

// add the filter links before the list of items
$("#demo-list").before($(tagList).append(tagItem));

});

// Function to create a distinct list from array
function distinctList(inputArray){
	var i;
	var length = inputArray.length;
	var outputArray = [];
	var temp = {};
	for (i = 0; i < length; i++) {
		temp[inputArray[i]] = 0;
    }
    for (i in temp) {
        outputArray.push(i);
	}
	return outputArray;
}

In the above code we first retrieve all of the class names from our list of demo links using jQuery’s map function.

This will create an array of containing all class names. In order to convert it to an array containing a distinct list of class names we pass our array to the function at the end – distinctList().

With the cleaned up output from our distinctList() function we then loop through the array and create a filter link for each item. Note that we create the complete filter links list before we insert the HTML – this will help improve performance since we only need to manipulate the DOM once.

We have also included an “all” link, which will allow us to reset the demo list filter and show all items.b

2. Filtering the Demo List

// filter the demo list when the filter links are clicked
$('#tag-list li a').live('click',function(e){

    // allows filter categories using multiple words
    var getText = $(this).text().replace(" ", "-");
    if(getText == 'all'){
        $("#demo-list li a").fadeIn();
    } else {
        $("#demo-list li a").fadeOut();
        $("#demo-list li a."+getText).fadeIn();
    }

    // add class "active" to current filter item
    $('#tag-list li a').removeClass('active');
    $(this).addClass('active');

    // prevent the page scrolling to the top of the screen
    e.preventDefault();
});

The demo list items will be filtered when the filter links are clicked. Since we create the filter links on the fly we need to use the “live” function to bind the categories.

The function allows us to use multiple words for category names by adding them as class names with hyphens – e.g. horizontal-menus would appear in the filter links as “horizontal menus”.

For this demo we will use fadeIn and fadeOut to show/hide the demo links. This can easily be substituted by any of the animation styles to suit your own tastes.

Finally at the end of our click function we add code to give the current filter item the class “active” and use e.preventDefault() to stop the browser scrolling to the top of the screen when the filter links are clicked.

The Complete jQuery Code

The complete jQuery code for our automatic content filter is:

$(document).ready(function() {

// map the classes for each item into a new array
classes = $("#demo-list li a").map(function(){
    return $(this).attr("class").split(' ');
});

// create list of distinct items only
var classList = distinctList(classes);

// generate the list of filter links
var tagList = '<ul id="tag-list"></ul>';
tagItem = '<li><a href="#" class="active">all</a></li>';

// loop through the list of classes & add link
$.each(classList, function(index,value){
    var value = value.replace("-", " ");
    tagItem += '<li><a href="#">'+value+'</a></li>';
});

// add the filter links before the list of items
$("#demo-list").before($(tagList).append(tagItem));

// filter the demo list when the filter links are clicked
$('#tag-list li a').live('click',function(e){

    // allows filter categories using multiple words
    var getText = $(this).text().replace(" ", "-");
    if(getText == 'all'){
        $("#demo-list li a").fadeIn();
    } else {
        $("#demo-list li a").fadeOut();
        $("#demo-list li a."+getText).fadeIn();
    }

    // add class "active" to current filter item
    $('#tag-list li a').removeClass('active');
    $(this).addClass('active');

    // prevent the page scrolling to the top of the screen
    e.preventDefault();
});
});

// Function to create a distinct list from array
function distinctList(inputArray){
	var i;
	var length = inputArray.length;
	var outputArray = [];
	var temp = {};
	for (i = 0; i < length; i++) {
		temp[inputArray[i]] = 0;
    }
    for (i in temp) {
        outputArray.push(i);
	}
	return outputArray;
}

View DemoDownload Source Files

Slick Contact Forms is our latest WordPress plugin using jQuery. The plugin allows you to quickly and easily add contact forms to any post or page in WordPress using widget areas.

The plugin allows multiple forms per page, option to either use jquery sticky tabs or jquery floating tabs for the contact form and configure the form settings, animation and the email address of where the form details should be sent.

WordPress slick contact forms plugin page.

Each contact form also includes the option to add up to 3 input text fields and one text area. Input labels can be set via the contact form control panel as well as the type of jQuery validation used – select either “no validation”, “required” or “email” for checking that entered text matches the correct email format.

Validation error messages are animated along with highlighting the input field and form is submitted using AJAX.

The plugin is designed so that all of the forms are fully accessible and in the event that the user has javascript disabled the form will appear on the page in the designated widget area and can be submitted as normal.

For more information and instructions on how to install and configure the plugin and check out a demo form:

WordPress slick contact forms.

The jQuery Floating Menu plugin allows you to add a floating, sticky menu containing important links to your WordPress site. These menus can be created from any WordPress 3.0 custom menu.

This WordPress plugin can handle multiple floating menus on each page and has many options to customise position and features, which are easily set via the widget control panel. The menu can also be toggled open/closed via external links inserted using shortcodes.

Demo jQuery Floating Menu

WordPress Floating Menu Plugin Demo

Download The Plugin

Download Floating Menu 1.4 (20,434)

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `floating-menu` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. In the widgets section, select the Floating Menu widget and add to one of your widget areas
4. Select one of the WP menus, set the required settings and save your widget

Useage

In order to use the floating menu plugin you will need the following:

A WordPress custom menu

Either use an existing menu or set one up via the menu option in WordPress admin.

Widget area

Location of the actual widget is not important since the plugin automatically sets the position based on the control panel settings. You can therefore add the floating menu to an existing widget area in your WordPress theme or create a new widget area.

To learn more about adding widget areas to WordPress see our WordPress tutorial – “Adding A Widget Area To Your Theme Files”.

Create Your Floating Menu

To create your floating menu go to the widget admin page and drag the “Floating Menu” widget to the desired widget area. Select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

The floating menu can easily be customised using the options available in the widget control panel:

Event:

Open/Close the menu using either ‘hover’ or ‘click’.

Tab Text:

Enter the text that you would like to use for the menu tab.

Width:

Set the width of the menu in pixels

Location & Aligment:

The position of the menu in the browser window is determined using its location (either Top or Bottom) and aligment (left or right). The location also changes how the menu slides out:

• Top Left or Top Right – menu slides down
• Bottom Left or Bottom Right – menu slides up

For each one you can also add the number of pixels that you would like to offset the menu by from either the location or alignment in the text box next to the drop down list. The default offset for both location and alignment is 10px.

E.g. To position a menu 50 pixels from the top and 100 pixels from the right you would use the following settings:

Set Alignment from Center

check this box to position the menu based on the center of the browser window as opposed to the sides. The alignment value now becomes the number of pixels left/right of the screen center.

This option allows you to fix the position of the menu even when the browser resolution changes.

Floating Speed:

The speed in milliseconds for the menu floating animation (i.e. the time it takes to “catch up” when the page scrolls up or down) – e.g. to set the floating speed to 1.3 seconds use 1300.

The default speed is set to 1.5 secs.

Animation Speed:

The speed in milliseconds to open and close the slide out menu.

The default speed is set to 0.6 secs.

Auto-Close Menu:

If checked, the menu will automatically slide closed when the user clicks anywhere in the browser

Keep Open:

If checked, the menu tab will remain open at all times.

Disable Float:

Check this option to disable the floating animation – menu remains in fixed position in browser window.

Skin:

8 different sample skins are currently available for styling the floating menu. Since there are no essential styles required to create the floating menu, these can easily be used to create your own custom menu theme.

Note: If you use one of the skin CSS files to create your own style please remember to copy the CSS to your theme folder as all files in the plugin folder are automatically deleted when the plugin is updated.

Shortcodes

The plugin includes the feature to add text links within your site content that will open/close the floating menu tab.

[dcfl-link] –
default link, which will toggle the floating menu open/closed with the link text “Click Here”

[dcfl-link text="Open Menu"] –
toggle the floating menu open/closed with the link text “Open Menu”

[dcfl-link action="open"] –
open the menu with the default link text “Click Here”

[dcfl-link action="close"] –
close the floating menu tab with the default link text “Click Here”

[dcfl-link action="close" text="Close Floating Menu"] –
close the floating menu with the link text “Close Floating Menu”

Frequently Asked Questions

Also please check out our Frequently Asked Questions for the Floating Menu plugin.

Many issues that can crop up with installing and using the plugin with different themes have been covered in our comments section. Please check previous comments for further information/tips.

Demo jQuery Floating Menu

http://designchemical.com/lab/demo-wordpress-jquery-floating-menu-plugin/

Download The Plugin

Download Floating Menu 1.4 (20,434)

If you liked the jQuery Floating Menu Plugin you should also try out:

WordPress Slick Menu Plugin

Sticky tabs with slide out menus.

WordPress Slick Contact Forms Plugin

Quickly and easily add sticky or floating, slide-out contact forms to any widget area. Fully customisable with email validation, optional required fields & animated error messages.

Feedback

If you find this plugin useful please take the time to rate it at wordpress.org.

If you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.

Screenshots

Widget in edit mode

Updates

Version 1.4 27th November 2011

• Added: option to set position based on center of screen

Version 1.3 25th October 2011

• Added: disable floating animation option

Version 1.2.1 13th September 2011

• Fixed: validation error

Version 1.2 11th June 2011

• Added: shortcodes to create external links to open/close floating menu tab
• Added: 4 new CSS skins

Version 1.1 16th May 2011

• Added: Option to keep menu open at all times

Our jQuery form submit and validation code is based on the same one we created in our “Create Your Own jQuery AJAX Form Submit With Validation” tutorial in February. The additional items that we are going to add are:

View DemoDownload Source Files

The Form HTML

A standard form with the same format that we used in the earlier tutorial:

<form id="form-sign-up" class="styled" action="" method="post">
    <fieldset>
        <h3>Register Now!</h3>
        <ol>
            <li class="form-row">
                <label>Name:</label>
                <input name="name" type="text" class="text-input required" />
            </li>
            <li class="form-row">
                <label>Email:</label>
                <input name="email" type="text" class="text-input required email" />
            </li>
            <li class="form-row">
                <label>Password:</label>
                <input name="password" type="password" id="password-1" class="text-input required password" />
            </li>
            <li class="form-row">
                <label>Repeat Password:</label>
                <input name="password1" type="password" id="password-2" class="text-input required password" />
            </li>
            <li class="button-row">
                <input type="image" src="images/btn_sign_up_off.png" alt="Sign Up" value="OK" class="btn-submit img-swap" />
            </li>
        </ol>
    </fieldset>
</form>

The key items here are the classes we have assigned to the text elements, which will be used by our jQuery code to identify what validation rules and error messages should apply. We have 3 different types:

• Name – has class “required”, which checks that the input is not empty and is used as the basis for all of our form elements
• Email – has class “email”, which checks the input against a regular expression for matching standard email formats
• Password/Re-enter Password – has class “password”, which will check the 2 entries against each other to make sure they match

Our Form CSS

There are a couple of CSS rules, which are required in order for our error animation to work – these are highlighted in the code below with appropriate comments:

/*Form styles*/
.styled {
font: 15px Arial, sans-serif;
width: 422px;
margin: 20px auto;
background: url(images/bg_form.png) no-repeat 0 0;
padding-top: 20px;
}
.styled fieldset {
background: url(images/bg_form.png) no-repeat 0 100%;
padding: 0 25px 20px 25px;
position: relative;
}

/* Form rows */
.styled fieldset li.form-row {
margin-bottom: 5px;
padding: 3px 0;
clear: both;
position: relative; /* Required as error messages will be absolutely positioned */
}
.styled label {
display: block;
font-weight: bold;
float: left;
width: 100px;
line-height: 24px;
padding-top: 4px;
color: #555;
}
.styled fieldset li.button-row {
margin-bottom: 0;
padding: 5px 0 0;
text-align: right;
}

/* Text input styles */
/* Default */
.styled input.text-input {
height: 22px;
width: 254px;
padding: 5px 8px;
background: url(images/bg_input.png) no-repeat 0 0;
border: none;
font: normal 15px Arial, sans-serif;
color: #333;
line-height: 1em;
}

The Form Validation CSS

The following CSS rules are for styling and setting up the form error messages:

/* Form Validation */
/* CSS code to create the error messages */
.styled span.error {
font: bold 11px Arial, sans-serif;
line-height: 1em;
color:#fff;
text-shadow: 1px 1px 1px #000;
background: url(images/arrow_error.png) no-repeat 0 center;
border-right: 1px solid #6c0202;
height: 11px;
padding: 8px 15px 11px 20px;
display: none; /* Required as we will use jQuery to fade in the error message */
position: absolute; /* Required */
top: 3px;
right: 0; /* Required - initially set all error messages to the right of the form row */
}

/* Change the input field styles when an error message is present */
.styled fieldset li.error input.text-input {
background-position: 0 -64px;
}

The jQuery Code

The code below includes comments explaining each function in more detail:

// Form validation and submit when button is clicked
	$('.btn-submit').click(function(e){

		// Declare the function variables:
		// Parent form, form URL, email regex and the error HTML
		var $formId = $(this).parents('form');
		var formAction = $formId.attr('action');
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		var $error = $('<span class="error"></span>');

		// Prepare the form for validation - remove previous errors
		$('li',$formId).removeClass('error');
		$('span.error').remove();

		// Validate all inputs with the class "required"
		$('.required',$formId).each(function(){
			var inputVal = $(this).val();
			var $parentTag = $(this).parent();
			if(inputVal == ''){
				$parentTag.addClass('error').append($error.clone().text('Required Field'));
			}

			// Run the email validation using the regex for those input items also having class "email"
			if($(this).hasClass('email') == true){
				if(!emailReg.test(inputVal)){
					$parentTag.addClass('error').append($error.clone().text('Enter valid email'));
				}
			}

			// Check passwords match for inputs with class "password"
			if($(this).hasClass('password') == true){
				var password1 = $('#password-1').val();
				var password2 = $('#password-2').val();
				if(password1 != password2){
				$parentTag.addClass('error').append($error.clone().text('Passwords must match'));
				}
			}
		});

		// All validation complete - Check if any errors exist
		// If has errors
		if ($('span.error').length > 0) {

			$('span.error').each(function(){

				// Set the distance for the error animation
				var distance = 5;

				// Get the error dimensions
				var width = $(this).outerWidth();

				// Calculate starting position
				var start = width + distance;

				// Set the initial CSS
				$(this).show().css({
					display: 'block',
					opacity: 0,
					right: -start+'px'
				})
				// Animate the error message
				.animate({
					right: -width+'px',
					opacity: 1
				}, 'slow');

			});
		} else {
			$formId.submit();
		}
		// Prevent form submission
			e.preventDefault();
	});

	// Fade out error message when input field gains focus
	$('.required').focus(function(){
		var $parent = $(this).parent();
		$parent.removeClass('error');
		$('span.error',$parent).fadeOut();
	});

The comments are fairly self explanatory. So to briefly summarise the jQuery code:

1. When the submit button is clicked the validation process starts by declaring all function variables, including the error message span tag
2. Clean up the form by removing any errors span tags plus the error class on the form rows from the previous click so we are starting with a clean slate
Loop through all input fields with class “required” and first check if they contain text
3. Validate input fields with class “email” using a standard regex pattern for email address formats
4. Get the 2 password field values and check if they match
5. If any of our checks returns an error indentify that form row by adding class=”error”, clone the error span tag, append to the form row and insert the relevant error message text
6. Position each error message span tag to the right of the form row based on the total width of the message
7. Fade in each error message and alert the user by animating 5px to the left
8. Fade out and remove the errors when the user clicks on the text input field

With the basic process now in place you can easily modify and expand the animation functions and try different effects to suit your users and website.

View DemoDownload Source Files

Regular expressions offer an extremely flexible and powerful way of adding validation to your website forms. Combined with jQuery, it allows you to ensure that data sent to the server matches all of your requirements.

In this post I have included several example regular expressions that we have used in our web design projects for validating form input.

For this tutorial we assume you know how to create the HTML form and add jQuery to your site. For samples you can refer to previous posts – check passwords using jQuery, email validation using jQuery or view the demo form.

View Demo

For each example we have created a css class, which can then be assigned to the relevant form element. If you are creating your own validation code/plugin there are obviously more efficient ways of creating a complete validation system but for the tutorial we have kept each regular expression sample separate and also use the “keyup” event.

jQuery To Handle the Submit Button

In order to use these validation functions in a form we need to add jQuery that will check for the presence of any span elements with the class “error”. We do this by using the length property. If the length is > 0 the form submit can be stopped and the user alerted:

$('#btn-submit').click(function() {
  if($('span.error').length > 0){
    alert('Errors!');
    return false;
  } else {
    $('#btn-submit').after('<span class="error">Form Accepted.</span>');
    return false;
  }
});

Now that we have this code to check for errors, we can add any of the examples below to the form.

Example 1 – Validates Numeric Characters Only

Accepts only 0 – 9

$('.keyup-numeric').keyup(function() {
    $('span.error-keyup-1').hide();
    var inputVal = $(this).val();
    var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
    if(!numericReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-1">Numeric characters only.</span>');
    }
});

Example 2 – No Special Characters

Allows only letters, numbers and spaces. All other characters will return an error.

$('.keyup-characters').keyup(function() {
    $('span.error-keyup-2').remove();
    var inputVal = $(this).val();
    var characterReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
    if(!characterReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-2">No special characters allowed.</span>');
    }
});

Example 3 – Maximum of 8 Characters

Allows all characters up to a maximum of 8. Useful for passwords, etc. The value can easily be increased/descreased by changing the {0,8}

$('.keyup-limit-8').keyup(function() {
    $('span.error-keyup-3').remove();
    var inputVal = $(this).val();
    var characterReg = /^([a-zA-Z0-9]{0,8})$/;
    if(!characterReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-3">Maximum 8 characters.</span>');
    }
});

Example 4 – US Phone Number

Allows numbers 2-9 for the first and second group of 3 followed by 0-9 for the last 4 with the groups separated by “-” e.g:

• 234-234-1234 = OK
• 134-234-1234 = Error
• 234-134-1234 = Error

$('.keyup-phone').keyup(function() {
    $('span.error-keyup-4').remove();
    var inputVal = $(this).val();
    var characterReg = /^[2-9]\d{2}-\d{3}-\d{4}$/;
    if(!characterReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-4">Format xxx-xxx-xxxx</span>');
    }
});

Example 5 – Validate Date Format

Allows date format – mm/dd/yyyy – including “/”. All other combinations will return errors e.g:

• 01/31/2001 = OK
• 31/01/2001 = Error
• 1/01/2001 = Error

$('.keyup-date').keyup(function() {
    $('span.error-keyup-5').remove();
    var inputVal = $(this).val();
    var dateReg = /^[0,1]?\d{1}\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d{3}))$/;
    if(!dateReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-5">Invalid date format.</span>');
    }
});

Example 6 – Check For Possible Fake Text

This is an interesting example, which checks for possible fake text being entered into your form. The regex looks for groups of the same letters occuring in groups of 3 or more e.g:

• foo = OK
• fff = Error

$('.keyup-fake').keyup(function() {
    $('span.error-keyup-6').remove();
    var inputVal = $(this).val();
    var fakeReg = /(.)\1{2,}/;
    if(fakeReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-6">Invalid text.</span>');
    }
});

Example 7 – Check Email Address Format

This is a standard regular expression, which is used to validate email addresses to ensure they follow the standard format:

• email@email.com = OK
• email.email.com = Error

$('.keyup-email').keyup(function() {
    $('span.error-keyup-7').remove();
    var inputVal = $(this).val();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if(!emailReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-7">Invalid Email Format.</span>');
    }
});

Example 8 – No Free Email Addresses

Another useful email validation regular expression checks for email addresses using free emails – in the example below we check for yahoo, gmail and hotmail:

• email@yahoo.com = Error
• email@email.com = OK

$('.keyup-email-2').keyup(function() {
    $('span.error-keyup-8').remove();
    var inputVal = $(this).val();
    var emailFreeReg= /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)(?!aol.com)([\w-]+\.)+[\w-]{2,4})?$/;
    if(!emailFreeReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-8">No Free Email Addresses.</span>');
    }
});

Example 9 – Visa Card Number Format

For an example of validating a credit card we can use the following regular expression, which checks the input against the standard format for Visa credit cards – All card numbers must start with a 4 & cards may either have 16 digits or 13 digits for older cards:

• 4166000000000000 = OK
• 4166000000000 = OK
• 41660000000000001 = Error
• 2166000000000000 = Error

$('.keyup-cc').keyup(function() {
    $('span.error-keyup-9').remove();
    var inputVal = $(this).val();
    var ccReg = /^4[0-9]{12}(?:[0-9]{3})?$/;
    if(!ccReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-9">Invalid visa card number</span>');
    }
});

Hopefully some of the above examples will be useful for your forms and also help demonstrate how powerful regular expressions can be.

View Demo

In today’s jQuery tutorial we are going to look at creating your own jQuery tooltip plugin!

Whilst there are many great tooltip plugins available out there, creating your own provides a nice and relatively easy opportunity to try your hand at jquery plugins as well as some basic jquery code.

View jQuery Tooltips Plugin DemoDownload Source Files

By creating a plugin version of the code you are making it portable and easily applied to any html element in your website. The objective of the final plugin will be to be able to create a custom tooltip of our own design on any element, using the title attribute as the source for the tooltip content.

Creating a jQuery plugin version makes you think a little more about the various requirements of the code to ensure that all possible variations of where/how it may be used are covered. Since you also may have less control over the CSS of where it may be used you usually need to add a little extra jQuery to set the conditions. Generally this requires adding code that gets the objects dimensions, position or content.

The Tooltip Plugin Components

If we look then at the various stages/components required for creating a jquery tooltips plugin that must be able to function anywhere we can break it down into the following basic components:

• Dynamically generating the tooltip – this involves both the html “container” and the text content
• The event that will trigger the tooltip to appear
• The animation that will present the tooltip on screen
• The animation to remove the tooltip once no longer required.

The Plugin Code

Plugins basically follow the same pattern so once you have created your first jQuery plugin things get much easier. We wont go into too much detail on how plugins are constructed since there are a lot of good resources already out there on writing jQuery plugins. A good starting place is – Plugins/Authoring on the jQuery website.

The basic standard format we use is as follows:

(function( $ ){

  $.fn.yourpluginname= function( options ) {  

    var defaults = {
      'youroption': 'default setting'
    };

    //call in the default otions
    var options = $.extend(defaults, options);

    return this.each(function() {

      // Here you add your jQuery plugin code

    });

  };
})( jQuery );

1. Set Up The Plugin & Add Our Default Options

The first thing we need to do is set up the namespacing. This is an important step when developing a jQuery plugin and you need to set up the namespacing to ensure that your plugin will have a very low chance of being overwritten by another plugin using the same name.

We always prefix our plugins with “dc” so for our jQuery tooltips we are going to use “dcTooltip”.

Options allow you to add variables, which the plugin user can set themselves when the plugin initialises. This makes the plugin more flexible. For our tooltips we have determined that we would like to set up 5 different options, which all therefore need default settings:

(function($){

    $.fn.dcTooltip = function(options) {

        //set default options
        var defaults = {
            classWrapper: 'tooltip',    // Class of tooltip container
            hoverDelay: 300,    // Delay in milliseconds before tooltip activates
            speed: 'fast',    // Speed of tooltip animation
            distance: 20,    // Distance for tooltip animation
            padLeft: 0    // Setting allowing user to manually shift the tooltip position
        };

        //call in the default otions
        var options = $.extend(defaults, options);

})(jQuery);

Now that we have the basic plugin structure in place we can get down to the jQuery code that will generate the tooltip feature.

2. Dynamically Generating The Tooltip

As we mentioned above we are going to get the tooltip text from the item’s “title” attribute. The text then needs to be inserted into our tooltip container, ready for the animation.

The HTML for the tooltip container is very simple:

<div class="tooltip">
    <div class="top"></div>
    <div class="text"></div>
</div>

We have added the additional div tag (class = “top”) so the user can add more advanced styling.

In this first section of our jquery tooltips code we are going to do a number of things:

1. Get the title attribute text insert into the tooltip container and append the tooltip HTML to the item.
2. Get the tooltip dimensions
3. Get the dimensions of the element
4. Position the tooltip by setting it’s margins. We want our tooltip to be positioned at the top and center of each element. The left margin will be based on the width of the element and the top margin based on the tooltip’s height and distance we want it to travel during the animation.
5. Set up CSS – Since our tooltips are positioned absolutely we need to make sure that the tooltip item has relative positioning. Plus we need to set our tooltip opacity to zero for the animation effect.
6. Finally – lets empty the element’s title attribute to prevent the default browser tooltip appearing.

    // 1. Get the text, create the tooltip and append
    var getText = $(this).attr('title');
    var $wrapper = '<div class="'+defaults.classWrapper+'"><div class="top"></div><div class="text">'+getText+'</div></div>';
    $(this).append($wrapper);

    // 2. Get the dimensions of the tooltip
    var $tooltip = $('.'+defaults.classWrapper,this);
    var widthP = $tooltip.width();

    // 3. Get the dimensions of the element
    var widthT = $(this).width();
    var heightT = $(this).height();

    // 4. Set margins based on element dimensions and distance for animation
    var marginTop = heightT - defaults.distance;
    var marginLeft = (widthP - widthT)/2;
    marginLeft = -marginLeft + defaults.padLeft;
    $tooltip.css({marginLeft: marginLeft+'px', bottom: marginTop+'px'});

    // 5. Set the element position to relative & tooltip opacity to 0
    $(this).css('position','relative');
    $tooltip.css('opacity',0);

    // 6. Remove the element's title text
    $(this).removeAttr('title');

That’s basically it for the code, which will create and set up each element’s tooltip. Each tooltip is now ready for us to add the animation effects.

3. Setting Up The Hover Event

Our jQuery tooltips are going to be triggered using the “hover” event. To minimise tooltips appearing when users are just moving their mouse across the screen and becoming an annoying effect, we are going to use the HoverIntent plugin.

We set up the hover event using the following code, which includes the settings required for HoverIntent:

// Configuration settings for HoverIntent plugin
var config = {
    sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
    interval: defaults.hoverDelay, // number = milliseconds for onMouseOver polling interval
    over: linkOver, // function = onMouseOver callback (REQUIRED)
    timeout: defaults.hoverDelay, // number = milliseconds delay before onMouseOut
    out: linkOut // function = onMouseOut callback (REQUIRED)
    };

// Initialise HoverIntent
$(this).hoverIntent(config);

The above code sets the timeout and interval to be the same as our initial option settings with a default of 300 milliseconds. Users can therefore increase this by passing a higher value when the plugin is initialised.

Notice in the configuration settings we have declared 2 functions – “linkOver” and “linkOut”. This is where we will add out animation code, which shows/hides the tooltip HTML.

4. linkOver Function To Display Tooltip

Now comes the fun part where we get to add the animation code that will display our tooltip. Our animation, which shows the tooltip has 3 basic steps:

1. First we need to “show” the tooltip since it is currently hidden using CSS.
2. Set the “bottom” position of the tooltip to the same as our marginTop variable, which we got earlier in the code.
3. Animate the plugin by moving it up – the distance is set according to our “distance” option. The speed for the animation is also set using our plugin options, which has a default value of “fast”.

function linkOver(){
    $tooltip.show().css({
        bottom: marginTop+'px'
    }).animate({
        bottom: defaults.distance+marginTop,
        opacity: 1
    }, defaults.speed);
}

5. linkOut Function To Hide Tooltip

Our animation for hiding the jquery tooltip only has two basic steps:

1. Move the tooltip upwards a distance of 1.5 x our “distance” option, at the same time fading out the tooltip. Again our speed is set according to the “speed” option.
2. When the first step is complete we need to “hide” the tooltip again.

function linkOut(){
    $('.'+defaults.classWrapper,this).animate({
        bottom: (defaults.distance*1.5)+marginTop,
        opacity: 0
    }, defaults.speed, function() {
        $(this).hide();
    });
}

The Complete jQuery Tooltip Plugin Code

Putting all of our above components together the complete plugin code is:

(function($){

	//define the new for the plugin ans how to call it
	$.fn.dcTooltip = function(options) {

		//set default options
		var defaults = {
			classWrapper	: 'tooltip',
			hoverDelay		: 300,
			speed       	: 'fast',
			distance		: 20,
			padLeft			: 0
		};

		//call in the default otions
		var options = $.extend(defaults, options);

		//act upon the element that is passed into the design
		return this.each(function(options){

			// 1. Get the text, create the tooltip and append
			var getText = $(this).attr('title');
			var $wrapper = '<div class="'+defaults.classWrapper+'"><div class="top"></div><div class="text">'+getText+'</div></div>';
			$(this).append($wrapper);
			// 2. Get the dimensions of the tooltip
			var $tooltip = $('.'+defaults.classWrapper,this);
			var widthP = $tooltip.width();
			// 3. Get the dimensions of the element
			var widthT = $(this).width();
			var heightT = $(this).height();
			// 4. Set margins based on element dimensions and distance for animation
			var marginTop = heightT - defaults.distance;
			var marginLeft = (widthP - widthT)/2;
			marginLeft = -marginLeft + defaults.padLeft;
			$tooltip.css({marginLeft: marginLeft+'px', bottom: marginTop+'px'});
			// 5. Set the element position to relative & tooltip opacity to 0
			$(this).css('position','relative');
			$tooltip.css('opacity',0);
			// 6. Remove the element's title text
			$(this).removeAttr("title");

                       // Configuration settings for HoverIntent plugin
			var config = {
				sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
				interval: defaults.hoverDelay, // number = milliseconds for onMouseOver polling interval
				over: linkOver, // function = onMouseOver callback (REQUIRED)
				timeout: defaults.hoverDelay, // number = milliseconds delay before onMouseOut
				out: linkOut // function = onMouseOut callback (REQUIRED)
			};

			// Initialise HoverIntent
			$(this).hoverIntent(config);

			// Hover link over
			function linkOver(){

				$tooltip.show().css({
					bottom: marginTop+'px'
                }).animate({
                    bottom: defaults.distance+marginTop,
                 opacity: 1
                }, defaults.speed);
			}

			// Hover link over
			function linkOut(){

				$('.'+defaults.classWrapper,this).animate({
                    bottom: (defaults.distance*1.5)+marginTop,
                    opacity: 0
			    }, defaults.speed, function() {
					$(this).hide();
				});
			}
		});
	};
})(jQuery);

Save your plugin file – in our case we are going to use – jquery.dctooltip.1.0.js

Using Your jQuery Tooltips Plugin

To use your jQuery tooltips now becomes very easy since it’s wrapped up as a plugin.

1. Add the Plugin

Add the plugin link to the document head as you would do with any other plugin. Don’t forget to also include the HoverIntent plugin:

<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="js/jquery.dctooltip.1.0.js"></script>

2. Initialise the jQuery Tooltip Plugin

To use the plugin with it’s default options you can use the following code:

$(document).ready(function() {
    $('#demo-list li a').dcTooltip();
});

To change any of the default options:

$(document).ready(function() {
    $('#demo-list li a').dcTooltip({
        classWrapper: 'another-tooltip',
	hoverDelay: 600,
	speed: 'slow',
	distance: 40
    });
});

3. The Tooltip CSS

Our tooltip CSS is fortunately very easy. As we mentioned at the start, if you are developing a jQuery plugin for general release you want to make it easy to use and wherever possible try to avoid very specific custom styling requirements – or at least make it easy to customise.

In our plugin options we have allowed the user to specify the tooltip container class, which therefore enables them to have multiple styles. For our demo we will use the default class – “tooltip”.

There are only a few “required” CSS rules for the tooltip container, which are identified below:

.tooltip {
width: 249px;
position: absolute; /* Required */
bottom: 0; /* Required */
left: 0; /* Required */
display: none; /* Required */
font-weight: normal;
font-size: 12px;
line-height: 1.5em;
color: #000;
z-index: 50;
}
.tooltip .text {
padding: 5px 15px 35px 15px;
background: url(images/tooltip.png) no-repeat 100% 100%;
}
.tooltip .top {
height: 10px;
background: url(images/tooltip_top.png) no-repeat 100% 100%;
}

View jQuery Tooltips Plugin DemoDownload Source Files

In today’s tutorial we are going to show how you can add slick image captions to an image gallery using just a few lines of jQuery and CSS.

1. Gallery HTML

Our image gallery is going to just be a simple unordered list containing our image thumbnails. For the captions we will use span tags, which will contain a header tag and our main caption text.

<ul id="gallery">
	  <li>
	    <img src="images/gallery/thumb/img_1a.jpg" alt="" />
		<span>
		  <h3>Image 1</h3>
		  This is the caption for the first image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_2a.jpg" alt="" />
		<span>
		  <h3>Image 2</h3>
		  This is the caption for the second image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_3a.jpg" alt="" />
		<span>
		  <h3>Image 3</h3>
		  This is the caption for the third image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_4a.jpg" alt="" />
		<span>
		  <h3>Image 4</h3>
		  This is the caption for the fourth image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_5a.jpg" alt="" />
		<span>
		  <h3>Image 5</h3>
		  This is the caption for the fifth image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_6a.jpg" alt="" />
		<span>
		  <h3>Image 6</h3>
		  This is the caption for the last image
		</span>
	  </li>
	</ul>

2. The CSS

Most of our CSS is just for styling the gallery thumbnails. For our captions we are going to use absolutely positioned span tags so there are a couple of important CSS rules required to make our jquery captions work.

The CSS below contains some notes to identify which ones we need:

#gallery {
margin-bottom: 20px;
width: 100%;  /* Use this & the overflow: hidden to clear the floated list items */
overflow: hidden;
}
#gallery li {
float: left;
margin: 0 3px 3px 0;
width: 214px;
height: 131px;
position: relative; /* Required for positioning of span tags */
color: #000;
}
#gallery li img {
padding: 6px;
background: #ececec;
border: 1px solid #ccc;
}
#gallery li h3 {
font: bold 11px Helvetica,Arial,sans-serif;
padding: 0;
margin: 0;
}
#gallery li span {
display: none;  /* Required to hide the captions */
font-size: 11px;
position: absolute; /* Required for positioning to overlay over image */
bottom: 7px;
left: 7px;
padding: 5px;
background: url(images/bg_white_trans.png) repeat;
width: 190px; /* Since we are using absolute positioning we need to set the width */
line-height: 1.2em;
}

With the above CSS we are hiding the span tags using display: none – this means that if the user does not have javascript enabled they will be unable to see the captions. If you want to change this you can set the span tags to not display using jQuery instead.

3. The jQuery Code – Fading Captions

Our jQuery is very simple and we can use the hover event, which allows us to add effects for both mouseover and mouseout:

$(document).ready(function() {
    $('#gallery li').hover(
        function(){$('span',this).fadeIn('slow');},
        function(){$('span',this).fadeOut('slow');
    });
});

4. The jQuery Code – Sliding Captions

One of the great things about jQuery is its built-in effects, so if we want to change the caption animation from fade in/out to sliding we just change the code as follows:

$(document).ready(function() {
    $('#gallery li').hover(
        function(){$('span',this).slideToggle('slow');},
        function(){$('span',this).slideToggle('slow');
    });
});

View jQuery Fading Caption DemoView jQuery Sliding Caption DemoDownload Source Files

This can be done in a couple of ways depending on how your links are structured. As well as giving the code for external links, this tutorial also shows a good example of how to combine and use jQuery selectors to filter:

Method 1 – Links With Complete URLs

If your site uses complete URLs, including the domain name, for all links we can identify the external links by selecting those that do not contain your domain name. For this we use a combination of both the not() and :contains() selectors:

$(document).ready(function($){
    $('a').not(':contains(http://www.designchemical.com)').click(function(){
        this.target = "_blank";
    });
});

The above code will therefore identify any link that does not contain http://www.designchemical.com and open this in a new browser window.

View Demo 1

Method 2 – Only External Links Use Complete URLs

If only external links use complete URLs we can just use contains() selector to identify those links with http or https:

$(document).ready(function($){
    $('a:contains(http)').click(function(){
        this.target = "_blank";
    });
});

View Demo 2

Our earlier post, Quick and Easy jQuery Image Swap has always been popular, so today we are going to use this code to create the ultimate jQuery image swap gallery with just 3 lines of code and 2 lines of CSS.

And here is the jQuery code:

$("#gallery li img").hover(function(){
	$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});

View The DemoDownload Source Files

A great example of how jQuery can be extremely simple and effective.

The Gallery HTML

All we need for the gallery is the initial, main image and an unordered list holding the image thumbnails.

<div id="gallery">
	<img src="images/gallery/img_1.jpg" alt="" id="main-img" />
	<ul>
	  <li><img src="images/gallery/thumb/img_1.jpg" alt="" /></li>
	  <li><img src="images/gallery/thumb/img_3.jpg" alt="" /></li>
	  <li><img src="images/gallery/thumb/img_4.jpg" alt="" /></li>
	  <li><img src="images/gallery/thumb/img_5.jpg" alt="" /></li>
	  <li><img src="images/gallery/thumb/img_6.jpg" alt="" /></li>
	  <li><img src="images/gallery/thumb/img_7.jpg" alt="" /></li>
	</ul>
</div>

Our thumbnail images have the same file name as the larger versions and these are put into a folder called “thumb”, which is in the same directory as the main images – this is important for our gallery code to work as the image URL is obtained by getting the thumbnail URL and removing the “/thumb”.

Styling The Gallery

Definitely not rocket science here – a total of 2 CSS rules:

#gallery li {
display: inline;
margin-right: 3px;
}
#gallery #main-img {
background: url(images/bg_img.png) no-repeat 0 0;
padding: 26px;
}

Adding Image Preload Function

Although the 3 lines of jQuery will work, we can make the gallery far better if we use our image preload function, from our previous tutorial.

The complete jQuery for the gallery plus preload:

$(document).ready(function() {
	// Image swap on hover
	$("#gallery li img").hover(function(){
		$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
	});
	// Image preload
	var imgSwap = [];
	 $("#gallery li img").each(function(){
		imgUrl = this.src.replace('thumb/', '');
		imgSwap.push(imgUrl);
	});
	$(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

And that’s basically all there is to it.

Although it may not have fancy fade/zoom/slide/etc effects and look particularly slick, it is a nice and easy example of how to apply the jQuery image swap on hover function.

You can obviously improve on the features but if you are looking for a simple solution without having to understand setting up and styling a complicated gallery plugin (and lets face it some of them are complicated!), then this is about as simple as it gets!

View The DemoDownload Source Files

Update the accordion plugin via your plugin admin panel or click to download version 2.3.

The jQuery Slick Menu plugin creates sticky, sliding menus from any custom WordPress menu available with WordPress 3.0. Using this plugin you can add links/menus for items that you want to highlight and always be available for your users.

The plugin can handle multiple slick menus on each page and the location of each widget menu can be easily configured using a combination of the “location” and “offset” options available in each slick menu’s widget control panel.

The menu plugin also includes the feature to open/close the sliding menu panel using external text links, which can be added to the content using shortcodes.

jQuery Slick Menu Demo

http://designchemical.com/lab/demo-wordpress-jquery-slick-menu-plugin/

Download The Plugin

Download JQuery Slick Menu Widget 1.3.2 (12,744)

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-vertical-mega-menu` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. In the widgets section, select the jQuery Slick Menu widget and add to one of your widget areas
4. Select one of the WP menus, set the required settings and save your widget

Useage

In order to use the slick menu plugin you will need the following:

A WordPress custom menu

Either use an existing menu or set one up via the menu option in WordPress admin.

Widget area

Either use an existing widget area in your WordPress theme or create a new widget area. The location is not critical since the plugin automatically removes the menu from the widget location in the page and sets it according to the location and offset settings.

For more information on how to add a new widget to your WordPress theme see our follow up WordPress tutorial – “Adding A Widget Area To Your Theme Files”.

Create Your Slick Menu

To create your sticky sliding menu go to the widget admin page and drag the “jQuery Slick Menu” widget to the desired widget area. Then select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

The widget has several settings, which can be used to customise your slick menu:

Tab Text

Enter the text that you would like to use for the jquery slick menu tab.

Location

This is the location of where you want the slide out menu to appear in the browser window. There are 6 different locations to choose from:

• Top Left – menu slides down from the top of the browser window
• Top Right
• Bottom Left – menu slides up from the bottom of the browser window
• Bottom Right
• Left – menu slides out from the left of the browser window
• Right – menu slides out from the right of the browser window

See the jquery slick menu demo page for examples.

Offset

The number of pixels that the slick menu is positioned from the edge of the browser window – .e.g if location is “Top-Left” and offset is 50 the menu will be positioned along the top, 50 pixels from the left of the browser edge.

Auto-Close Menu

Check this option to automatically close any open menus when the user clicks anywhere in the browser

Animation Speed

The speed at which the sliding menu will open/close

Skin

12 different sample skins are available to either use “out of the box” or to use as examples of css for styling your own slick menu. 4 of the skins match those used in the Slick Contact Forms Plugin.

Note: For the actual menu styling inside the slick box the menu will follow your theme file styles. The skins will style the slider tab and the slick box.

Shortcodes

The plugin also includes the ability to open and close the sliding menu using external links, embedded in your website content. These can be added to the page using shortcodes:

[dcsl-link]

Default link, which will toggle the sliding menu open/closed with the link text “Click Here”

[dcsl-link text="Open Menu"]

Toggle the sliding menu open/closed with the link text “Open Menu”

[dcsl-link action="open"]

Open the menu with the default link text “Click Here”

[dcsl-link action="close"]

Close the sliding menu tab with the default link text “Click Here”

[dcsl-link action="close" text="Close Sliding Menu"]

Close the menu tab with the link text “Close Sliding Menu”

Frequently Asked Questions

For a complete list of questions and answers please check out our jQuery Slick Menu Frequently Asked Questions section.

Many issues that can crop up with installing and using the plugin with different themes have been covered in our comments section. Please check previous comments for further information/tips.

Demo jQuery Slick Menu

http://designchemical.com/lab/demo-wordpress-jquery-slick-menu-plugin/

Download The Plugin

Download JQuery Slick Menu Widget 1.3.2 (12,744)

If you liked the slick menu widget you may also like:

WordPress Floating Menu Plugin

Create floating, sticky tabs with slide out menus.

WordPress Slick Contact Forms Plugin

Add sticky or floating, slide-out, customisable contact forms to any widget area.

Feedback

If you find this plugin useful please take the time to rate it at wordpress.org.

If you have any problems, suggestions on how we can make the plugin better or would like help creating a new skin for the slick menu let us know via comments, email or our online contact form.

Updates

Version 1.3.2 – 26th September 2011

• Update: update to jquery plugin jquery.slick.2.1.js which includes callback support

Version 1.3.1 – 13th September 2011

• Fixed: Validation error

Version 1.3 – 15th June 2011

• Added: Shortcodes for adding external text links to open and close the sliding menu panel
• Added: 4 additional skins to match the Slick Contact Forms WordPress Plugin.

Version 1.2 – 31st May 2011

• Fixed: Bug with positioning left/right in Safari

Screenshots

Widget in edit mode

Widget Options For Locations of Slick Menu Tab

For the tutorial we will create a search feature for our blog comments, although the same function can easily be applied to any elements by changing the selector.

The Search Box HTML

To capture the search text all we need is a simple input text field. To make the feature a little more exciting we are also going to show the number of results underneath the text input. For this we need to add a div tag with the ID – “filter-count”

<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <input type="text" class="text-input" id="filter" value="" />
        <span id="filter-count"></span>
    </fieldset>
</form>

Give the input field a unique ID since we will need this to capture the users text.

The Comments List

Our comments list is structured using an ordered list – e.g.

<ol class="commentlist">
  <li>Comment #1</li>
  <li>Comment #2</li>
</ol>

The jQuery Code

The jQuery for this feature is relatively easy and all we are doing is basically getting the input text value, checking this against our list of comments and hiding those that do not contain the text phrase. The count of the number of positive results is then displayed in our “filter-count” span tag.

Since this is a “live” search we will use the “keyup” event to initiate the function – the filtered comment list will therefore update with each character entered.

$(document).ready(function(){
	$("#filter").keyup(function(){

		// Retrieve the input field text and reset the count to zero
		var filter = $(this).val(), count = 0;

		// Loop through the comment list
		$(".commentlist li").each(function(){

			// If the list item does not contain the text phrase fade it out
			if ($(this).text().search(new RegExp(filter, "i")) < 0) {
				$(this).fadeOut();

			// Show the list item if the phrase matches and increase the count by 1
			} else {
				$(this).show();
				count++;
			}
		});

		// Update the count
		var numberItems = count;
		$("#filter-count").text("Number of Comments = "+count);
	});
});

This jQuery live search can be applied to any elements by changing the “.commentlist li” selector.

View jQuery Demo

The live text search is also used on all of our blog comments.

Mega menus are now very popular with improved useability over the standard flyout multi-level menus.

This WordPress plugin uses our jQuery Vertical Mega Menu plugin and allows you to very easily create vertical mega menus in your WordPress sidebar using the standard custom menus available with WordPress 3.0.

The plugin can handle multiple mega menus on each page and provides 3 different choices for flyout menu animation effect – No Animation (show/hide), “fade In” or “slide out”. The plugin also gives the option of selecting either left or right for the flyout menu animation direction and comes with 8 styled skins.

For horizontal mega menus refer to – WordPress Mega Menu Widget Plugin.

Demo jQuery Vertical Mega Menu

• View The jQuery Vertical Mega Menu Demo
• Example of Advanced Custom Styling for the Vertical Mega Menu (requires knowledge of CSS)

Download The Plugin

Download JQuery Vertical Mega Menu Widget 1.3.2 (24,998)

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-vertical-mega-menu` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. In the widgets section, select the jQuery vertical mega menu widget and add to one of your widget areas
4. Select one of the WP menus, set the required settings and save your widget

Useage

In order to use the vertical mega menu plugin you will need the following:

A WordPress custom menu

Either use an existing menu or set one up via the menu option in WordPress admin. Although the widget will work with any menu structure, for best results use 3 levels for the custom menu – see sample screenshot of custom menu structure below.

Widget area

Either use an existing widget area in your WordPress theme or create a new widget area in the required location. This is a vertical menu so it needs to be located in a sidebar or column.

For more information on how to add a new widget to your WordPress theme see our follow up WordPress tutorial – “Adding A Widget Area To Your Theme Files”.

Create Your Vertical Mega Menu

To create your vertical mega menu go to the widget admin page and drag the “jQuery Vertical Mega Menu” widget to the desired widget area. Then select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

The widget has several parameters that can be configured to help cutomise the mega menu:

Number Items Per Row

Select the number of sub-menu items to be shown on each row of the flyout mega menu.

Animation Effect

The effect used to display the flyout mega menu – options are; No Animation(i.e. show/hide), fade in or slide out. See the vertical mega menu demo page for examples.

Animation Direction

Choose the direction for the flyout menu – either left or right.

Animation Speed

The speed at which the dropdown menu will open/close

Skin

8 different sample skins are available to either use “out of the box” or give examples of css that can be used to style your own vertical mega menu

Frequently Asked Questions

Refer to our FAQ for the Vertical Mega Menu Plugin.

Many issues that can crop up with installing and using the plugin with different themes have been covered in our comments section. Please check previous comments for further information/tips.

Demo jQuery Vertical Mega Menu

• View The jQuery Vertical Mega Menu Demo
• Example of Advanced Custom Styling for the Vertical Mega Menu (requires knowledge of CSS)

Download The Plugin

Download JQuery Vertical Mega Menu Widget 1.3.2 (24,998)

Feedback

If you find this plugin useful please rate it at wordpress.org.

If you have any problems, suggestions on how we can make the plugin better or would like help creating a new skin for the vertical mega menu let us know via comments, email or our online contact form.

Updates

Version 1.3 – 19th Apr 2011

• Fixed: IE Invalid Argument bug in jQuery plugin

Version 1.2 – 15th Apr 2011

• Fixed: Sub menu positioning bug for bottom menu option

Version 1.1 – 23rd Mar 2011

• Fixed: IE7 bug with sub-menu widths

Screenshots

Widget in edit mode

Sample custom mega menu structure – For best results use 3 levels for the custom menu

Available menu skins

Example of open mega menu

For more information and tips on the best type of vertical menu plugin to use refer to – Choosing a Vertical Menu WordPress Plugin For Your Site.

Vertical mega menus offer better useability over standard flyout style menus with multiple levels.

Using this jQuery plugin you can create vertical mega menus from any standard nested HTML lists. The plugin includes several options, which can be configured for customising the menu:

• Multiple menus per page
• 3 animation effects for displaying the flyout menu – show/hide, fade in or slide out
• Set speed of animation
• Set number of sub menus per row
• Set the flyout menu to display on the right or left depending on the position of the menu

See the jQuery vertical mega menu plugin project pages for complete instructions, demos and to download the plugin including sample code.

Being able to extract the URL parameter with jQuery is obviously very useful and allows us to then use this value in our jQuery functions.

In our demo jQuery code we are going to take the URL parameter, insert this value into a text block and display on the screen.

The jQuery Code

$(document).ready(function() {

    //  Get the parameter value after the # symbol
    var url=document.URL.split('#')[1];
	if(url == undefined){
		url = '';
	}

    // If the parameter exists create the message and insert into our paragraph
    if(url != ''){
        var message = 'You clicked '+url;
        $('#parameter').text(message);
    }
});

And that’s all there is! Try out the demo to see it in action:

View jQuery Demo

The jquery plugin has several features, which make it very easy to create fully functional vertical accordion menus from standard HTML nested lists. Options built into the plugin include:

• Option to use either hover or click to activate menu
• Menu state can be saved between pages using cookies
• No limit on the number of nested levels
• Auto close the menu on mouseout for the hover option
• Select option to limit open sub-menus to only one at a time or allow the menu to fully expand
• And a new feature – ability to add a count of the number of child links to each parent menu item – offering users more information on the menu options available.

See the jQuery vertical accordion menu plugin project pages for complete instructions, demos and to download the plugin including sample code and skins.

See Random Password Demo Download the source code

To actually generate the random password we are going to use a nice little function from jQuery HowTo Blog – jQuery Password Generator.

The great thing about this function is that it allows us to set both the password length as well as the option to use special characters.

To use this function then we are going to create a form, add a “generate password” link, which will get the random password from the function and insert it into the form and add a second link, which the user clicks if they would like to use the password. If confirmed, we then insert the random password into the password field.

1. The HTML Form

Very simple form with just a user name and password field:

<form id="form-demo" class="styled" action="" method="post">
    <fieldset>
        <ol>
            <li>
                <label>User Name:</label>
                <input id="input-user" type="text" class="text-input" name="user" value="" />
            </li>
            <li>
                <label>Password:</label>
                <input id="input-password" type="password" class="text-input password" name="password" value="" />
                <a href="#" class="link-password" id="confirm">Use Password</a>
                <a href="#" class="link-password" id="generate">Generate Password</a>
            </li>
            <li id="random">
            </li>
            <li>
                <input class="btn-submit" type="submit" value="submit" name="submit" />
            </li>
        </ol>
    </fieldset>
</form>

As usual I have used an ordered list for the form structure but obviously you can use whatever style you prefer since its not critical for the password generator. Make sure though that the form has a tag with an id “random”, which we are going to use to display the password.

Give both links the same class name as we will use the same click function for both links. The “confirm” link can be hidden though since we only require this if the “generate” link is clicked. We can do this using CSS as opposed to jQuery:

#confirm {display: none;}

2. jQuery Random Password Function

Next we add the password generator function jquery code:

$.extend({
  password: function (length, special) {
    var iteration = 0;
    var password = "";
    var randomNumber;
    if(special == undefined){
        var special = false;
    }
    while(iteration < length){
        randomNumber = (Math.floor((Math.random() * 100)) % 94) + 33;
        if(!special){
            if ((randomNumber >=33) && (randomNumber <=47)) { continue; }
            if ((randomNumber >=58) && (randomNumber <=64)) { continue; }
            if ((randomNumber >=91) && (randomNumber <=96)) { continue; }
            if ((randomNumber >=123) && (randomNumber <=126)) { continue; }
        }
        iteration++;
        password += String.fromCharCode(randomNumber);
    }
    return password;
  }
});

For full details refer back to the authors post.

Now we add the jQuery code that will use the above function to generate and insert the new password:

$(document).ready(function() {

    $('.link-password').click(function(e){

        // First check which link was clicked
        linkId = $(this).attr('id');
        if (linkId == 'generate'){

            // If the generate link then create the password variable from the generator function
            password = $.password(12,true);

            // Empty the random tag then append the password and fade In
            $('#random').hide().append(password).fadeIn('slow');

            // Also fade in the confirm link
            $('#confirm').fadeIn('slow');
        } else {
            // If the confirm link is clicked then input the password into our form field
            $('#input-password').val(password);
            // remove password from the random tag
            $('#random').empty();
            // Hide the confirm link again
            $(this).hide();
        }
        e.preventDefault();
    });
});

The function is fairly simple. The hide() and fadeIn() isnt essential – you can just append the new password to the #random selector but we added the fadeIn to make it a little more ‘exciting’!

The final e.preventDefault() stops the browser jumping to the top of the screen when the generate and confirm links are clicked.

To change the password length set the first option in the password function to the required number of characters. The second option takes a boolean value and sets whether special characters are to be used in the password.

See Random Password Demo Download the source code

Drill down menus are perfect for arranging and managing complex nested menus in compact and fixed sized areas and provide excellent useability where standard drop down menus may be too awkward.

The plugin converts standard hierarchical nested HTML into drill down (iPod style) menus. Features of the drill down menu plugin include – saved state using cookies, add count of total number of child links to each menu option and offers 3 different ways to navigate the menu

Check out our jQuery Drill Down Menu project pages for more information, drill down menu examples and to download the plugin.

Drill down menus (similar to the iPod style menu) offer an excellent way of managing and organising large, complicated hierarchical menus in a small, vertical, compact and fixed-sized area. For a change to the standard menu styles they also offer a great alternative to accordion style and drop down menus.

This WordPress plugin creates a widget, which allows you to create a drill down menu from any WordPress custom menu using jQuery.

Features include – handles multiple levels, saved state using cookies and multiple menus on the same page. facilitate useability the drill down menu offers the option to have a count of the number of links for each level.

The drill down menu also offers 3 different ways to navigate:

• Using a breadcrumb style menu at the top of the drill down menu
• A back button to return to previous options
• Selecting previous link headers, which are fixed at the top of the menu so the user can see the path taken

This plugin uses the jquery cookie plugin by Klaus Hartl for saving the menu state between pages.

Demo jQuery Drill Down iPod Menu

http://www.designchemical.com/lab/demo-wordpress-jquery-drill-down-ipod-menu-plugin/

Download The Plugin

Download JQuery Drill Down Ipod Menu Widget 1.3.1 (8,961)

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-drill-down-ipod-menu` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. In the widgets section, select the ‘jQuery Drill Down iPod Menu’ widget and add to one of your widget areas
4. Select one of the WP menus, set the required settings and save your widget

Useage

In order to use this plugin you will need the following:

A WordPress custom menu

Either use an existing menu or set one up via the menu option in WordPress admin. The drill down menu is excellent for handling multiple levels, which would be difficult to use with drop down or accordion menus.

Widget area

Either use an existing widget area in your WordPress theme or create a new widget area in the required location. This is a vertical menu so it needs to be located appropriately. The drill down menu takes up a fixed size and is very compact.

For more information on how to add a new widget to your WordPress theme see our follow up WordPress tutorial – “Adding A Widget Area To Your Theme Files”.

Create Your Drill Down iPod Menu

To create your drill down menu go to the widget admin page and drag the “jQuery Drill Down iPod Menu” widget to the desired widget area. Then select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

The widget has several parameters that can be configured to help cutomise the drill down menu:

Save menu state (uses cookies)

Selecting this will allow the menu to remember its open/close state when browsing to a new page.

Show counter

adds the number of lower level links next to each heading

Show header

If not selected the current selected menu option will be shown as a heading above the menu options

Link Type

3 options, which control how the user navigates the menu:

1. Breadcrumb – previous selected menu items are displayed as breadcrumbs at the top of the menu. Clicking one of these breadcrumb links will take the user back to that level
2. Back Link – the previous menu option is displayed as a back link above the menu
3. Header Link – Previously selected links stay fixed above the menu

Default Header Text

The text that is shown in the header when the menu first initialises

Reset Link Text

The text that is shown for the header link that will reset the menu

Animation Speed

speed of the sliding effect

Skin

Several sample skins are available to give examples of css that can be used to style your own ipod drill down menu

Frequently Asked Questions

Check out our FAQ for the jQuery Drill Down Menu Plugin.

Many issues that can crop up with installing and using the plugin with different themes have been covered in our comments section. Please check previous comments for further information/tips.

Demo jQuery Drill Down iPod Menu

http://www.designchemical.com/lab/demo-wordpress-jquery-drill-down-ipod-menu-plugin/

Download The Plugin

Download JQuery Drill Down Ipod Menu Widget 1.3.1 (8,961)

Feedback

If you find this plugin useful please rate it at wordpress.org.

If you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.

Updates

Version 1.3.1 – 21st June 2011

• Fixed: IE7 bug.

Version 1.3 – 25th May 2011

• Fixed: Bug with save menu state option.

Version 1.2 – 23rd May 2011

• Update: jQuery Drill Down Menu plugin includes check to see if cookie plugin exists.

Screenshots

Widget in edit mode

For more information and tips on the best type of vertical menu plugin to use refer to – Choosing a Vertical Menu WordPress Plugin For Your Site.

The plugin will create drop down mega menus from any standard nested HTML lists.

Full details on how to use the plugin can be found at – jQuery Mega Drop Down Menu Plugin.

Drop down mega menus are becoming more popular as an alternative to standard drop down menus.

This WordPress menu plugin will allow you to quickly and easily create drop down mega menus from any WordPress custom menu. The plugin can handle multiple mega menus per page, offers a choice of animation effects (fade or slide), the option to set the drop down sub-menu to full width plus the choice to activate the menu using either hover or click.

For Vertical Mega Menus

If you are looking for a vertical version of the mega menu see our WordPress plugin –
jQuery Vertical Mega Menu Widget.

Download jQuery Mega Menu

Download JQuery Mega Menu Widget 1.3.8 (36,957)

jQuery Mega Menu Demos

1. Mega menus using plugin skins
2. Example mega menu with more advanced custom styling

Installation

1. Upload the plugin through ‘Plugins > Add New > Upload’ interface or upload ‘jquery-mega-menu’ folder to the ‘/wp-content/plugins/’ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. In the widgets section, select the jQuery mega menu widget and add to one of your widget areas
4. Select one of the WP menus, set the required settings and save your widget

Useage

In order to use this plugin you will need the following:

A WordPress custom menu

Either use an existing menu or set one up via the menu option in WordPress admin. Although the widget will work with any menu structure, for best results use 3 levels for the custom menu – see sample screenshot of custom menu structure below.

Widget area

Either use an existing widget area in your WordPress theme or create a new widget area in the required location. This is a horizontal menu so it needs to be located where it can expand to accomodate all of the top level items.

For more information on how to add a new widget to your WordPress theme see our follow up WordPress tutorial – “Adding A Widget Area To Your Theme Files”.

Create Your Mega Menu

To create your mega menu go to the widget admin page and drag the “jQuery Mega Menu” widget to the desired widget area. Then select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

The widget has several parameters that can be configured to help cutomise the mega menu:

Hover/Click

Select whether you would like the menu to activate using hover or click.

Number Items Per Row

Select the number of sub-menu items to be shown on each row of the mega menu.

Skin

Several sample skins are available to give examples of css that can be used to style your own mega menu

Animation Effect

The effect used to display the sub-menus – options are; fade in or slide down. See the mega menu demo page for examples.

Animation Speed

The speed at which the dropdown menu will open/close. Selecting the “No Animation” option will remove both the fade in/out and slide effects.

Set Sub Menu To Full Width

If checked, the drop down mega sub menu width will be 100%

Frequently Asked Questions

Please refer to our FAQ pages for the jQuery Mega Menu Plugin for a complete list of questions and answers.

Many issues that can crop up with installing and using the plugin with different themes have also been covered in our comments section. Please also check previous comments for further information/tips.

Demo jQuery Mega Menu

• Mega menus using plugin skins
• More advanced custom styling

In addition the main navigation used on this website also uses the jQuery mega menu plugin.

Download The Plugin

Download JQuery Mega Menu Widget 1.3.8 (36,957)

Feedback

If you find this plugin useful please rate it at wordpress.org.

If you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.

Updates

Version 1.3.8 – 12th November 2011

• Updated: jquery.dcmegamenu.1.3.4.js and switched to minified version

Version 1.3.7 – 14th Augut 2011

• Fixed: Bug with default values

Version 1.3.6 – 27th July 2011

• Added: Full width option for mega menu
• Updated: jquery.dcmegamenu.1.3.3.js

Version 1.3.5 – 15th May 2011

• Added: Ability to turn off animation effects by selecting “No Animation” in speed menu options

Version 1.3.3 – 8th Apr 2011

• Fixed: IE7 bug due to jQuery initialisation code

Version 1.3.2 – 27th Mar 2011

• Added : Option to use either hover or click events

Version 1.3.1 – 15th Mar 2011

• Added : Mega menu automatically adjusts right alignment to stay within menu boundary

Version 1.3 – 7th Mar 2011

• Added : Ability to select either fade in or slide down animation effects

Screenshots

Widget in edit mode

Sample custom menu structure – For best results use 3 levels for the custom menu

Sample mega menu skins

The Quick and Easy jQuery Image Swap function offers a very simple way of implementing image change on hover for buttons, links, etc (see earlier post for more info). One problem however is that the first time the active image is called for a page there tends to be a delay as the new image loads.

One way to overcome this problem and ensure that the image swaps are more responsive is to preload all active versions of the images when the page downloads.

There are 2 parts to our jQuery code:

• First we create our preload function, which will take an array of image file names and preload them when the page loads.
• Then we create a function to create the image array by selecting all relevant images – i.e. the ones to be used in our image swap function. After selecting the images we then change the file names to those of the active images – i.e. swap “_off” for “_on” and store them in the array. This array can then be passed to the preload function.

1. jQuery Code – Preload Function

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

2. jQuery Code To Create The Image Array

$(document).ready(function() {
    // Declare the array variable
    var imgSwap = [];
    // Select all images used in the image swap function - in our case class "img-swap"
    $(".img-swap").each(function(){
        // Loop through all images which are used in our image swap function
        // Get the file name of the active images to be loaded by replacing _off with _on
        imgUrl = this.src.replace("_off","_on");
        // Store the file name in our array
        imgSwap.push(imgUrl);
    });
    // Pass the array to our preload function
    $(imgSwap).preload();
});

That’s basically it … a few lines of code, which will greatly enhance the performance of the image swap fuction.

In the following demo you can see the difference between a set of buttons using preload vs ones loading on hover:

Check Out The Preload Demo Download Source Code

View Sorting Demo

Sorting An Unordered List

The HTML

Here we have a simple unordered list of country names. To initiate the sorting I have added 2 links – one for sorting A-Z and the other Z-A.

<p>Sort: <a href="#" class="link-sort-list asc">A-Z</a> <a href="#" class="link-sort-list desc">Z-A</a></p>
<ul id="sort-list">
  <li>Thailand</li>
  <li>Chad</li>
  <li>Liberia</li>
  <li>Guyana</li>
  <li>United States of America</li>
  <li>Papua New Guinea</li>
  <li>Singapore</li>
  <li>Ethiopia</li>
  <li>United Kingdom</li>
  <li>Australia</li>
  <li>Zambia</li>
  <li>Mauritius</li>
</ul>

We have given the list an ID of “sort-list” so we can identify it in our jQuery code and the links a class of “link-sort-list” as well as “asc” or “desc”.

The jQuery Code

$('.link-sort-list').click(function(e) {
    var $sort = this;
    var $list = $('#sort-list');
    var $listLi = $('li',$list);
    $listLi.sort(function(a, b){
        var keyA = $(a).text();
        var keyB = $(b).text();
        if($($sort).hasClass('asc')){
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA < keyB) ? 1 : 0;
        }
    });
    $.each($listLi, function(index, row){
        $list.append(row);
    });
    e.preventDefault();
});

In the above code we first declare the variables – the clicked link, the unordered list and the list items. We then use the standard javascript function to sort the items based on the text within the list tags.

The above function checks if the link that was clicked has the class “asc” or “desc” and reorders them accordingly.

Using jQuery we then append each item row to the unordered list to rebuild in the correct order.

At the end we have then added the preventDefault() function, which will stop the page scrolling back to the top of the screen when the sort links are clicked.

Sorting A HTML Table

Sorting a table is slightly different since we need to identfiy which cell’s text to use for sorting.

The HTML

<table id="sort-table" cellpadding="5" cellspacing="2" border="0">
  <thead>
    <tr>
      <th align="left">Sort: <a href="#" class="link-sort-table asc">A-Z</a> <a href="#" class="link-sort-table desc">Z-A</a></th>
      <th>&amp;nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Thailand</td>
      <td align="right">45</td>
    </tr>
    <tr>
      <td>Chad</td>
      <td align="right">245</td>
    </tr>
    <tr>
      <td>Liberia</td>
      <td align="right">543</td>
    </tr>
    <tr>
      <td>Guyana</td>
      <td align="right">67</td>
    </tr>
    <tr>
      <td>United States of America</td>
      <td align="right">22</td>
    </tr>
    <tr>
      <td>Papua New Guinea</td>
      <td align="right">7753</td>
    </tr>
    <tr>
      <td>Singapore</td>
      <td align="right">33</td>
    </tr>
    <tr>
      <td>Ethiopia</td>
      <td align="right">2224</td>
    </tr>
    <tr>
      <td>United Kingdom</td>
      <td align="right">67</td>
    </tr>
    <tr>
      <td>Australia</td>
      <td align="right">22</td>
    </tr>
    <tr>
      <td>Zambia</td>
      <td align="right">178</td>
    </tr>
    <tr>
      <td>Mauritius</td>
      <td align="right">778</td>
    </tr>
  </tbody>
 </table>

The jQuery Code

$('.link-sort-table').click(function(e) {
    var $sort = this;
    var $table = $('#sort-table');
    var $rows = $('tbody > tr',$table);
    $rows.sort(function(a, b){
        var keyA = $('td:eq(0)',a).text();
        var keyB = $('td:eq(0)',b).text();
        if($($sort).hasClass('asc')){
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA < keyB) ? 1 : 0;
        }
    });
    $.each($rows, function(index, row){
      $table.append(row);
    });
    e.preventDefault();
});

The main difference in the above code is that we select the text in the first cell of each row within tbody to be used for sorting.

View Sorting Demo

This plugin allows you to easily create multiple jquery vertical accordion menus using the custom menus function, available in WordPress 3.0.

The accordion menu can handle any number of sub-menus and features include the option to select either “hover” or “click” to activate the menu, add a count showing the number of links under each menu item & auto-expand menu based on the current page.

Demo Accordion Menu

Demo – WordPress Vertical Accordion Menu Plugin

Download The Plugin

Download JQuery Accordion Menu Widget 3.1 (37,147)

Installation

1. Upload the plugin through ‘Plugins > Add New > Upload’ interface or upload ‘jquery-vertical-accordion-menu’ folder to the ‘/wp-content/plugins/’ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. If you dont yet have a custom menu, create one in the Menu area.
4. In the widgets section, select the jQuery accordion menu widget and add to one of your widget areas
5. Select one of the available custom menus from the dropdown list

Your theme must be able to support custom menus

Useage

Accordion menus can be added to your site using either widget areas or shortcodes (available starting version 3.0)

Before you can configure the accordion menu you require a WordPress custom menu – either use an existing menu or set one up via the menu option in WordPress admin.

Note: that in order for the accordion effect to work the menu must have at least 2 levels.

Create Your Vertical Accordion Menu Using Widgets

Either use an existing widget in your WordPress theme or create a new widget area in the required location.

For more information on how to add a new widget to your WordPress theme see our follow up WordPress tutorial – “Adding A Widget Area To Your Theme Files”.

To create your accordion menu drag the jQuery Accordion Menu widget to the widget area and select your custom menu from the drop down menu.

Configuring Your Accordion Menu Widget

The widget has several parameters that can be configured to help cutomise the vertical accordion menu:

Click/Hover

Selects the event type that will trigger the menu to open/close

Note: care should be taken when selecting the hover event as this may impact useability – adding a hover delay and reducing the animation speed may help reduce problems with useability

Auto-close open menus

If checked this will allow only one menu item to be expanded at any time. Clicking on a new menu item will automatically close the previous one.

Save menu state (uses cookies)

Selecting this will allow the menu to remember its open/close state when browsing to a new page.

Auto Expand Based on Current Page/Item

If selected the menu will use the inherent WordPress menu system for identifying the users current page and automatically expand the sub-menus. Useful if users browse to pages via other links.

Disable parent links

If selected, any menu items that have child elements will have their links disabled and will only open/close their relevant sub-menus. Do not select this if you want the user to still be able to browse to that item’s page.

Close menu (hover only)

If checked the menu will automatically fully close after 1 second when the mouse moves off the menu – only available if event type is “hover”

Show Count

Check this box to display a count of the number of links under each menu heading.

Class Menu

If you want to create your own skin and have more control over the menu styling you can enter your own CSS class name. If you are unsure about this setting or want to use the default WordPress class (menu) leave this field blank.

Class Disable

Input the CSS class of any parent menu items that you want to disable – e.g. if you add a custom CSS class of “menu-disable” in the WordPress menu editor page to a menu link that you dont want open/close then enter “menu-disable” in this field.

Leave the field blank if you want all menu items to use the accordion features.

Hover delay

This setting adds a delay to the hover event to help prevent the menu opening/closing accidentally. A higher number means the cursor must stop moving for longer before the menu action will trigger.

Animation Speed

The speed at which the menu will open/close

Skin

Several sample skins are available to give examples of css that can be used to style your accordion menu.

Create Your Vertical Accordion Menu Using Shortcodes

The minimum requirement for adding a menu using a shortcode is to include the name of the menu that you want to use for the vertical accordion – the name must match one of the menus created in the WordPress menu admin page.

To add a menu using shortcodes use the following code:

[dcwp-jquery-accordion menu="Test Menu"]

The above shortcode would add the menu “Test Menu” with the default accordion settings (see below)/

Optional shortcode parameters for customising the menu (refer to widget settings above for information):

• event – click/hover (default = click)
• auto_close – true/false (default = false)
• save – true/false (default = false)
• expand – true/false (default = false)
• disable – true/false (default = false)
• close – true/false (default = false)
• count – true/false (default = false)
• menu_class – optional (default = menu)
• disable_class – optional (no default)
• hover – 600
• animation – slow/normal/fast (default = slow)
• skin – black/blue/clean/demo/graphite/grey (default = No Theme)

Example of custom menu using shortcodes

To add an accordion menu using the “hover” event, save state on, parent links disabled, include count of child links and auto-expand to show current page:

[dcwp-jquery-accordion menu="Test Menu" event="hover" save="true" disable="true" count="true" expand="true"]

Using shortcodes in template files

See FAQ – Adding an accordion menu using shortcodes to your template files.

Creating A Custom Skin

For a blank CSS template and more information on how to create a custom skin for this plugin see FAQ – Creating a custom skin for the wordpress jQuery vertical accordion menu plugin.

Frequently Asked Questions

Please refer to our FAQ pages for the jQuery Verticall Accordion Menu Plugin for a complete list of questions and answers.

Many issues that can crop up with installing and using the plugin with different themes have also been covered in our comments section. Please also check previous comments for further information/tips.

Demo Accordion Menu

Demo – WordPress Vertical Accordion Menu Plugin

Download The Plugin

Download JQuery Accordion Menu Widget 3.1 (37,147)

Feedback

If you find this plugin useful please rate it at wordpress.org.

If you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.

Updates

Version 3.1 – 18th January 2012

• Fixed: Auto-close bug

Version 2.6 – 19th June 2011

• Added: Ability to set menu CSS Class – default “menu”
• Added: Ability to disable parent menu items using a CSS class
• Update: Revision to auto-expand system
• Update: jquery plugin version – jquery.dcjqaccordion.2.8.js

Version 2.5.4 – 25th May 2011

• Fixed: Bug with save state option.

Version 2.5.3 – 23rd May 2011

• Update: jQuery Accordion Menu plugin includes check to see if cookie plugin exists.

Version 2.5.2 – 20th May 2011

• Update: Using updated jQuery Accordion Menu plugin – fixed bug with count.

Version 2.5 – 7th Apr 2011

• Added: Auto-expand no longer requires the “Save State” option to be selected.

Version 2.4 – 24th Mar 2011

• Added: Auto-expand option for menu to expand sub-menus based on users current page.

Version 2.3 – 21st Mar 2011

• Edit: Cufon fonts can now be used in the accordion menu

Version 2.2 – 16th Feb 2011

• Added: Option to show count of number of child links
• Edit: Fixed cookie problem with multiple menus

Version 2.0 – 26th Feb 2011

• Added : Ability to select either hover or click to activate menu
• Added : Hover delay setting for hover event
• Added : Close menu option for hover event

Version 1.1 – 20th Feb 2011

• Fixed : Duplicate ID with themes adding ID to widget container
• Fixed : Set cookie path

Screenshots

Widget in edit mode

Sample vertical accordion menus

For alternatives to the vertical accordion menu check out our Vertical Mega Menu Plugin or the Drill Down iPod Style Menu Plugin. For more information and tips on the best type of vertical menu plugin to use refer to – Choosing a Vertical Menu WordPress Plugin For Your Site.