“Outside the Box” Navigation with jQuery

Create OS X style docks and stacks navigation using this tutorial.

Sexy Drop Down Menu w/ jQuery & CSS

Tutorial to create a sexy drop down menu that can also degrade gracefully.

Designing the Digg Header: How To & Download

Tutorial to create digg style menu.

A Different Top Navigation

Create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

Perfect signin dropdown box likes Twitter with jQuery

Tutorial showing you how to create a login drop down with Twitter style using jQuery.

Sliding Jquery Menu Tutorial

Create vertical sliding menu similar to the envato website.

Animated Drop Down Menu with jQuery

Another menu similar to the envato marketplace.

A cross-browser drop-down cascading validating menu

Html Part

<div class="wrapper">
<div class="expand_top"><div class="expand_all"></div></div>
<div class="expand_wrapper">
	<h2 class="expand_heading"><a href="#">Wordpress Theme Development</a></h2>

	<div class="toggle_container">
		<div class="box">
			<h3>Wordpress Theme Development</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>
	</div>

	<h2 class="expand_heading"><a href="#">Magento E-commerce</a></h2>

	<div class="toggle_container">
		<div class="box">
			<h3>Need Shopping website?</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>

	</div>
</div>

CSS PART

h2.expand_heading {
	padding: 0 0 0 20px;
	margin: 0 0 5px 0;
	background: url(expand_collapse.png) no-repeat;
	height: 38px;
	line-height: 38px;
	width: 400px;
	font-size: 2em;
	font-weight: normal;
	float: left;
}
.expand_all
{
cursor:default;
}
h2.expand_heading a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h2.expand_heading a:hover {
	color: #ccc;
}

h2.active {background-position: left bottom;}
.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	border-top: 1px solid #d6d6d6;
	background: #ffffff;
	overflow: hidden;
	font-size: 1.2em;
	width: 400px;
	clear: both;
}
.toggle_container .box {
	padding: 20px;
}
.toggle_container .box p {
	padding: 5px 0;
	margin: 5px 0;
}
.toggle_container h3 {
	font: 2.0em normal Georgia, "Times New Roman", Times, serif;
	margin: 0 0 5px;
	padding: 0 0 5px 0;
	color:#000000;
	border-bottom: 1px dotted #ccc;
}
.toggle_container img {
	float: left;
	margin: 10px 15px 15px 0;
	padding: 5px;
	background: #ddd;
	border: 1px solid #ccc;
}
.expand_all
{
width:116px;
height:29px;
background:url(extra_buttons.png) no-repeat top left;
float:right;
cursor: pointer;
}
.expanded
{
background-position:bottom left;
}

Jquery Part

<script type="text/javascript">
$(document).ready(function(){
	$(".toggle_container").hide();
	$("h2.expand_heading").toggle(function(){
		$(this).addClass("active");
		}, function () {
		$(this).removeClass("active");
	});
	$("h2.expand_heading").click(function(){
		$(this).next(".toggle_container").slideToggle("slow");
	});
	$(".expand_all").toggle(function(){
		$(this).addClass("expanded");
		}, function () {
		$(this).removeClass("expanded");
	});
	$(".expand_all").click(function(){
		$(".toggle_container").slideToggle("slow");
	});
});
</script>

[download_demo demo="http://www.snilesh.com/demo/expand_collapse/" demo_alt="Jquery Expand Collapse" download="http://snilesh.com/demo/expand_collapse.zip" ] [/download_demo]

Other Resources Else Where

• Expandable Collapsible Toggle Pane
• Easy Toggle Jquery .

HTML

Lets start by creating html markup.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery PHP Feedback Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/scripts.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<!-- Feedback Form code Starts -->
	<div id="feedback_overlay_box">
	<div id="feedback_lightbox">
    	<div id="feedback_close">
        	<a href="#" title="close"></a>
        </div>
    	<div id="feedback_form">
        	<div id="feedback_response"></div>
        	<div id="feedback_error"></div>
        	<form name="feedback_form" method="post" action="http://www.snilesh.com/demo/jquery_feedback/send_email.php?action=sendemail#feedback_response" class="wp_feedback_form">
            	<p>
                	<label>Name :</label>
                    <input type="text" name="name"  id="feedback_name" class="feedback_text" />
                </p>
                <p>
                	<label>Email :</label>
                    <input type="text" name="email" id="feedback_email" class="feedback_text" />
                </p>
                <p>
                	<label>Website :</label>
                    <input type="text" name="website" id="feedback_website" class="feedback_text" />
                </p>
                <p>
                	<label>Message :</label>
                    <textarea name="message" class="feedback_textarea" id="feedback_message"></textarea>
                </p>
                <p>
                	<input type="image" src="images/default/submit.png"  />
                </p>
            </form>
        </div>
    </div>
    </div>
	<!-- Feedback Form code Ends -->
	<!-- Feedback Button -->
    <div id="feedback_button">
    	<a href="#" title=""></a>
    </div>
	<!-- Feedback Button End -->

	<!-- Content Of page Starts -->
	<div id="wrapper">
		<h1>JQUERY PHP FEEDBACK FORM</h1>
		<p>Click on the feedback button right side of the screen to check the demo.</p>
		<p>Tutorial is created to add feedback button with a lightbox form.</p>
		<p>Read Tutorial at</p>
		<h2><a href="http://www.snilesh.com/resources/jquery/jquery-php-feedback-form/" target="_blank" title="Jquery PHP Feedback Tutorial">Jquery PHP Feedback Tutorial</a></h2>
	</div>
	<!-- Content of page ends -->
</body>
</html>

In above html code the feedback form and button code is added at the top in tag as we want the feedback button at right side of the page and feedback form over all the page content.

CSS Style style.css

#feedback_lightbox
{
	width:350px;
	z-index:9999;
	position:relative;
	top:20%;
	left:30%;
}
#feedback_overlay_box
{
 position:absolute;
 top:0;
 left:0;
 background:#000000;
 overflow:hidden;
 z-index:9998;
 width:100%;
 display:none;
 height:100%;
}
#feedback_button
{
width:22px;
height:90px;
position:fixed;
right:0;
top:40%;
overflow:hidden;
}
#feedback_button a
{
width:22px;
height:90px;
overflow:hidden;
background:blue url(images/feedback_tab_white.png) no-repeat top left;
display:inline-block;
padding:3px;
}
#feedback_close
{
display:block;
height:30px;
text-align:right;
width:350px;
}
#feedback_close a
{
	display:block;
	background:url(images/close_30.png) no-repeat top left;
	width:30px;
	float:right;
	height:30px;
}
#feedback_form
{
	width:280px;
	background: #ffffff url(images/dialog.png) repeat-x left bottom;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1);
	padding:30px;
}
#feedback_form p
{
padding:0px 0px 10px 0px;
margin:0px;
display:block;
}
#feedback_form p label
{
display:block;
font-size:12px;
line-height:16px;
padding:0px 0px 3px 0px;
color:red;
}
#feedback_form p .feedback_text,#feedback_form p .feedback_textarea
{
	border:1px solid #999999;

}
#feedback_error
{
margin:10px 0px 0px 0px;
border:1px solid red;
padding:10px;
overflow:hidden;
display:none;
}
#feedback_response
{
margin:10px 0px 10px 0px;
border:1px solid green;
padding:10px;
color:green;
overflow:hidden;
display:none;
}

You can edit this stylesheet code to improve the appearance of the form elements.

Jquery Code

code is included inside the js/script.js file

	$(document).ready(function(){
		/* Show Feedback form when feedback button clicked */
		$('#feedback_button a').click(function(){
			$('#feedback_overlay_box').show();
		});
		/* Hide Feedback form when close button clicked */
		$('#feedback_close a').click(function(){
			$('#feedback_overlay_box').hide();
		});

		/* Following code will be called when user submit the feedback form */
		$('.wp_feedback_form').submit(function(){
		var url = $(this).attr('action');
		var update = url.split("#")[1];
		var name = $("#feedback_name").val();
		var email = $("#feedback_email").val();
		var website=$("#feedback_website").val();
		var message=$("#feedback_message").val();
		var dataString = 'email='+ email + '&name=' + name+'&website='+website+'&message='+message;
		var emailFormat = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;

		/* In first part of this code we validated inputs entered by user. */
		if (email == '' || name == '' || website=='') {
			$("#feedback_error").fadeIn(200).html("All fields are required !");
		}else if (email.search(emailFormat) == -1) {
			$("#feedback_error").fadeIn(200).html("Invalid Email Address!");
		}

		else
		{
			/*
			Following code will send a jquery ajax request to the send_email.php file,
			with user inputs */
			$.ajax({
				type: "POST",
				url: "" + url + "",
				data: dataString,
				success: function(response){
			/* Response is add to the #feedback_response div */
					$('#feedback_response').html(response);

				},
				complete: function(){
			/* On completion of ajax request following methods are called. */
					$("#feedback_error").fadeOut(200);
					$("#feedback_response").fadeIn(200);
					$(".feedback_text").val('');
					}

			});

		}
		return false;
		});
	});

PHP CODE

For email sending we will use php mail()

 <?php
	$to="mail@website.com"; /* All the emails will be sent to this email address. */
	/* Get all the field values */
	$from=$_POST['email'];
	$name=$_POST['name'];
	$website=$_POST['website'];

	$subject="Feedback Posted on  Your Website"; /* Subject added to email.*/
	$success_message="Thanks For your feedback!."; /* Success message displayed on the form.*/
	$info =addslashes($_POST['message']);
	$message="<h2>".$subject."</h2>";
	$message.="<p>Name = ".$name.'</p>';
	$message.="<p>Email = ".$from.'</p>';
	$message.="<p>Website = ".$website.'</p>';
	$message.="<p>Message = ".$info.'</p>';
	// To send HTML mail, the Content-type header must be set
	$headers  = 'MIME-Version: 1.0' . "\r\n";
	$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
	$headers .= 'From:'.$from;
	if (mail($to, $subject, $message,$headers)) {
	echo $success_message;
	}
	else
	{
		echo 'ERROR Sending Email. Please try again.';
	}

 ?>

You can use this feedback form code to get feedbacks from users. All your comment and suggestion will be appreciated.
Demo Download

Showing Off bit.ly Clicks of Your Posts With jQuery

By Mike More, July 29th, 2010
Site: AEXT

Thumbnails Navigation Gallery with jQuery

By Mary Lou, July 29th, 2010
Site: Codrops

Building a custom HTML5 video player with CSS3 and jQuery

By Cristian-Ionut Colceriu, July 28th, 2010
Site: Dev Opera

Start Experimenting With CSS3 Keyframe Animations

By Lee Munroe, July 28th, 2010
Site: Lee Munroe

Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Widgets

By Zoltan, July 27th, 2010
Site: User Agent Man

20 Steps to a Flexible and Secure WordPress Installation

By Karthik Viswanathan, July 26th, 2010
Site: Nettuts+

Making a Custom YouTube Video Player With YouTube’s APIs

By Martin Angelov, July 23rd, 2010
Site: Tutorialzine

Designing Style Guidelines For Brands And Websites

By Kat Neville, July 21st, 2010
Site: Smashing Magazine

Creating Custom Fields for Attachments in WordPress

By Andy Blackwell, July 20th, 2010
Site: Nettuts+

Bulletproof CSS3 Media Queries

By Vladimir Carrer, July 20th, 2010
Site: Carrer Web Log

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

By Rachel Andrew, July 19th, 2010
Site: Smashing Magazine

Improve your WordPress Navigation Menu Output

By Christian Budschedl, July 18th, 2010
Site: Kriesi

Textarea Tricks

By Chris Coyier, July 16th, 2010
Site: CSS-Tricks

Slide Down Box Menu with jQuery and CSS3

By Mary Lou, July 16th, 2010
Site: Codrops

5 Web Files That Will Improve Your Website

By Alexander Dawson, July 15th, 2010
Site: Six Revisions

How to Create a Web Service in a Matter of Minutes

By Christian Heilmann, July 14th, 2010
Site: Nettuts+

Optimizing JavaScript/jQuery Loading Time, a Beginner’s Guide

By Cedric Dugas, July 13th, 2010
Site: Position Absolute

WordPress Security Lockdown

By Jeff Starr, July 12th, 2010
Site: Digging into WordPress

The 960 Grid System Made Easy

By Joshua Johnson, July 12th, 2010
Site: Six Revisions

Object-Oriented PHP for Beginners

By Jason Lengstorf, July 8th, 2010
Site: Nettuts+

HTML5 Web Storage

By Peter Lubbers and Brian Albers, July 7th, 2010
Site: Dr Dobbs

A Beginner’s Guide to Design Patterns

By Nikko Bautista, July 7th, 2010
Site: Nettuts+

Supersize that Background, Please!

By Bobby van der Sluis, July 6th, 2010
Site: A List Apart

How to Use the New Custom Menu Feature in WordPress 3.0

By Louis Simoneau, July 6th, 2010
Site: SitePoint

An Introduction to Microsoft Silverlight 4 – Part 1, Part 2

By Mike Taulty, July 5th, 2010
Site: Activetuts+

Image Highlighting and Preview with jQuery

By Mary Lou, July 4th, 2010
Site: Codrops

How to Create a “Stay-On-Top” Menu with CSS3 and jQuery

By Irina Borozan, July 1st, 2010
Site: 1stwebdesigner

So which tutorials you found most useful. Also feel free to recommend any good article that we may have missed.

Sexy Image Hover Effects

Fancy Image Gallery

Beautiful Photo Stack Gallery

Snowstack

Image gallery

CSS3 transitions gallery

Polaroid Photo Gallery

Polaroid Photo Gallery By 24ways

Polaroid from Tutorialzine

Polaroids with CSS3 by zurb

Nivo Slider

Nivo Slider is a lightweight jQuery plugin for creating good-looking image sliders, offers 9 unique transition effects.

Coin Slider

Coin Slider is yet another jQuery image slider with unique transition effects.

Slide Thumbs

Slide thumbs is a jquery slider having thumbnail support.

Slide Deck

SlideDeck is a free jQuery slider plugin for making a web slide show presentation. Available as a slider jQuery SlideShow Plugin and a SlideShow WordPress Plugin.

jqFancyTransitions

is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

Jquery Mosaic Gallery

jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

CJ Flashy Slide Show

CJ Flashy Slide Show is a JQuery plugin that allows you to create a photo slide show that has some “flash-like” transitional effects.

Image Gallery With Fancy Transitions

This gallery comes with ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect.

So if we create this using server side script then many page loads will be needed. So if you want to create this at client side then you can create this using Jquery.

Example will be a country,state dropdown where the values in the state selectbox will depends on the value selected in the Country selectbox.

You can simply edit this script and use it as your needs.

Demo
Download

Below you will find most powerful, the most creative and most versatile of jQuery plugins and tutorials built using jQuery.

1] Jquery InnerFade

InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.
These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

2] Galleriffic

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.

3] Popeye – an inline lightbox alternative

Popeye generates an inline image gallery from an unordered list of images. The gallery features clever inline image enlargement, i.e. the enlarged image stretches out over the site content without adding a visual overlay of the whole site.

4] ShowCase

This plugin builds an autoscrolling, navigable image gallery, perfect to do a modern showcase in a portfolio web site.

5] PictureSlides

PictureSlides is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, and with fading effects

6] Jquery ImageSwitch

Jquery ImageSwitch is easy-to-use, simple and fast plug-in to create effect when you switch between images.

7] S3Slider

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.

8] Gallery View

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

9] Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded.

10] CrossSlide

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins.

11] A Simple jQuery Slideshow

This is a nice tutorial to create simple Jquery slideshow.

12] Smooth Div Scroll

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scroling to distinct steps.

13] Simple Controls Gallery

Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery.

14] Sliding Image Gallery

The idea behind this plug-in is to display a varying number of images in an attractive and easy to use manner.

15] Flickr Photo Gallery

flickrGallery is an open-source photo gallery for jQuery that allows you to dynamically pull images from a photoset in Flickr.

16] Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.

17] EOGallery

EOGallery is a web animated slideshow gallery maid with jQuery. It only uses basic jQuery functions and Cody Lindley’s Thickbox to display larger pictures.

18] Full Screen Image Gallery Jquery and Flickr

full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background.

19] jQuery morphing gallery

Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa.

20] Simple JQuery Image Slide Show with Semi-Transparent Caption

simple image slide show with a semi-transparent caption with jQuery. This example is suitable to display news headlines, or a image slide show in your website frontpage.

21] Slick and Accessible Slideshow Using jQuery

Create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery).

22] Ultimate Fade-in slideshow (v2.1)

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

23] AD Gallery, gallery plugin for jQuery

A highly customizable gallery/showcase plugin for jQuery.

24] Jquery Panel Gallery Plugin 1.1

25] SlideViewerPro 1.0

slideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

26] Easy Image Preview with jQuery

Some Other Slideshow Scripts

Animated JavaScript Slideshow