Get the prettySociable Plugin

To implement this functionality, you will need the prettySociable jQuery plugin written by Stéphane Caron. Download and extract the plugin, it contains everything you need to get up and running with drag n share.

Include the Required Files

To add drag n share to a page, add reference to jquery and prettySociable in your page’s head tag. The plugin folder also includes images and css folders in addition to js folder. You’ll need them too as css folder contains styles necessary for drag n share elements and images folder contains icons for various social networks.
Here’s the complete code you need to add into the head tag.

<link rel="stylesheet" href="css/prettySociable.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<!--[if lte IE 6]><script src="js/DD_belatedPNG.js" type="text/javascript" charset="utf-8"></script><![endif]-->
<script src="js/jquery.prettySociable.js" type="text/javascript" charset="utf-8"></script>

The js folder also includes DD_belatedPNG.js which is used to fix PNG transparency issues in IE6 or older. You need to include that too.

Define Draggable Links

Now to add drag n share to your web page, add an anchor tag <a href="#" > with another attribute rel="prettySociable".

Initialize prettySociable

After you have added the rel attribute, you need to initialize the script. Add this single line of code, just above the </body>

<script type="text/javascript" charset="utf-8">
	// Init prettySociable
	$.prettySociable();
</script>

Check out your page in browser and you should get drag to share functionality working nicely.

Customizing the Default Settings

Customizing the Shared Information

When you add rel="prettySociable" on an anchor tag with its href="#", this will share the URL of the current web page and use the title and meta description in head tag to display the tooltip on drag.

But if you need to share a different URL instead of the current web page, specify a URL in the href attribute. Also you can customize the tooltip information which is shown on dragging. You can specify custom title and description in the rel attribute in this way.
rel="prettySociable;title:custom title;excerpt:custom excerpt;"

Customizing the Sharing Panel

By default prettySociable supports eight social networks but you can customize the social networks and their icons to your requirement. For that you’ll need to pass a settings object to prettySociable function.

Here’s the complete settings object

$.prettySociable({
				animationSpeed: 'fast', /* fast/slow/normal */
				opacity: 0.90, /* Value between 0 and 1 */
				share_label: 'Drag to share', /* Text displayed when a user rollover an item */
				share_on_label: 'Share on ', /* Text displayed when a user rollover a website to share */
				hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettySociable */
				hover_padding: 0,
				websites: {
					facebook : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'Facebook',
						'url': 'http://www.facebook.com/share.php?u=',
						'icon':'images/prettySociable/large_icons/facebook.png',
						'sizes':{'width':70,'height':70}
					},
					twitter : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'Twitter',
						'url': 'http://twitter.com/home?status=',
						'icon':'images/prettySociable/large_icons/twitter.png',
						'sizes':{'width':70,'height':70}
					},
					delicious : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'Delicious',
						'url': 'http://del.icio.us/post?url=',
						'icon':'images/prettySociable/large_icons/delicious.png',
						'sizes':{'width':70,'height':70}
					},
					digg : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'Digg',
						'url': 'http://digg.com/submit?phase=2&url=',
						'icon':'images/prettySociable/large_icons/digg.png',
						'sizes':{'width':70,'height':70}
					}
					//add more social networks here
				},
				tooltip: {
						offsetTop:0,
						offsetLeft: 10
					},
				popup: {
					width: 900,
					height: 500
				},
				callback: function(){} /* Called when prettySociable is closed */
			});

The settings object is self explaining. You can specify which websites to use and also the icons to use for each website in the websites parameter.

You can enhance this drag n share script even further by using a shortened URL in the anchor tag’s href attribute.

View Demo or Download prettySociable jQuery plugin.

P.S.: To get this script to work correctly in IE, you will need to set margin and padding values in the style-sheet for anchor elements which are draggable.

Related posts:

1. Collapsible Drag & Drop Panels Using jQuery
2. AJAX Multiple File Upload Form Using jQuery
3. Saving State For Collapsible Drag Drop Panels

1. Custom Styled Radio Buttons and Checkboxes

It is always hard and next to impossible to customize style of radio buttons and checkboxes. But using jQuery we can easily customize the radio buttons and check boxes to make them more user friendly. Here are two different ways to stylize them:

Custom Designed Checkbox and Radio Buttons


Radio Button and Checkbox replacement.

2. Setting Equal Heights with jQuery

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. Here’s the jQuery way to set equal height of multiple elements using the equalHeights plugin. With this plugin, you can make equal height columns with just a single line of code.

$("someselector").equalHeights();

3. Styling Select Elements

<select> is another HTML element that is not easy to customize using CSS, but with jQuery at our disposal, we can certainly make them look cool and usable.

jQuery UI Selectmenu
This is a plugin for jQuery UI that lets you customize select elements easily.

jQuery image dropdown

4. Current Field Highlighting in Forms

It is always good to provide a visual feedback to users when they perform any action while using a web form. Highlighting the field in which user is currently typing is one of the usability features you should add to web forms. Though, this can be achieved using the :focus pseudo selector in CSS. But this technique of highlighting the label along with the selected input field from CSS Tricks provides good user experience.

5. Fix IE Overflow problem

Internet Explorer has this rather strange problem, when overflow is set to auto or scroll, the scrollbar shows up inside the width of element. This is fine when you have multiple lines of text within that element, but if you just have a single line of text, then scrollbar would cover that and it won’t be visible. This jQuery technique from Remy Sharp will fix that IE bug.

6. Block Hover Effect

Creating block hover effect with CSS using display:block is possible but when you have some other content inside a box alongside the link, then it is not possible to create a semantically correct block hover effect using CSS. Here’s a nice jQuery plugin – Bigger Link to achieve that.

7. Rounded Corners

CSS Rounded corners are now supported by most browsers like Firefox, Safari but some browsers like IE do not support them. For those unsupported browsers, you can use jQuery Curvy Corners.

8. Attractive Menus with jQuery

Creating a CSS based navigational menu that displays hover state separately is not difficult, but with a little amount of jQuery you can achieve some really nice effects. Check out these two example menus that use jQuery to produce a very subtle hover effect.
Create an Attractive jQuery Menu with Fade In and Fade Out Effect

Animated Menu Using jQuery

9. Creating a Floating HTML Menu Using jQuery and CSS

You can fix the position of an element using the position:fixed property but that won’t provide as rich user experience as Live floating menu using jQuery. It creates a floating menu on the page and as you scroll down, menu also follows your mouse scroll.

10. Splitting Content over multiple columns

Ever thought of splitting text of a page into multiple columns just like newspaper. With CSS, this will take a lot of effort but this Columnizer jQuery plugin will do all the effort for you to split content into multiple columns with a single line of code.

11. Semantic Blockquotes with jQuery

If you use blockquotes in your design to highlight important points of an article, then you also duplicate the content within blockquotes as it is also there in the article. Here’s a nice jquery way to do this leaving the duplication of content to jQuery by specifying which content to show as blockquote.

12. Text Shadows

CSS3 includes a nice property of text-shadow that allows you to set a text-shadow generate nice text-effects without using any images. But IE does not support this feature till date. Text-shadow in IE adds this support to Internet Explorer using jQuery.

13. Border Image

CSS3 lets you use images as border backgrounds in addition to just colors. But since it is not supported my many browsers, you’ll need jQuery to come to rescue. jQuery.borderimage provides cross-browser support for border-image property.

14. Opacity

Opacity is one such CSS property which is supported by most browsers including IE but each has a different way to implement it, though CSS3 standard defines a property opacity to be used for setting opacity of elements, but you end up writing many lines of CSS code just to make opacity cross-browser compatible. jQuery can make this easier too.

$("someselectoe").css("opacity", 0.5);

15. Super CSS Selector Support with jQuery

CSS 2.1 supports various types of selectors including :focus, :first-child, nth-child but not all browsers(IE!) support these selectors. but with Super CSS Selector, you can be sure to have support for those selectors even in IE.

Related posts:

1. 21 Amazing CSS Techniques You Should Know
2. Text Shadow Property in CSS3
3. 25 Incredibly Useful CSS Tricks You Should Know

Set up the database

For storing poll questions, options and votes, we’ll be using a MySQL database. Here is the database structure required.

There are three tables:

• questions table stores the poll questions.
• options table stores the options of a particular question.
• votes table stores information about each vote cast by the user.

The required SQL code with sample data is provided in source code(below).

The PHP Code

Displaying the poll form

We’ll display the most recent poll question from the database and allow the user to vote for it. Here’s the required PHP code to generate poll form for latest poll question.

$conn=mysql_connect('localhost', 'root', 'password') or die("Can't connect to mysql host");
mysql_select_db("polls");
$query=mysql_query("SELECT id, ques FROM questions ORDER BY id DESC LIMIT 1");
while($row=mysql_fetch_assoc($query)){
	//display question
	echo "<p class=\"pollques\" >".$row["ques"]."</p>";
	$poll_id=$row["id"];
}
//display options with radio buttons
$query=mysql_query("SELECT id, value FROM options WHERE ques_id=$poll_id");
if(mysql_num_rows($query)){
		echo '<div id="formcontainer" ><form method="post" id="pollform" action="'.$_SERVER['PHP_SELF'].'" >';
		echo '<input type="hidden" name="pollid" value="'.$poll_id.'" />';
		while($row=mysql_fetch_assoc($query)){
			echo '<p><input type="radio" name="poll" value="'.$row['id'].'" id="option-'.$row['id'].'" />
			<label for="option-'.$row['id'].'" >'.$row['value'].'</label></p>';
		}
		echo '<p><input type="submit"  value="Submit" /></p></form>';
}

Processing the Submitted Vote

When user selects an answer and submits the form, we add the information to the votes table about the option selected and also set a cookie in user’s browser to identify that he has voted for the poll.

$query=mysql_query("SELECT * FROM options WHERE id='".intval($_POST["poll"])."'");
if(mysql_num_rows($query)){
	$query="INSERT INTO votes(option_id, voted_on, ip) VALUES('".$_POST["poll"]."', '".date('Y-m-d H:i:s')."', '".$_SERVER['REMOTE_ADDR']."')";
	if(mysql_query($query))
	{
		//Vote added to database
		setcookie("voted".$_POST['pollid'], 'yes', time()+86400*300);
	}
	else
		echo "There was some error processing the query: ".mysql_error();
}

In this case we first check to see if the answer to poll question has been provided and whether the user hasnot already voted(code omitted for simplicity) the selected option is there in database or not. Also here we are using intval() function to make sure only integer value for selected option passes through. After checking the information, the user vote is added to the votes table.

Displaying the Results

Once the user has voted, it’s time to display the results to him. We’ll be using the easy way out to display the result using CSS. Here’s the code for that.

$query=mysql_query("SELECT COUNT(*) as totalvotes FROM votes WHERE option_id IN(SELECT id FROM options WHERE ques_id='$poll_id')");
while($row=mysql_fetch_assoc($query))
	$total=$row['totalvotes'];
$query=mysql_query("SELECT options.id, options.value, COUNT(*) as votes FROM votes, options WHERE votes.option_id=options.id AND votes.option_id IN(SELECT id FROM options WHERE ques_id='$poll_id') GROUP BY votes.option_id");
while($row=mysql_fetch_assoc($query)){
	$percent=round(($row['votes']*100)/$total);
	echo '<div class="option" ><p>'.$row['value'].' (<em>'.$percent.'%, '.$row['votes'].' votes</em>)</p>';
	echo '<div class="bar ';
	if($_POST['poll']==$row['id']) echo ' yourvote';
	echo '" style="width: '.$percent.'%; " ></div></div>';
}
echo '<p>Total Votes: '.$total.'</p>';

To display the results from the information we have in votes table, we will use a GROUP BY query to find out votes per option and then set the width of display bar based on percentage of votes each option received.

All the PHP code is in poll.php file.

HTML Structure

HTML structure is quite simple as jQuery will do the heavy lifting. We only need to define a container that will hold the poll form or display the results.

<div id="container" >
	<h1>User Poll</h1>
	<div id="pollcontainer" >
	</div>
	<p id="loader" >Loading...</p>
</div>

The JavaScript Code

Loading the Poll Form

On page load, we will load and display the poll form to user and if user has already voted, then results will be displayed.

var loader=$('#loader');
	var pollcontainer=$('#pollcontainer');
	loader.fadeIn();
	//Load the poll form
	$.get('poll.php', '', function(data, status){
		pollcontainer.html(data);
		animateResults(pollcontainer);
		pollcontainer.find('#viewresult').click(function(){
			//if user wants to see result
			loader.fadeIn();
			$.get('poll.php', 'result=1', function(data,status){
				pollcontainer.fadeOut(1000, function(){
					$(this).html(data);
					animateResults(this);
				});
				loader.fadeOut();
			});
			//prevent default behavior
			return false;
		})

Processing User Vote

To process the user vote, we first check to see if user has selected one of the options and then post the form data to poll.php and then display the results to the user in a nice animated way using the function animateResults.

('#pollform').submit(function(){
			var selected_val=$(this).find('input[name=poll]:checked').val();
			if(selected_val!=''){
				//post data only if a value is selected
				loader.fadeIn();
				$.post('poll.php', $(this).serialize(), function(data, status){
					$('#formcontainer').fadeOut(100, function(){
						$(this).html(data);
						animateResults(this);
						loader.fadeOut();
					});
				});
			}
			//prevent form default behavior
			return false;
		});

Download the complete source code and try it out for yourself.

Remember to set up database and tables using polls.sql file provided in source code and update database information in the poll.php file before trying out.

Note: In this tutorial, i have only covered the user interface part of the user poll script. You’ll have to code the user interface for creating new polls or manually have to add questions and options in the tables. The sample database file provided with the source code contains a sample poll question along with some sample data.

Related posts:

1. AJAX Multiple File Upload Form Using jQuery
2. 25 New & Useful PHP Techniques & Tutorials
3. Integrate Customized reCaptcha in your PHP Application

I earlier posted about Collapsible Drag and Drop Panels using jQuery where many of you asked about how to save the state of panels and retrieve them when user loads the page again. Here’s the complete solution to that problem using MySQL database to store the state of panels. Also, there were some browser dependent problems which i have tried to remove, let me know if you still encounter any problem implementing.

You can download the source code and try it for yourself.

Creating the Database

The database table widgets consists of 5 columns:

• id stores the id of panel.
• column_id is the column number to which panel belongs.
• sort_no is the order of panel within column.
• collapsed stores information about whether the panel is collapsed or not.
• title is the title of the widget.

You can of course add more columns to this database but first four are critical to working of the script. You can add more columns like RSS feed URL that you want to display in that panel or its content etc. To keep things simple and easy to understand, i have skipped that.
Here’s the SQL code:

CREATE TABLE IF NOT EXISTS `widgets` (
  `id` int(11) NOT NULL auto_increment,
  `column_id` int(11) NOT NULL,
  `sort_no` int(11) NOT NULL,
  `collapsed` tinyint(4) NOT NULL,
  `title` varchar(100) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

--
-- Dumping data for table `widgets`
--

INSERT INTO `widgets` (`id`, `column_id`, `sort_no`, `collapsed`, `title`) VALUES
(1, 2, 0, 1, 'Widget 1'),
(2, 1, 0, 0, 'Widget 2'),
(3, 2, 1, 0, 'Widget 3'),
(4, 2, 2, 0, 'Widget 4'),
(5, 1, 1, 1, 'Widget 5');

As you can see, I have also added some default data to widgets table, but if you are using this in production environment, you will have to create an interface for adding new panels which will add new rows to widgets table.

Displaying Panels Using Database

Since I added some default data to widgets table, here’s how to display the widgets keeping their saved state intact.

Remember to update the Database configuration detail in config.php file.
This code is within index.php file.

<div id="console" ></div>

		<?php
		$dummy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum velit ultricies orci pharetra elementum. In massa mauris, varius sed tempus a, iaculis sed erat. Ut sollicitudin tellus mollis arcu laoreet semper. Suspendisse ut felis odio. Aliquam auctor, tortor sit amet suscipit elementum, nunc ante dictum lectus, ac accumsan justo nunc sed velit. Sed sollicitudin varius tortor vitae varius..";

		include('./config.php');

			$columns=mysql_query('SELECT DISTINCT column_id FROM widgets ORDER BY column_id');
			while($column=mysql_fetch_array($columns))
			{
				echo '<div class="column" id="column'.$column['column_id'].'" >';
				$items=mysql_query("SELECT * FROM widgets WHERE column_id='".$column['column_id']."' ORDER BY sort_no");
				while($widget=mysql_fetch_array($items))
				{
					echo '
					<div class="dragbox" id="item'.$widget['id'].'">
						<h2>'.$widget['title'].'</h2>
							<div class="dragbox-content" ';
					if($widget['collapsed']==1)
						echo 'style="display:none;" ';
					echo '>
								'.substr($dummy, 0, rand(120, strlen($dummy))).'
							</div>
					</div>';
				}
				echo '</div>';
			}
		?>

Explanation First of all, fetch the unique column_id‘s from widgets table and then for each column, their panels in the sort order and then display them.
I’m using a variable $dummy to produce dummy content for widgets.

The JavaScript Code

In earlier article, i wrote about a variable sortorder that was used to pass information to server side script for processing. But it only stored information about order of panels and their column but not the state of each panel i.e. whether panel is collapsed or not was not passed to server side script.

So, I worked out the JavaScript code so that it saves all the information about state of each panel that is its column, its order in the column and its collapse state.
For that I have used an array of JavaScript objects with each object storing information about each panel.

And to pass the array of objects, I used jQuery JSON plugin(mere 2KB) that will make it easy to pass data to server side script in JSON format.

Moreover, since state needs to be saved not only when panels are changed by dragging but also when a panel is collapsed or opened. That is why I created a function updateWidgetData() that will be called whenever the state needs to be saved.

Here’s the JavaScript code, it resides within <head> tag inside index.php file.

$(function(){
	$('.dragbox')
	.each(function(){
		$(this).hover(function(){
			$(this).find('h2').addClass('collapse');
		}, function(){
		$(this).find('h2').removeClass('collapse');
		})
		.find('h2').hover(function(){
			$(this).find('.configure').css('visibility', 'visible');
		}, function(){
			$(this).find('.configure').css('visibility', 'hidden');
		})
		.click(function(){
			$(this).siblings('.dragbox-content').toggle();
			//Save state on change of collapse state of panel
			updateWidgetData();
		})
		.end()
		.find('.configure').css('visibility', 'hidden');
	});

	$('.column').sortable({
		connectWith: '.column',
		handle: 'h2',
		cursor: 'move',
		placeholder: 'placeholder',
		forcePlaceholderSize: true,
		opacity: 0.4,
		start: function(event, ui){
			//Firefox, Safari/Chrome fire click event after drag is complete, fix for that
			if($.browser.mozilla || $.browser.safari)
				$(ui.item).find('.dragbox-content').toggle();
		},
		stop: function(event, ui){
			ui.item.css({'top':'0','left':'0'}); //Opera fix
			if(!$.browser.mozilla && !$.browser.safari)
				updateWidgetData();
		}
	})
	.disableSelection();
});

function updateWidgetData(){
	var items=[];
	$('.column').each(function(){
		var columnId=$(this).attr('id');
		$('.dragbox', this).each(function(i){
			var collapsed=0;
			if($(this).find('.dragbox-content').css('display')=="none")
				collapsed=1;
			//Create Item object for current panel
			var item={
				id: $(this).attr('id'),
				collapsed: collapsed,
				order : i,
				column: columnId
			};
			//Push item object into items array
			items.push(item);
		});
	});
	//Assign items array to sortorder JSON variable
	var sortorder={ items: items };

	//Pass sortorder variable to server using ajax to save state
	$.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response){
		if(response=="success")
			$("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
		setTimeout(function(){
			$('#console').fadeOut(1000);
		}, 2000);
	});
}

There were some browser inconsistencies like Firefox/Safari/Chrome fire click event on drag completion while IE/Opera do not fire which leads to inconsistent state which i have fixed as mentioned within the code.

PHP Code To Save State

In the above JavaScript code, I used updatePanels.php in the AJAX call to save state.
Here’s the code for updatePanels.php

<?php
if(!$_POST["data"]){
	echo "Invalid data";
	exit;
}
//Include DB config file
include('./config.php');

//decode JSON data received from AJAX POST request
$data=json_decode($_POST["data"]);

foreach($data->items as $item)
{
	//Extract column number for panel
	$col_id=preg_replace('/[^\d\s]/', '', $item->column);
	//Extract id of the panel
	$widget_id=preg_replace('/[^\d\s]/', '', $item->id);
	$sql="UPDATE widgets SET column_id='$col_id', sort_no='".$item->order."', collapsed='".$item->collapsed."' WHERE id='".$widget_id."'";
	mysql_query($sql) or die('Error updating widget DB');
}
echo "success";

?>

The code is pretty self explanatory, just decode the JSON string received from AJAX call and loop through items to save their state to database.

Download the source code

Hopefully this will help solve most of the problems many of you were encountering. Special thanks to Mark Mckee for inspiring me to code the full solution.

Related posts:

1. Collapsible Drag & Drop Panels Using jQuery
2. AJAX User Poll Using jQuery and PHP

As these frameworks are getting popular day by day, more and more web developers are coming out with new and creative ideas every day. Here are 21 brilliant jQuery plugins which you can easily use to create an image gallery/slideshow for your website.

1. Spacegallery

Spacegallery displays your images with a nice 3D effect and it is also pretty easy to use and customize.

2. prettyPhoto

prettyPhoto might look like jQuery Lightbox clone but it supports videos, flash, YouTube videos, iFrames besides images. It also comes with useful API and 4 beautiful themes. It is a great plugin to create an image as well as multimedia gallery.

3. Zoomimage

Stylish way to present your images in a nice popup with a drop shadow and border.

4. Pirobox

Another lightbox based image gallery plugin that resizes images based on browser size and next/prev links can be placed inside or outside of the image.

5. slideViewerPro

slideViewerPro is a fully customizable jQuery image gallery engine that lets you create outstanding sliding image galleries for your projects or interactive galleries within blog posts.

6. Galleria

Galleria generates an image gallery from an unordered list and once the images are loaded, thumbnail navigation is generated. It is easy to customize using just CSS and degrades gracefully if JavaScript is disabled.

7. jQuery PanelGallery

jQuery PanelGallery generates a slideshow of images with a unique transition. Image transition occurs in a sequential manner displaying the new image panel by panel, thus the name PanelGallery. It is lightweight and allows you to change the direction of panel transition.

8. PikaChoose

Pikachoose allows easy presentation of a bunch of images using slideshows with nice thumbnails, next/prev buttons and autoplay options.

9. jQuery Gallery Plugin

This plugin will transform a list of images into a flash like image gallery. Thumbnail navigation only shows up when you hover over the image and behaves like infinite carousel.

10. EOGallery

EOGallery creates an animated slideshow and images are displayed in larger size using jQuery Thickbox plugin.

11. Smooth Div Scroll

As the name suggests, this plugin scrolls content smoothly and horizontally in either left or right direction. This plugin can scroll any html content and if you use images, you’ll end up with a nice smoothly scrolling slideshow.

12. Sliding Image Gallery

Sliding image gallery displays a number of images in an easy to use manner just like the iTunes Album Viewer. It is quite easy to implement and gives you a lot of options to customize.

13. Step Carousel Viewer

This plugin displays images or any HTML content by side scrolling them left or right with a smooth sliding animation during transition. And with its two public methods and two custom event handlers, you can customize it to your requirement easily.

14. jQuery Virtual Tour

With this plugin, you can convert panoramic views into virtual tours, it degrades gracefully if JavaScript is disabled.

15. Ultimate Fade In Slide Show

This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features all rolled into one.

16. ThickBox Gallery

jQuery Thickbox plugin can be used for creating a nice image viewer that shows images in a lightbox and supports keyboard shortcuts to navigate through the images.

17. jQuery Lightbox

This one is a simple elegant and unobtrusive plugin to create an overlay image viewer that supports keyboard shortcuts and requires minimal coding effort.

18. GalleryView

GalleryView lets you create a flexible and attractive content that is very easy to implement and customize. Also, their way of explaining the anatomy of GalleryView plugin is very intuitive.

19. Flickr Gallery

Flickr Gallery generates a slideshow whose size varies with the size of image. As the name suggests, it can directly pull images from a flickr account(needs Flickr API key) or you can use just a simple unordered list. Thumbnail navigation is intuitive with a nice scrolling bar.

20.Easy Slider

Easy slider enables images to slide either horizontally or vertically and it can be styled easily using CSS. The latest version of this plugin supports continuous scroll instead of jumping over to first slide from last slide.

21. SuperSized

Using Supersized, you can display large sized photos easily as it will scale the images automatically depending on browser size and supports preloading of images for better experience.

Related posts:

1. 25 Amazing & Free Flash Based Image Galleries
2. 30+ Fresh & Amazing jQuery Plugins & Tutorials
3. 15+ Excellent jQuery Plugins To Enhance HTML Forms

Today I am going to show you how to create a multiple file upload form that allows multiple file selection using Ctrl/Shift keys and also displays a progress bar for each of the selected files while they are uploading.

For this tutorial, you will need the all powerful jQuery library(latest version) and SWFUpload jQuery Plugin.

Folder Structure

Place the jQuery library in js folder, extract the SWFUpload jQuery Plugin somewhere and copy the jquery.swfupload.js in the src folder to the js folder. Also, copy the swfupload folder inside vendor folder of SWFUpload jQuery Plugin to js Folder. Here’s what your folder structure should look like.

Add reference to jQuery library and then jquery.swfupload.js in the head tag of your page.

HTML Structure

Since we will be using SWFUpload, we’ll need a container that will act as placeholder for SWFUpload button, and a list to show the queue of files.

<div id="swfupload-control">
	<p>Upload upto 5 image files(jpg, png, gif), each having maximum size of 1MB(Use Ctrl/Shift to select multiple files)</p>
	<input type="button" id="button" />
	<p id="queuestatus" ></p>
	<ol id="log"></ol>
</div>

CSS Styles

Here are some CSS styles to stylize our File Uploader, modify them as you want. Important ones are .progressbar and .progress that define the progress bar for file upload, you can adjust their height and color.

#swfupload-control p{ margin:10px 5px; font-size:0.9em; }
#log{ margin:0; padding:0; width:500px;}
#log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px;
	font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}
#log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }
#log li .progress{ background:#999; width:0%; height:5px; }
#log li p{ margin:0; line-height:18px; }
#log li.success{ border:1px solid #339933; background:#ccf9b9; }
#log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px;
	background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; }

The JavaScript Code

The JavaScript code is a bit bulkier but it is not that difficult to understand as it looks.

$(function(){
	$('#swfupload-control').swfupload({
		upload_url: "upload-file.php",
		file_post_name: 'uploadfile',
		file_size_limit : "1024",
		file_types : "*.jpg;*.png;*.gif",
		file_types_description : "Image files",
		file_upload_limit : 5,
		flash_url : "js/swfupload/swfupload.swf",
		button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
		button_width : 114,
		button_height : 29,
		button_placeholder : $('#button')[0],
		debug: false
	})
		.bind('fileQueued', function(event, file){
			var listitem='<li id="'+file.id+'" >'+
				'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
				'<div class="progressbar" ><div class="progress" ></div></div>'+
				'<p class="status" >Pending</p>'+
				'<span class="cancel" >&nbsp;</span>'+
				'</li>';
			$('#log').append(listitem);
			$('li#'+file.id+' .cancel').bind('click', function(){ //Remove from queue on cancel click
				var swfu = $.swfupload.getInstance('#swfupload-control');
				swfu.cancelUpload(file.id);
				$('li#'+file.id).slideUp('fast');
			});
			// start the upload since it's queued
			$(this).swfupload('startUpload');
		})
		.bind('fileQueueError', function(event, file, errorCode, message){
			alert('Size of the file '+file.name+' is greater than limit');
		})
		.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
			$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
		})
		.bind('uploadStart', function(event, file){
			$('#log li#'+file.id).find('p.status').text('Uploading...');
			$('#log li#'+file.id).find('span.progressvalue').text('0%');
			$('#log li#'+file.id).find('span.cancel').hide();
		})
		.bind('uploadProgress', function(event, file, bytesLoaded){
			//Show Progress
			var percentage=Math.round((bytesLoaded/file.size)*100);
			$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
			$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
		})
		.bind('uploadSuccess', function(event, file, serverData){
			var item=$('#log li#'+file.id);
			item.find('div.progress').css('width', '100%');
			item.find('span.progressvalue').text('100%');
			var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >view &raquo;</a>';
			item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
		})
		.bind('uploadComplete', function(event, file){
			// upload has completed, try the next one in the queue
			$(this).swfupload('startUpload');
		})
});

Code Explanation
Since we are using SWFUpload jQuery Plugin, firstly we initialize it on the placeholder element using the $('#placeholder').swfupload({ settings }) function and pass it a settings object that defines various parameters like server side file that will handle uploads, maximum size of the file, number of maximum uploads, allowed file types, button url, button size etc. For complete detail of settings you can use, refer to SWFUpload docs.

At this stage, your file upload script will work but will not show any visual clue to users about the upload. SWFUpload fires certain events that we can use to provide information to user about the file uploads. So, next thing is to bind functions to various events to show required output. That’s what all bind calls are doing. They are pretty much self-explanatory.

Limitations

Since this script uses SWFUpload to upload files, which requires flash plugin, so this will not work if flash plugin is not installed in end user’s browser. Make sure to provide an alternative upload form so that users without flash can upload files.

Also, SWFUpload has some known issues when used on linux systems and if user is behind proxies. Make sure to read them before you use it in production environment.

View Working Demo or Download Source Code

Related posts:

1. AJAX Multiple File Upload Form Using jQuery
2. Quick & Easy Way to Implement Drag n Share With jQuery
3. Create Flipping Content Tabs Using jQuery

Today, i am going to show you how to create collapsible, drag and drop panels easily using jQuery and jQuery UI libraries. Here’s what the final result will look like.

Let’s begin with it.

Include The Libraries

We’ll be using the all powerful jQuery library and the jQuery UI libraries, so grab the latest version of both and add it to your page header.

The HTML Structure

We’ll be using two vertical columns defined by div with class="column" in this example that will hold our panels. You can increase the number of panels by adjusting the width in the stylesheet for .column. Each panel is a div with class="dragbox". And the content of each panel resides within div with class="dragbox-content".

Here’s the complete HTML structure for our example, i will be using 5 panels within two columns.

	<div class="column" id="column1">
		<div class="dragbox" id="item1" >
			<h2>Handle 1</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item2" >
			<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item3" >
			<h2>Handle 3</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
	</div>
	<div class="column" id="column2" >
		<div class="dragbox" id="item4" >
			<h2>Handle 4</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here-->
			</div>
		</div>
		<div class="dragbox" id="item5" >
			<h2>Handle 5</h2>
			<div class="dragbox-content" >
				<!--Panel Content Here-->
			</div>
		</div>
	</div>

You can add a link to configuration of a panel within the <h2> tag using <span class="configure">. This will show up when mouse hovers over the panel header.

Update
Each column now has a unique id and every panel also has a unique id, this will help in saving the order of panels if the user changes them.

The CSS Styles

Here are the CSS styles, you can modify it as you wish but remember to adjust the width of .column in case you increase the number of columns.

.column{
	width:49%;
	margin-right:.5%;
	min-height:300px;
	background:#fff;
	float:left;
}
.column .dragbox{
	margin:5px 2px  20px;
	background:#fff;
	position:relative;
	border:1px solid #ddd;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.column .dragbox h2{
	margin:0;
	font-size:12px;
	padding:5px;
	background:#f0f0f0;
	color:#000;
	border-bottom:1px solid #eee;
	font-family:Verdana;
	cursor:move;
}
.dragbox-content{
	background:#fff;
	min-height:100px; margin:5px;
	font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
	background: #f0f0f0;
	border:1px dashed #ddd;
}
.dragbox h2.collapse{
	background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
	font-size:11px; font-weight:normal;
	margin-right:30px; float:right;
}

The JavaScript Code

To make the boxes draggable and droppable, we’ll be using the Sortables function of jQuery UI library. Here’ the code you need to use, add this to $(document).ready() function:

$('.column').sortable({
	connectWith: '.column',
	handle: 'h2',
	cursor: 'move',
	placeholder: 'placeholder',
	forcePlaceholderSize: true,
	opacity: 0.4,
})
.disableSelection();

Explanation: I used some options with sortable function . the first one connectWith lets you move panels across different columns. The handle defines the tag which is used to drag the panel. The placeholder parameter is the CSS class to use for the panel placeholder which is displayed when you drag a panel to show the possible position of the dragged panel. forcePlaceholderSize makes sure that placeholder size is equal to the size of the dragged panel and at last opacity sets the opacity of the panel while dragging.

Collapsing The Panels
To collapse the content of a panel when you click on the panel header and show the configure link on panel header on hover, use the below code in jQuery document ready function.

$('.dragbox').each(function(){
	$(this).hover(function(){
		$(this).find('h2').addClass('collapse');
	}, function(){
		$(this).find('h2').removeClass('collapse');
	})
	.find('h2').hover(function(){
		$(this).find('.configure').css('visibility', 'visible');
	}, function(){
		$(this).find('.configure').css('visibility', 'hidden');
	})
	.click(function(){
		$(this).siblings('.dragbox-content').toggle();
	})
	.end()
	.find('.configure').css('visibility', 'hidden');
});

One thing you’ll notice after adding this code is that when you drag the panel, the content of the panel toggles as when you drag the click event of panel header also fires that toggles the state of content. To fix this, you need to add another parameter to sortable so that when drag is finished, state of content does not toggle.

$('.column').sortable({
	connectWith: '.column',
	handle: 'h2',
	cursor: 'move',
	placeholder: 'placeholder',
	forcePlaceholderSize: true,
	opacity: 0.4,
	stop: function(event, ui){
		$(ui.item).find('h2').click();
	}
})
.disableSelection();

Here i added another parameter stop that defines the function to use when drag is complete. Once the drag is complete, click event of panel header is fired so that the original state of content is restored.

Saving State

Update (Sep 16, 2009)
Many of the commentors below asked about how to save the state of panels. I have written a follow up post on how to save state using database. Be sure to check it if you want to know.

There you are with nice multi-column collapsible drag drop panels.

See the Working Demo or Download source code & try.

Related posts:

1. Saving State For Collapsible Drag Drop Panels
2. Create Featured Content Slider Using jQuery UI
3. Quick & Easy Way to Implement Drag n Share With jQuery

Tutorials

1. How to add preloader with loading image in a gallery using jQuery

Use a jQuery preloader while images are loading in the gallery.
» View Demo | » View Tutorial

2. Simple Lava Lamp Menu Tutorial With jQuery

Create a unique lava lamp animated jQuery navigation menu
» View Demo | » View Tutorial

3. How To Create a 3D Tag Cloud in jQuery

Amazing tutorial on creating a flash like 3D tag cloud using jQuery.
» View Demo | » View Tutorial

4. Drag & Drop With jQuery

Drag & Drop facility in a web application provides for a rich user interface, learn how to create one using jQuery UI.
» View Demo | » View Tutorial

5. Awesome Horizontal Animated menu using Kwicks for jQuery

Build a customizable and versatile horizontal animated menu using jQuery Kwicks plugin.
» View Demo | » View Tutorial

6. Create a Thumbnail Gallery With Slick Heading & Caption effect

» View Demo | » View Tutorial

7. Create an Attractive jQuery Menu with fade in and out effects

Nice tutorial on creating an attractive jquery menu with fade in background change on hover.
» View Demo | » View Tutorial

8. jQuery PHP AJAX Autosuggest

Autosuggest is one of the useful features of present web applications. Learn how to create one using jQuery and PHP.
» View Demo | » View Tutorial

9. Perfect Login Drop Down Box Like Twitter

Nice tutorial on imitating the new twitter login dropdown box using jquery.
» View Demo | » View Tutorial

10. Crafting an Animated Postcard With jQuery

Create a flashy postcard using just jQuery and no flash.
» View Demo | » View Tutorial

11. Twitter like Search With jQuery & AJAX

Create a twitter like search box that loads results using AJAX on same page.
» View Demo | » View Tutorial

12. Voting System With jQuery, AJAX, PHP

Learn how to create dzone like voting system.
» View Demo | » View Tutorial

13. AJAXed Sliding Shopping Cart Using jQuery

Amazing tutorial on creating a sliding AJAX Shopping basket that slides in and updates the cart when new item is added and auto-hides after some time. It also supports manual show hide option to view shopping cart at any time.
» View Demo | » View Tutorial

14. How To Build Animated Header in jQuery

Add motion to your header by animating its background. Amazing animation tutorial using jQuery.
» View Demo | » View Tutorial

15. Hide and Seek With jQuery

Use jQuery to display multiple modules of an application on a single page based on the event occurred.
» View Demo | » View Tutorial

16. jQuery Comment Preview

Provide comment preview to your users as they type in their comment using jQuery.
» View Demo | » View Tutorial

17. Styling Drop Down Boxes With jQuery

Since select boxes are hard to style using CSS, this tutorial shows you how to replace a select box with a textbox and an unordered list and then style them according to your choice.
» View Demo | » View Tutorial

18. Scrolling Dynamic Content Box

Load content into a div on scroll using AJAX just like Google reader loads more items as you scroll down to view more items of a feed.
» View Demo | » View Tutorial

19. Ways To Debug your jQuery or JavaScript Code

This article explains how you can easily debug javascript code using jquery console logging.
» View Tutorial

20. 5 Ways To Make AJAX Calls with jQuery

Nice tutorial from NetTuts+ about different ways of making AJAX calls using jQuery. It is even useful for those who are already familiar with jQuery as in depth coverage of various methods of making AJAX calls has been done.
» View Demo | » View Tutorial

Plugins

1. Tipsy

Display Facebook style tooltip plugins based on anchor tag’s title attribute
» View Demo | » Plugin Page

2. jQuery YouTube PlayList

Convert a list of YouTube links into playlist which allows user to see videos right on the page itself.
» View Demo | » Plugin Page

3. SuperFish Menus

Superfish Menus is an easy to use jquery plugin that converts unordered HTML lists into nice drop down menus.
» Plugin Page

4. Elastic

Elastic is a lightweight jQuery plugin that makes textareas adjust their size according to the size of content.
» View Demo | » Plugin Page

5. OverScroll

Implement iphone like click and drag to scroll behavior on your web page.
» Plugin Page

6. Tweetable

Display Twitter feed on your website easily and quickly with tweetable. Gives you option to convert twitter usernames and URLs into hyperlinks
» View Demo | » Plugin Page

7. jQuery Link nudge

Make links notorious just like ones on David Walsh blog using this jQuery Link Nudge plugin.
» View Demo | » Plugin Page

8. TimePickr

If you need to get time as input from user, then use this plugin to provide a rich UI to input time.
» Plugin Page

9. Truncatable

Truncatable lets you hide blocks of text on page and show them if user requires.
» View Demo | » Plugin Page

10. Incremental Search For Select Boxes

This plugin converts ordinary select boxes into combo boxes with incremental search, very useful if you have lots of options in the select box.
» View Demo | » Plugin Page

11. Anything Slider

Anything Slider is a full featured slider that is pretty easy to customize and adapt into your website.
» View Demo | » Plugin Page

Related posts:

1. 15+ Excellent jQuery Plugins To Enhance HTML Forms
2. 15 jQuery Tutorials For More Interactive Navigation
3. 21 Brilliant jQuery Image Gallery/Slideshow Plugins

Features

• Enable AJAX Commenting
• Client Side Form Validation
• Easily rolls back if JS disabled
• Easily configure custom styles for messages

Download

Download the Plugin from official WordPress Plugin repository.

Installing & Activating

Here’s how to install and use this plugin to its full potential:
1. Firstly, go to Add New Plugin in your WordPress admin panel, and search for wdp ajax comments and you’ll see the listing, install the plugin by clicking on ‘Install’. Or you can go to WordPress plugin repository page and download the plugin and extract it in your wp-content/plugins folder.
2. Now activate this plugin, and your blog is ready with AJAX comment posting, but one thing you still need to do is enabling the client side comment form validation.
3. To enable form validation, refer to the below section.

Enabling Comment Form Validation

This plugin makes use of jQuery Validation plugin to validate comment form, so you will need to add some css classes to your comment form. Here’s how to do that:
1. Open up your theme’s comments.php file in an editor.
2. Find out the code lines where comment form starts.
3. Now, you need to add following CSS classes to comment form inputs:

• To comment author name input, add class="required"
• To comment author email input, add class="required email"
• To comment author URL input, add class="url"
• To the comment textarea, add class="required"

4. Save the file and now your comment form validation will work.

Styling The Messages

WDP AJAX Comments provides you with full control over the looks of various messages using CSS. To define your own styles, create a new stylesheet file named wdp-ajax-styles.css in your theme’s folder and define styles for these classes:

• .wdpajax-error This class is used for the message shown when AJAX error is encountered.
• .wdpajax-success This class is used for success message shown after successful comment submission.
• .wdpajax-loading This class is used to show the ‘Processing..’ message while performing AJAX request. You can add animated loading gif’s as background to give a nice AJAX effect.
• label.error This class is used to show validation errors.

If your theme folder does not contain wdp-ajax-styles.css file, the default stylesheet of the plugin will be used.

Demo

If you would like to see the demo, go to the demo page.

What to Expect in Coming Versions

Currently, this plugin just AJAXifies comment submission and does not update the comments displayed automatically. So, this is one of the feature you should expect in coming editions. Another feature i have thought is giving you control over the messages displayed on AJAX requests.

If you would like to suggest a new feature, feel free to comment below, just prepend your comment with Suggestion.

If you have used this plugin on your blog, post the address of your blog too, so that other can have a look.
In case you need any assistance, feel free to use the comment section below

Related posts:

1. How To: AJAXify WordPress Comment Posting
2. 10 Ways To Make Your Blog’s Comment Form Stand Out
3. AJAX Multiple File Upload Form Using jQuery

Today i will show you how to enable AJAX comments with client side JavaScript comment form validation on your WordPress blog step by step that should work with most versions of WordPress. We’ll be modifying the WordPress theme files to do that. In few days, i’ll be releasing a WordPress plugin that will automatically enable AJAX Comments. So, do subscribe to our RSS Feed or e-mail updates so that you are the first to know about it.

Let’s start with it.

Functions.php file

Add the following lines of code to your theme’s functions.php file. If your theme doesn’t have one, then create a new file and add it to your theme folder.

add_action('init', 'wdp_ajaxcomments_load_js', 10);
function wdp_ajaxcomments_load_js(){
		wp_enqueue_script('ajaxValidate', get_stylesheet_directory_uri().'/wdp-ajaxed-comments/js/jquery.validate.min.js', array('jquery'), '1.5.5');
		wp_enqueue_script('ajaxcomments', get_stylesheet_directory_uri().'/wdp-ajaxed-comments/js/ajax-comments.js',	array('jquery', 'ajaxValidate'), '1.1');
}
add_action('comment_post', 'wdp_ajaxcomments_stop_for_ajax',20, 2);
function wdp_ajaxcomments_stop_for_ajax($comment_ID, $comment_status){
	if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
	//If AJAX Request Then
		switch($comment_status){
			case '0':
				//notify moderator of unapproved comment
				wp_notify_moderator($comment_ID);
			case '1': //Approved comment
				echo "success";
				$commentdata=&get_comment($comment_ID, ARRAY_A);
				$post=&get_post($commentdata['comment_post_ID']); //Notify post author of comment
				if ( get_option('comments_notify') && $commentdata['comment_approved'] && $post->post_author != $commentdata['user_ID'] )
					wp_notify_postauthor($comment_ID, $commentdata['comment_type']);
				break;
			default:
				echo "error";
		}
		exit;
	}
}

Code Explanation: Firstly, we load required JavaScript files jQuery, jQuery Validation and ajax-comments.js using the wp_enqueue_script() function. wp_enqueue_script() accepts four parameters.

• First is the name of the handler for JavaScript file, you can use any name here for your own custom JavaScript, but for files that wordpress include by default like jQuery, there are pre-fixed handlers like ‘jquery’.
• Second parameter is path to JavaScript file.
• Third parameter is the array of name of handlers of JavaScript files, which must be loaded before the specified file.
• Last is the version number of JavaScript file which you should use in case you use caching on your blog.

The function wdp_ajaxcomments_stop_for_ajax() hooks onto the comment_post action which is triggered after a comment has been successfully added to the database. normally, what happens when you post a comment is that you are redirected back to the original post, but since we will be using AJAX, we don’t want a redirect but a message about the status of comment posted.

I recently read a nice post from David Walsh where he told about how to identify AJAX requests using $_SERVER["HTTP_X_REQUESTED_WITH"] which is populated by most JavaScript frameworks like in our case jQuery.
I used it to hook into comment_post and check whether it is AJAX request or normal request. If it is AJAX request then check the status of comment, if it is unapproved or approved, a message ‘success’ is output and moderator or post author is notified accordingly.
After identifying AJAX request, i stopped the script execution using exit statement so as to prevent the redirect.
Now rest is the job of JavaScript code.

The JavaScript Code

You will need to add two JavaScript files jquery.validate.min.js and ajax-comments.js in the js directory of your theme(Files are available at the end of article). Create the js directory and add files if it does not exist. Though jQuery is required to work, but since it is included in WordPress by default, it will automatically be loaded as we specified it as a requirement while loading JavaScript files in functions.php.

jQuery Validation plugin is used to validate comment form data.
Here’s the code and explanation for ajax-comments.js.

jQuery('document').ready(function($){
	var commentform=$('form[action$=wp-comments-post.php]');
	commentform.prepend('<div id="wdpajax-info" ></div>');
	var infodiv=$('#wdpajax-info');
	commentform.validate({
		submitHandler: function(form){
			//serialize and store form data in a variable
			var formdata=commentform.serialize();
			//Add a status message
			infodiv.html('<p>Processing...</p>');
			//Extract action URL from commentform
			var formurl=commentform.attr('action');
			//Post Form with data
			$.ajax({
				type: 'post',
				url: formurl,
				data: formdata,
				error: function(XMLHttpRequest, textStatus, errorThrown){
					infodiv.html('<p class="wdpajax-error" >You might have left one of the fields blank.</p>');
				},
				success: function(data, textStatus){
					if(data=="success")
						infodiv.html('<p class="wdpajax-success" >Thanks for your comment. We appreciate your response.</p>');
					else
						infodiv.html('<p class="wdpajax-error" >Error in processing your form.</p>');
					commentform.find('textarea[name=comment]').val('');
				}
			});
		}
	});
});

Code Explanation: Firstly, we append a div to comment form that will show AJAX status messages. Then we intialize jQuery Validation on comment form and if validation is successful, we will use jQuery AJAX to send the form data to the action URL of comment form and display a message accordingly.

Now, uptill here, if you have followed along and worked as told, you’ll find that AJAX comment posting works but validation doesn’t. Since, we are using jQuery Validation plugin, you will have to now edit the theme’s comments.php file.

Enable Comment Form Validation

Open your theme’s comments.php and add some CSS classes to comment form input fields as described:

• To comment author name input, add class="required"
• To comment author email input, add class="required email"
• To comment author URL input, add class="url"
• To the comment textarea, add class="required"

Now the comment form validation should work. But it might be having awkward looks or styles, now the last step is to customize the looks of messages using CSS.

Customize the Styles of Messaages

The error messages from validation use labels with CSS class error. While the AJAX post request status messages use two CSS classes, wdpajax-success for AJAX success and wdpajax-error for error message. Define the styles for these classes in your theme’s stylesheet file. Here’s what i have used:

.wdpajax-error{
	border:1px solid #f9d9c9;
	padding:5px;
	color:#ff3311;
}
.wdpajax-success{
	border:1px solid #339933;
	padding:5px;
	color:#339933;
}
label.error{
	float:none !important;
	padding-left:5px;
	color:#ff3311;
}

There you are with cool AJAX comments on your WordPress Blog.

Click here to view the Live demo(Try commenting on one of the posts).

To download the required files, Click here
If you find any problems or error, do let me know in comments.

Plugin

If you find modifying theme file difficult, or if you regularly change your blog’s theme then it will be difficult for you to modify theme files every-time you apply a new theme. so, i have created a plugin named WDP AJAX Comments that will automatically add AJAX commenting to your blog.
So, do subscribe to our RSS Feed or email updates so that you are among the first one to get the plugin.
Enjoy!

Related posts:

1. New WordPress Plugin: WDP AJAX Comments
2. 10 Ways To Make Your Blog’s Comment Form Stand Out
3. 12 Lesser Known But Useful WordPress Hacks