1. The Pixel Blog

2. Copimaj Interactive

3. Flourish Web Design

4. Abduction Lamp

5. Morphix Design Studio

6. Final Phase

7. Make Photoshop Faster

8. WebSarga

9. Suie Paparude

10. Duirwaigh Studios

11. BlackMoon Design

12. Sepitra

13. Le Blog de Gruny

14. Piipe

15. Mozi Design Studio

16. Electric Current

17. Lora Bay Golf

18. Life Style Sports

19. ligne triez

20. Oliver Kavanagh

21. World of Merix Studio

22. Le Web Defi

23. How host

24. Productive Dreams

25. Gary Birnie

26. Glocal Ventures

27. GDR UK

28. Absolute Bica

29. Le Nordik

30. Leaf Tea Shop & Bar

31. Paul Smith

32. EwingCole

33. Dolphins Communication Design

34. Danny Diablo

35. Inner Metro Green

36. Matt Salik

37. Revyer

38. Yodaa

39. Dripping in Sunshine

40. Big Break ’09

Related posts:

1. 13+ Fresh and High Quality Texture Sets & Collections
2. 23 Inspirational Photoshop Tutorials For Creating Impressive Web Layouts

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. Don’t Use Global Reset

Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it. Instead use subset of CSS Resets like one from Eric Meyer.
Not Good

*{ margin:0; padding:0; }

Better

html, body, div, dl, dt, dd, ul,  h1, h2, h3,  pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

2. Do not use IE Hacks

Though CSS hacks might be useful to maintain consistent look of the website over older browsers like IE6, but they can be problematic for newer versions of IE as newer versions like IE8 do support CSS standards to a good level and using hacks might break out the layout. You should use conditional statements instead to target specific versions of Internet Explorer.
For example, using the below lines of code within your <head> tag will load the iestyles.css file only when browser is Internet Explorer version 6 or less.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]-->

For information on conditional comments, refer to the quirksmode article on CSS Conditional Comments

3. Use Meaningful names for IDs and Classes

Suppose you define your sidebar styles using class .leftbox and after some redesign, you float it to right, then would it be meaningful to have leftbox as name for right floated box. You should put some thought before declaring classes and IDs for elements so that they are meaningful and easy to understand later.

4. Utilize CSS Inheritance

If multiple child elements of a parent element use same styles on your web page, it will be better to define them for their parent element and let the CSS inheritance do all the work. You’ll be able to easily update your code later and it’ll also reduce the CSS file size considerably.
Not Good

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

Better

#container{ font-family:Georgia, serif; }

5. Combine multiple Selectors

You can combine multiple CSS selectors into one if they have common style definitions. It’ll save you time and space.

Not Good

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Better

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Use Shorthand Properties

Utilize the shorthand properties of CSS to quickly write CSS code and reduce file size. Shorthand notation can be used for margin, padding, border, font, background and also for color values.
Not Good

li{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-top:5px;
	padding-bottom:10px;
	padding-left:5px;
}

Better

li{
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	padding:5px 0 10px 5px;
}

Here’s a complete guide to CSS shorthand properties.

7. Organize CSS Code

Organizing your CSS code in a certain pattern will make it easier to find things at later time and save you a lot of time looking for a specific style definition.
Here is a sample organization that you may use:

/*-------------------------
	CSS Reset
-------------------------*/

/*-------------------------
	Generic Classes
-------------------------*/

/*-------------------------
	Layout styles
-------------------------*/

/*-------------------------
	Section specific styles
-------------------------*/

8. Make CSS Readable

Writing readable CSS will make it easier to find and update a style declaration later. Either group all styles for a selector in one line or each style in its own line with proper indentation. You can also combine these two techniques together.

/*------------------------
	Each Style on new line
	---------------------*/
div{
	background-color:#3399cc;
	color:#666;
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	height:300px;
	margin:10px 5px;
	padding:5px 0 10px 5px;
	width:30%;
	z-index:10;
}

/*------------------------
	All Styles on one line
	---------------------*/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

9. Add proper Comments

Comments can be used to separate different sections of CSS code

/*--------------------
	Header
	-----------------*/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/*--------------------
	Content
	-----------------*/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*--------------------
	Footer
	-----------------*/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

10. Order CSS Properties Alphabetically

div{
	background-color:#3399cc;
	color:	#666;
	font: 	1.2em/1.4em Arial, Helvetica, sans-serif;
	height:	300px;
	margin:	10px 5px;
	padding:5px 0 10px 5px;
	width:	30%;
	z-index:10;
}

11. Use External Stylesheets

It is always a good design practice to separate content from presentation. Place all of your CSS code into external stylesheets and use the <link> to reference stylesheets within a web page. By placing CSS into external files, you can easily update your styles later at one place instead of looking into html templates or files for styles.
Not Good

<style type="text/css" >
	#container{ .. }
	#sidebar{ .. }
</style>

OR

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

Better

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. Split CSS into multiple files

If you are working on a large web project that has multiple modules, each with different set of styles and looks, it will be better to split your CSS files into multiple files based on the module they are applied to. You can separate stylesheets like, one for reset, one for layout, one for generic classes and one for module specific styles. This technique will let you organize your code easily in a large project but loading multiple CSS files means more HTTP requests and slower loading time, this is where Bridging CSS files come to rescue. Create a separate CSS file and import other CSS files into it.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

13. Compress CSS code

Once you are ready to deploy the web design project, compress your CSS code using tools like CSS Compressor to reduce file size and improve loading time of webpage.

14. Be Consistent in Writing CSS

When you work on multiple web development projects, it’ll be a wise decision to choose a particular way of organizing and formatting your CSS code and stick to that way for all your projects.

I hope these tips will help you write better and manageable CSS code. If you would like to share a tip or two, feel free to add your comment below.

Related posts:

1. 25 Incredibly Useful CSS Tricks You Should Know
2. 15 Time Saving CSS Tools You Should Be Aware Of
3. CSS Tooltip Box Without Images

Most of these hacks require your WordPress template to have functions.php file, if it doesn’t exist, create one.

1. Add private notes to your WordPress blog posts

If you would like to add reference notes to your posts that will only be visible to authors of your blog, add this function to your theme’s functions.php file which will create a shortcode [note] so that you can add notes for authors by including them in [note] and [/note] while writing the post.

add_shortcode( 'note', 'sc_note' );
function sc_note( $atts, $content = null ) {
	 if ( current_user_can( 'publish_posts' ) )
		return '<div class="note">'.$content.'</div>';
	return '';
}

Source: Add Private Notes to your WordPress Blog Posts – WpRecipes

2. How to disable HTML in WordPress comments

WordPress allows some HTML tags like <a>, <em>, <strong> within comment text. But if you would like to disable this feature on your blog to prevent users from adding any HTML content within comment text, add this function to your theme’s functions.php file. This will treat the HTML content within comment text as literals and display them as it is.

// This will occur when the comment is posted
function plc_comment_post( $incoming_comment ) {

	// convert everything in a comment to display literally
	$incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']);

	// the one exception is single quotes, which cannot be #039; because WordPress marks it as spam
	$incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] );

	return( $incoming_comment );
}

// This will occur before a comment is displayed
function plc_comment_display( $comment_to_display ) {

	// Put the single quotes back in
	$comment_to_display = str_replace( ''', "'", $comment_to_display );

	return $comment_to_display;
}

add_filter( 'preprocess_comment', 'plc_comment_post', '', 1);
add_filter( 'comment_text', 'plc_comment_display', '', 1);
add_filter( 'comment_text_rss', 'plc_comment_display', '', 1);
add_filter( 'comment_excerpt', 'plc_comment_display', '', 1);

Source: How to disable HTML in WordPress Comments

3. Check if a WordPress plugin is active

You might sometime need to check whether a particular plugin is activated or not either to use its functionality or prevent any conflicts from occurring. WordPress provides a function is_plugin_active that accepts path to the plugin file and checks to see if plugin is activated or not.

<?php
if (is_plugin_active('plugin-directory/plugin-file.php')) {
    //plugin is activated
}
?>

Source: Check if a WordPress Plugin is active – WpRecipes

4. Prevent Plugins from automatically loading stylesheets and scripts

Many plugins add their own stylesheets and scripts to your site to perform their function. But if you are using a lot of plugins on your WordPress blog, then this might lead to slow loading of your web pages as lots of scripts and stylesheets will require to be loaded first. What you can do to boost performance of your site while using plugins is combine their CSS and JavaScript files and prevent them to load on their own. For that you’ll need to look into plugin files and find out the handler names of all the CSS and JS files plugins are loading using wp_enqueue_script() and wp_enqueue_style() functions.
For example, if you use wp-pagenavi plugin, it loads its own stylesheet using the function:

wp_enqueue_style('wp-pagenavi', plugins_url('wp-pagenavi/pagenavi-css.css'), false, '2.50', 'all');

The first parameter to wp_enqueue_style() or wp_enqueue_script() is the name of handler for CSS or JS file.
In this case the handler name is wp-pagenavi. Now add these lines to your theme’s functions.php file to prevent it from loading.

//Prevent Stylesheets from loading
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

//Prevent JavaScript files from loading automatically
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
	wp_deregister_script( 'nameofhandler );
}

Source: How to Disable Scripts and Styles – Justin Tadlock

5. Showing Last Modified Date for a post

If you regularly update your old blog posts, then why not show the last modified date on the post page to let readers know when the post was last updated. Use this code to display the last modified date if the post has been modified at a later date.

Posted on <?php the_time('F jS, Y') ?>
<?php $u_time = get_the_time('U');
$u_modified_time = get_the_modified_time('U');
if ($u_modified_time != $u_time) {
echo "and last modified on ";
the_modified_time('F jS, Y');
echo ". "; } ?>

Source: Showing Last Modified On Your WordPress Posts – WPHacks

6. Custom Taxonomies in WordPress

By default, WordPress has two taxonomies categories and tags to group posts but custom taxonomies allow you to group your pages in your own custom ways, for example if you are running a movie review blog, you might want to add a taxonomy of genre to group movie review by genre, or a taxonomy of actors to group posts by actors. Custom taxonomies free you from restrictions of categories and tags.

You can add a custom taxonomy by adding this code to your theme’s functions.php file.

add_action( 'init', 'create_my_taxonomies', 0 );

function create_my_taxonomies() {
	register_taxonomy( 'genre', 'post', array( 'hierarchical' => false, 'label' => 'Genre', 'query_var' => true, 'rewrite' => true ) );
	register_taxonomy( 'actors', 'post', array( 'hierarchical' => false, 'label' => 'Actors', 'query_var' => true, 'rewrite' => true ) );
}

This will add new boxes to your add post page in admin panel if you are using WordPress 2.8+ using which you can add values for custom taxonomies. Justin Tadlock has written complete tutorial on how to create and use custom taxonomies, refer to it for more.

7. Create Post Only for your RSS Subscribers

If you would like to give an exclusive offer to your regular RSS subscribers, here’s a nice trick to create a post that is only visible to your RSS subscribers.

First of all, create a category that will hold posts to show to your RSS suscribers. For example, create a category ‘RSS’ and add some posts exclusively to it. Note down the category ID of this category. Now in your theme’s functions.php file, add these lines of code so that it is only shown to RSS subscribers.

<?php
function excludeCategory($query)
{
	if($query->is_home | $query->is_archive )
	//Exclude category from all other pages except RSS
	$query->set('cat','-3');
	return $query;
}
add_filter('pre_get_posts', 'excludeCategory');
?>

Source: Create Post only for your RSS Subscribers

8. Get Rid of Curly quotes

WordPress usually replaces pair of double quotes with curly quotes e.g. "something" will become “something”. This is fine for most of the blogs and they look nice too but if you post source code in your posts, then you need to disable this functionality as it’ll also transform quotes within source code. Paste this code into your theme’s functions.php file.

<?php remove_filter('the_content', 'wptexturize'); ?>

Source: Get rid of Curly Quotes in WordPress Blog – WpRecipes

9. Deny Comment Posting to Spammers

You can keep a good number of spam comments away from your blog by checking the referrer URL of the posted comment form. Most of the spam comments are usually made by automated scripts and they just post the data to wp-comments-post.php so that there’s no referral URL through which form is submitted.
You can add a rule to your blog’s .htaccess file so that it restricts the access of wp-comments-post.php to requests that provide referral URL.
Here are the rules you need to add to .htaccess file. Do backup .htaccess file before modifying.

RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*yourblog.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

Source: How To Deny Comment Posting to no referrer requests – WpRecipes

Note: This will only prevent spam bots or automated scripts from posting comment and not those individuals that manually post them. You should use Akismet or other spam preventing tools in addition to this.

10. Insert Ads Within RSS Feed

Here’s a nice hack to add any HTML content into RSS Feeds like ads, copyright info or anything you want to show to just your RSS readers. Add this code to your theme’s functions.php file and you can customize the HTML content to anything you want to append or prepend to posts.

<?php
function insertAds($content) {
    $content = $content.'<hr /><a href="http://webdeveloperplus.com">Visit WebDeveloper Plus for latest Web Design/Development Information</a>';
    return $content;
}
add_filter('the_excerpt_rss', 'insertAds');
add_filter('the_content_rss', 'insertAds');
?>

Source: Web Invent If

11. Disable WordPress Feeds

If you are using WordPress as CMS which has just static content, then you might want to disable RSS feeds as it won’t be of any use for your users. Add this code to your functions.php file to disable RSS feeds.

function fb_disable_feed() {
	wp_die( __('No feed available,please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!') );
}

add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1);

Source: Disable WordPress Feed – WpEngineer

12. Link Post Title to External URL

If you sometimes share just a link to other article out there which your readers might find useful, then here’s a nice hack to link the title of the post in your main template directly to the external URL. This will save your readers some time as they won’t have to open the post page just to find the resource link. Here’s how to do it:
Add these lines of code to functions.php file.

function print_post_title() {
	global $post;
    $thePostID = $post->ID;
    $post_id = get_post($thePostID);
    $title = $post_id->post_title;
    $perm = get_permalink($post_id);
    $post_keys = array(); $post_val = array();
    $post_keys = get_post_custom_keys($thePostID);

    if (!empty($post_keys)) {
		foreach ($post_keys as $pkey) {
			if ($pkey=='title_url') {
				$post_val = get_post_custom_values($pkey);
			}
		}
		if (empty($post_val)) {
			$link = $perm;
		} else {
			$link = $post_val[0];
		}
    } else {
		$link = $perm;
    }
    echo '<h2><a href="'.$link.'" rel="bookmark" title="'.$title.'">'.$title.'</a></h2>';
}

Next, you need to find out following lines in your theme’s index.php file:

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

Replace these lines with the following

<?php print_post_title() ?>

Now whenever you want to share an external URL, add a custom field to your post named title_url and set its value as the URL of the resource.
Source: WPBeginner

Related posts:

1. Create Post Only For Your RSS Subscribers in WordPress
2. How To Use Thumbnails Generated By WordPress In Your Theme
3. How To: AJAXify WordPress Comment Posting

1. Polaroid Gallery

Polaroid is an amazing gallery for displaying your photos in an unusual way. It places images as if they are actually lying on table such that you can drag and change their position. To view image in full, double click any image. And it stores the data about images in XML file.

2. Flash Gallery

Flash gallery is a lightweight and easy to deploy flash photo gallery. It uses XML file to store information about images to be displayed.

3. dfgallery

This amazing flash image gallery is not only good for its interface but also for its customization options. It has an amazing theme engine built to support custom themes with multiple skins for each. The administration console built on CodeIginter lets you manage multiple galleries and albums of different types.

4. PostcardViewer

PostcardViewer will place your images like those postcard or notices pasted onto wall. You can navigate through images using mouse or cursor keys on keyboard. It offers a lot of options to choose the way in which images to be displayed are provided ranging from Picasa to custom PHP script.

5. SimpleViewer

SimpleViewer is a lightweight easy to configure flash gallery that provides an intuitive way to navigate through images using mouse scroll button or cursor keys.

6. TiltViewer

This one is an amazing image gallery with nice 3D effects. You can load images even from your Flickr stream or use an XML file.

7. AutoViewer

Autoviewer displays images in a linear sequence with captions. It is essentially designed for hands-free image viewing experience.

8. Zen Flash Gallery

Zen Flash Gallery provides a rich user interface to show different albums containing images. The flip effect on image transition is just awesome. The free version of this gallery supports 4 albums with 10 images each.

9. Photo Flow Flash Gallery

This one brings iTunes like Cover flow album switching experience to your images. But the free version supports just 9 images and you’ll have to purchase the license to remove that limit.

10. Free Flash Photo Album 2

This is a free, easy to install and configure flash image gallery and uses XML file to store information about images.

11. Invent Media Flash PhotoGallery

This flash gallery is fully scalable, easy to customize and provides good user interface to display images. Uses XML file as database for images.

12. Photo Viewer

PhotoViewer is simple yet impressive flash image gallery. Uses XML as data store.

13. Carousel

flShow Carousel is a little Flash movie that you can use to enhance your web pages presenting your images with a nice and stylish carousel effect.It is light and easy to configure by means of an external xml file.

14 flShow Flip

It is from the same developer as number 13 above but provides a nice 3D flip effect.

15. Flash Gallery

Flash Gallery is a free application that allows you to create a slideshow on your website easy and fast. Just embed it into your website and script will automatically form a slideshow from a specified folder or from Flickr photostream.

16. Spread Photo Gallery

This one is like Polaroid gallery above but provides a different and pleasing interface to show images along with captions.

17. Fisheye Photo Gallery

18. Circular Photo Gallery

As its name suggests, thumbnails are displayed in continuously scrolling circular bar that slows down on hover.

19. Stack Photo Gallery

Display your images in a nice stack using this flash gallery.

20. Image Gallery v1.0

This script provides you with a lot of options like multiple album support, flickr and picasa integration and also provides with rich set of transition effects. Download

21. Multiple Photo Gallery

Multiple Photo Gallery is ideal for displaying multiple albums and also if you need to provide zoom-in functionality to view minute details in images.

22. Agile Gallery

AgileGallery is a free Flash photo gallery that rips through the XML output from Picasa (a free download from google) and generates the paging and thumbnails and displays the full sized photos along with any description entered in Picasa.

23. WS – Slideshow

WS Sllideshow is just amazing flash based image gallery script. It has a nice user interface and plethora of customization options, supports flickr too.

24. Flabell XML Image Slideshow

Fashionable flash + XML image slideshow with slick navigation and design, fully customizable from XML, with a motion blur effect on image transition. The gallery navigation bar changes its color based on the displayed photo colors.

25. Flabell XML Image Gallery

This is an interactive Flash XML Image Gallery, containing a list of images defined in a XML file, an intuitive navigation and many customizable features. You can browse the gallery by clicking on the left or right hand side of the swf file, or by selecting an element from the navigation bar.

Related posts:

1. 21 Brilliant jQuery Image Gallery/Slideshow Plugins

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. 21 Brilliant jQuery Image Gallery/Slideshow Plugins

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. Integrate Customized reCaptcha in your PHP Application

1. Facebook type image rotation and more using PHP and Javascript

How does facebook rotate images in gallery. Here’s a nice solution using the inbuilt imagerotate functionality in PHP. View Demo »

2. Retrieve Google Analytics Visits and Pageviews with PHP

Learn how to integrate Google Analytics data into your website using an easy to use PHP API
View Demo »

3. Caching Dynamic PHP pages easily

Learn how to cache database intensive heavy pages and serve the static html cached files utilizing the output buffering in PHP

4. Reading Excel Sheet in PHP

In this article you will learn, how you can read Microsoft Excel Sheet in PHP using Open Source Tool PHPExcelReader.

5. XML Parsing in PHP/XPath Way

If you are a PHP developer, you surely must have done XML parsing at some stage or the other. Parsing XML using XPath is far more better than other techniques, not only because it’s quite simple but also because it’s extendable.

6. Retrieve Your Gmail Emails Using PHP and IMAP

Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time.
View Demo »

7. Directory Trees With PHP and jQuery

A simple way to keep track of many files is to use a directory tree. A directory tree lists out files and directories so that it’s easy to find what you’re looking for.

8. Send Hassle Free and dependable HTML emails with PHP

A simple straightforward function that sends HTML e-mails with a plain text counterpart for those over 80 and still using AOL 2.5.

9. How To Use Custom ini Files With PHP

The config file typically holds information that will be used over and over again, such as database info. Today, we will have a look at a simple example of using a custom ini file to set our preferences.

10. From MySQL to jQuery, via PHP, XML & Ajax

This article will focus on getting data from a database using PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems complex, but is in fact, very easy.

11. Create a Basic Web Service Using PHP, MySQL, XML, and JSON

Here’s how to create a basic web service that provides an XML or JSON response using some PHP and MySQL.

12. How URL shortner scripts work?

Ever thought of how those URL Shortening services work. Have a look at a nice technique to create your own URL shortening service.

13. Automatic Face Detection in Photos with PHP

Find out how to automatically detect and tag a face in an image.

14. Update Twitter using Command Line, Javascript, Or PHP.

Everyone seems to be all about Twitter so here’s some simple examples of how to update your Twitter status from a command line prompt, web server or simple html web site.

15. Making RESTful Requests in PHP

APIs have become a very commonplace part of many popular web sites and services, especially REST APIs. This article discusses how to get, post, put and delete with a REST API in PHP.

16. PHP Multithreading using CURL

Simultaneously fetch data from multiple websites using CURL’s multithreading option.

17. PHP HTTP Authentication

At times, you may wish to make certain pages of your site only viewable to a select few, you can do this by using PHP’s built in HTTP Authentication.

18. PHP copy directory from source to destination

To copy a directory source to a destination directory you will need to scan the source directory with all files and directory and copy to the destination. To accomplish this we should make a recursive function that will copy the files from source to target dir.

19. File Upload in PHP – Securing the things

Secure your file upload forms and prevent malicious users from attacking your web app.

20. HTML Scraper in PHP

Sometimes we want to extract the HTML content of the remote website page, this technique is called as HTML scraper. This article will discuss on how we can extract the HTML content of the remote webpage.

21. PHP Secure Login Tips and Tricks

In this article, you will get a list of PHP secure login tips and tricks that will definitely help you decide on your secure rating of your login page.

22. Use PHP To Gzip CSS Files

This technique is a powerful and simple way to reduce page download size and speed up your site that will work with most PHP installations

23. Backup Your Database into an XML File Using PHP

The database is the most important part of a web application. Imagine losing all of the data in your database — it would be tragic. Here’s a PHP snippet that outputs your database as XML.

24. How To Debug in PHP

This article breaks down the fundamentals of debugging in PHP, helps you understand PHP’s error messages and introduces you to some useful tools to help make the process a little less painful.

25. Optimizing a php application in 5 minutes

Optimizing means reducing loading and execution times, improving the user experience by making the application reacting more responsively. If your language of choice is php, fortunately this process takes only 5 minutes.

Related posts:

1. 21 Really Useful & Handy PHP Code Snippets

1. Bokeh Textures Pack

2. 10 Free High Res Surface and Rock Textures

3. 2 Old PostCards Textures

4. 10 Free High-Quality Jeans Textures

5. 50 High Quality Free Leaf Textures and Resources

6. 75 High-Quality Free Wood Textures

7. Free High Quality Grunge Metal Textures

8. Free and High-Quality Cloud Textures

9. Glitter Bokeh Texture Pack

10. Fractal Textures

11. 12 Free and High-Res Grungy Wall Textures

12. Tree Bark Texture Pack

13. 60+ Totally Free Rusted Metal Textures For Designers

14. 9 Free Rusty Photoshop Textures

15. 11 High Resolution Free Fabric Textures

Related posts:

1. 40 Fresh & Beautiful Examples of Websites With Large Backgrounds

1. CSS Typeset

CSS Typeset is a handy tool that allows to test different font-styles on a piece of text and provides with the CSS code for chosen font-style that you can copy paste into your stylesheet quickly.

2. TypeTester

TypeTester is similar to CSS Typeset but with this, you can compare three different font-styles simultaneously and choose the one you find suitable. It also lets you specify the base font-size to adjust the em values.

3. CSS Frame Generator

CSS Frame Generator generates an empty CSS frame for provided HTML elements. Just copy paste the XHTML content and it’ll create a CSS Frame and then you can add styles to the CSS frame which will save you a lot of time.

4. CSS Grid Builder

With CSS Grid Builder, you can quickly create a CSS-based, standards compliant web page layout. It uses the YUI Grids CSS framework which supports more than 1000 types of layouts.

5. YAML Builder

YAML Builder is another layout generation tool that uses YAML framework to create grid layouts.

6. Spiffy Corners

Spiffy Corners lets you create rounded corner flexible boxes without any images. With just few clicks you can add nice looking rounded corner box to your web page.

7. JotForm

JotForm makes creating HTML forms a breeze. With its Visual drag drop interface, you can quickly create HTML forms. Also there are pre-built templates like registration form, feedback form which you can use to set up your web forms in almost no time.

8. Kotatsu

Kotatsu lets you easily and quickly create HTML tables and attach CSS classes to rows, columns and cells of table.

9. CSS Sprite Generator

CSS Sprite Generator is a big time saver. Just upload a zip file containing all the images you want to convert into CSS sprite, it’ll not only create the sprite image but will also provide you with CSS styles which you can quickly use in your web page to utilize CSS sprites.

10. W3C CSS Validator

W3C CSS validator is perhaps the most widely used CSS validator. It is a great time saver in the sense as it points out various errors within your stylesheet so that you can create better and more accessible web pages.

11. Format CSS

With FormatCSS, you can upload your CSS code and select from the options available to achieve code formatting the way you want. For example you can convert a compact CSS code into readable form with proper line-breaks and indentation or vice-versa.

12. Dust-Me Selectors

Dust-Me Selectors is a firefox add-on that analyzes the opened web page’s HTML content and CSS code to find out those style definitions that are not used.

13. CSS Optimizer

CSS Optimizer is a tool for optimizing the file size of CSS files. It extracts every whitespace character out of CSS file to considerably reduce the file size.

14. CSS Redundancy Checker

CSS Redundancy Checker finds out redundant CSS styles that are no longer in use on your web pages so that you can remove them from the stylesheet to reduce CSS file size.

15. CSSTidy

CSSTidy is an open source CSS optimizer and parser that cleans up unnecessary white space within CSS file, modifies the color values to reduce the file size and optimizes margin, padding values and removes the last semi-colon from style definitions to reduce the file size.

If you know of some other CSS tool that you think should be listed here, do tell us in comments below.

No related posts.