Modal windows are commonly used in GUI systems to command user awareness and to display emergency states. On the Web, they are often used to show images in detail.

Use cases

Frequent uses of modal windows include:

• Drawing attention to vital pieces of information. This use has been criticised as ineffective because users are bombarded with too many dialog boxes, and habituate to simply clicking “Close”, “Cancel”, or “OK” without reading or understanding the message.
• Blocking the application flow until information required to continue is entered, as for example a password in a login process. Another example are file dialogs to open and save files in an application.
• Collecting application configuration options in a centralized dialog. In such cases, typically the changes are applied upon closing the dialog, and access to the application is disabled while the edits are being made.
• Warning that the effects of the current action are not reversible. This is a frequent interaction pattern for modal dialogs, but it is also criticised by usability experts as being ineffective for its intended use (protection against errors in destructive actions) due to habituation. Actually making the action reversible (providing an “undo” option) is recommended instead.

Simple Modal

BlockUIPlugin (v2)

FancyBox

jQuery Impromptu

ColorBox

Boxy

UI Dialog

The post SUPER 7 JQUERY MODAL DIALOGS appeared first on Web Developer Geeks.

These Are Things

Elevate

Mathieu Clauss

The Daily

Puma Running

Gimme Money, I can do it!

Rogwai

Orange Sprocket

Brave Nu Digital

Assistly

Ecoforms

Jeremy Church

Print Mor

David A. Molanphy

Tuscarora Tackle

Helms Workshop

Hugo & Marie

Tenthmil

StruckAxiom

Work at Play

The post 20 Beautiful Web Design Using JavaScript Sliders appeared first on Web Developer Geeks.

The 26^th of May is the final day for websites in Europe to comply with the new EU Cookie Law. This is a new piece of legislation focused on user privacy on the internet and requires webmasters to first ask and obtain consent from visitors if they wish to store or retrieve information about their online behavior. The consent needs to be obtained regardless of the device the data is stored on, including smartphones and tablets.

The directive started as an online privacy protection programme one year ago and was adopted by all EU countries on the 26^th of May 2011. The law gave all EU countries a grace period of one year in which they had time to modify legislation and comply with the addition. The main point behind the law was to make customers aware of how the information about them is collected and stored by web pages they visit and while this is a good idea, many concerned voices say the law doesn’t really do good for internet surfers.

What’s a cookie?

Cookies are the way for web pages all over the world to store information about visiting users. Other newer technologies like Flash and HTML5 Local Storage do the same and while they are covered by the EU Law as well, it was called “EU Cookie Law” because most of the information is stored through cookie usage.

Cookies are not only helpful for the webmasters. Actually, they are more helpful and beneficial to visitors. They are used to track people’s visits and surfing behaviors on the internet in order to deliver better targeted advertising.

They are also useful for some other kinds of actions. They are the ones helping websites keep the users logged in even after they leave the page. And it helps us by helping them. Visitors don’t want to log in all the time they visit a page. It would be annoying to log in every time you use Facebook, wouldn’t it? Also, remembering different settings users wish to use all the time is done through cookie usage as well.

Cookies help webmasters too, offering them information about the users behaviors on their web pages. Tracking tools such as Google Analytics, which measure site performance, will in most cases use cookies too.

However, the EU Cookie Law mostly focuses on the cookies that track user’s visited pages to deliver targeted advertising.

To create a general impression for you, we took a look at how many unique cookies some popular websites have.

• facebook.com: more than 382.000
• apps.facebook.com: more than 47.000
• dailymail.co.uk: more than 17.000
• google.co.uk: more than 12.000
• youtube.com: more than 10.500
• mail.google.com: more than 8.000
• google.com: more than 5.500
• imdb.com: more than 4.300

EU Cookie Law for users: Yes or No?

A survey has been conducted few days ago by the IMRG and eDigitalResearch. The survey was conducted in the UK and came with the following conclusions:

• 75% of UK consumers never heard of the e-Privacy Directive before taking the survey.
• After being informed about the law, 89% of the questioned people believed it is a positive step towards online privacy.
• 79% of the questioned believe something needs to be done in order to inform people about what cookies mean for their online experience and safety.
• 33% of them believe cookies may be used to virus computers.
• Only 23% of the questioned do not object against cookies which improve the user experience, which means 77% are actually against all kinds of cookies.

What to do?

The Information Commissioner’s Office (ICO) wrote a full guide for webmasters who wish to become compliant with the law. The document is long and has to be read from the beginning to the end, but I can make a short summary of it here, just so you get the basic ideas behind what you need to do.

The first step you need to take is to audit your website for cookies. You need to find out what kind of cookies your site sends to users. Find out what they are used for and which ones you need to get consent for, because there are some which according to the new law are legal to be used without consent.

To ask for user consent you need to use some tools, but first you need to analyze your website. The ICO recommends a powerful online tool to help you do this. It is called The Optanon Auditor and works as a plug-in for Google Chrome.

The Optanon Auditor tool can be use as a limited software on your domain – but it should be good enough to offer you a preview of what you need to change right away. Don’t forget you only have a few more days to comply with the rules. According to official reports, companies not complying with the rules can get a fine for up to half a million British Pounds in the UK.

Some other steps you might want to take include creating a link where you explain your users everything about privacy issues and the cookies you use. Some of them might not know what you talk about while some other might not be interested at all. But it would mean a lot for the ones who want to know what they get into when accepting cookies from your page. If you show you have nothing to hide, users will not be afraid to come back to your website.

Explain users what cookies are for and that you do not use them for malefic purposes. Start with the advantages they can get: staying logged in, having their settings remembered and so on. Put focus on them because they are the most important.

Helpful jQuery Plugins for EU Cookie Law

There are several jQuery plugins you could use on your website to help you get acceptance from your users.

The first one is called CookieCuttr and it is available as a WordPress plugin as well. What the plugin does is simple. It allows you to hide different parts of the website, such as the ones generating cookies, and display modal boxes which ask for permission to use cookies. They also show a “reset button” which helps users delete all the cookies for that respective website.

Cookie Control enables you to comply with UK and EU law on cookies, in a couple of quick and easy steps. Cookie Control does just that, presenting users with clear information on whether cookies are present, linking to your privacy policy (where you should have specific information about what cookies are in use), and advising users on how to adjust browser settings and what cookies mean for them.

The second plugin is called cPrompt and does the same as the first one, more or less: it displays a notification to visitors asking for them to enable cookies. They can do it by ticking a box and clicking the action button below the text.

Another useful plugin is called EU Cookie Law Script and is developed by the pro web developers from CodeCanyon. The plugin costs $5 and shows a smooth slide down banner with a fade in bubble where text can be customized and introduced in order for the visitors to get familiar with the issue. If the user agrees, the banner slides away.

The jQuery Cookie Compliancy from CodeCanyon is another helpful tool priced at $5. It provides webmasters a way to allow users to opt-in or out of using cookies. Once the usage of cookies is accepted, the restricted JavaScripts are automatically added and any future page loads will include them. Otherwise the JavaScripts will be disabled for the respective user.

Silktide is the last useful plugin I found. Its advantage is that it comes as an open-source tool. The free plugin is easy to install by only including few lines of code. Users visiting the website will see a message dropping from the top of the screen which will ask them for cookie usage consent.

Not agreeing?

If you think the law is not something you can live with, then this website is made for you. NoCookieLaw was made for people who want to protest against the legislation. The site explains users why the Cookie Law is bad for user experience and allows them to sign a petition to stop the enforcement of the law on websites.

Conclusion

With SOPA/PIPA acts taking the spotlights in press all over the world, there is no question about why not many people heard of the EU Cookie Law. Although good intentioned, the law does not do so much good in the end and can confuse users and put European companies in disadvantage, according to NoCookieLaw.

Now I am not the one to judge. Yes, online privacy is an important issue that needed to be addressed. But is the European Cookie Law the perfect answer to a question that has been asked too many times? I will let you decide on that. What do you think?
I have been able to put forward such a nice post due to designmodo’s information on this law.
Source: http://designmodo.com/eu-cookie-law/#ixzz1vUWjnfmD

The post EU Cookie Law And Way Not To Break It appeared first on Web Developer Geeks.

Demo    Download

You can have several “floating” objects with different attributes within your web page. Also, you might make these floated objects “landing” through plugin’s method, and vice versa of course. See below for more details about this.

How It Works

jqFloat.js uses  jQuery .animate() method with infinity loop to animate object’s to different positions, thus it make the object appears to be floating on the web page. Beside, it uses jQuery .data() method to store and keep track of each object’s attributes and status.

jqFloat.js works well in corss-browsers: IE6 and above, Firefox and Webkit browsers.

How to Use

1. First, of course, you need to include jQuery and jqFloat.js script files inside <head> tag.

It should work well with jQuery 1.7.1 (haven’t tested for lower version).

2. Next, you can make your HTML objects “floating” by calling .jqFloat() function on jQuery object like this:

$(document).ready(function() {
	$('object').jqFloat();
});

Well, try define own floating setting rather than using default value. Refer to configuration section for more detail.

3. Enjoy Floating ~!!!

Configuration:

.jqFloat( [Method] [, Options] )

Method: Used to control floating object.
Options: An array to configure floating animation.

Method:

Currently only two methods available:

Play (or no method specified)
Start floating animation.

Stop
Start landing animation (stop floating animation).

Options

There are few options can be used to configure floating animation.

width
Type: Int     Default: 100
Maximum horizontal floating area. The value will be divided by 2 and append to object left and right.

height
Type: Int     Default: 100
Maximum vertical floating area. The value will be divided by 2 and append to object top and bottom.

Example of Configuration

$(document).ready(function() {
	//if no method and options specified
	//start the floating animation with defaults settings
	$('object').jqFloat();
	//if only options specified
	//start the floating animation with specified settings
	$('object').jqFloat({
		width: 300,
		height: 300,
		speed: 100
	});
	//stop the floating animation or
	//start landing animation
	$('object').jFloat('stop');
	//start the floating animation
	$('object').jFloat('play');
});

License

jqFloat.js is licensed under the GNU General Public License version 2 or later. You can do whatever you like to the source code. =)

Demo    Download

The post jqFloat.js Floating elements with jQuery appeared first on Web Developer Geeks.

Cheat sheets are basically intended for those designers and developers who spend most of their working time in exploring different software environments and for them it is nearly impossible to remember shortcuts for each software environment, and this is the point where a cheap sheet comes in.

Here we’ve rounded up a few very useful cheat sheets wallpapers for web designers and developers in various sizes, covering various technologies, like CSS, HTML5, WordPress, Javascript and many more.

WORDPRESS HELP SHEET WALLPAPER

CSS 2.1 AND CSS 3 HELP CHEAT SHEETS

JQUERY CHEAT SHEET WALLPAPER

DRUPAL CHEAT SHEET DESKTOP WALLPAPER

HTML5 CANVAS CHEAT SHEET

PHOTOSHOP KEYBOARD SHORTCUTS CHEAT SHEET

COLOR THEORY QUICK REFERENCE POSTER

VI EDITOR / LINUX TERMINAL CHEAT SHEET

TEXTMATE SHORTCUTS WALLPAPER

THE ANATOMY OF TYPE

PROTOTYPE DISSECTED WALLPAPER

CUP OF JAVA WALLPAPER

ACTIONSCRIPT 2.0 CHEAT SHEET FLASHPAPER

RUBY ON RAILS CHEAT SHEET

MYSQL CHEAT SHEET

PHP CHEAT SHEET

EXPRESSIONENGINE CHEAT SHEET

THE ADVANCED WORDPRESS HELP SHEET

The post 18 Useful Cheat Sheets For Web Developers & Designers appeared first on Web Developer Geeks.

HTML

The only thing we will need for the navigation is a simple unordered list with links inside of the list elements:

Demo

The list is getting an ID because we want to refer to it later in the JavaScript. With jQuery, we will make the link items slide out whenever we hover over the li elements of the list.

CSS

First, we define the CSS properties for the list:

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}

The navigation should always be approachable for the user, even if he scrolls down the page. So, the position should be fixed. Margin and padding are explicitly set to 0, since the unordered list has default values for them. The navigation should also be on top of all other elements on the page. That’s why we set the z-index very high.
Now, let’s look at the list element properties:

ul#navigation li {
    width: 100px;
}

For the links in the list elements, we define the following CSS properties:

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
}

The margin-left is set to a negative value because we want to hide most of the icon and only reveal it when we hover over the list items. Basically, we are pushing the link element to the left, outside of the visual area of the page:

In the JavaScript part we will define a function that makes the elements slide out. But let’s first add some rounded borders to them (they don’t work in Internet Explorer, though):

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
}

To make them really neat, we add some opacity, so that the content underneath is visible:

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

The last filter property will make this work for Internet Explorer as well.
These were the common properties of all the link elements in the list. Now we will define the background image for the links in the specific list items:

ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}

And that was the CSS part. Now, let’s take a look at the few lines of JavaScript that will give some life to the navigation.

Javascript

Using jQuery, we will make the icons appear whenever we hover over one of the list items. Remember, the list item itself is 100 pixel wide, only the link element is being pushed outside of the page to the left, so that it is not visible.
We define the following function (before the end of the body tag) that get’s executed whenever we hover over a li:

$(function() {
 $('#navigation > li').hover(
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  },
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  }
 );
});

So, when hovering, we want the specific link element to get a left margin of -2 pixels, and that nicely animated, and not too slow (200 milliseconds). Moving the mouse out shall put the link element back to it’s old position (-85 pixels). The stop() function “stops all the currently running animations on all the specified elements” which gives the beautiful effect when, for example, hovering over all elements very quickly.
What would be really nice now, is to make the user aware that there is such an amazing navigation on your web page. Like it is now, the user will merely see some grey borders sticking out from the left side of the page. What could be better for showing the menu than actually showing the navigation shortly when the page loads. So, here we go.
So, we will initially let the navigation be visible. For that we change the left margin of the link elements:

ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

And we add the following line at the beginning of the JavaScript function:

$(function() {

 $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

 $('#navigation > li').hover(
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  },
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  }
 );
});

With that line we defined that it should take 1 second to give a left margin of -85 pixels to all the link elements in the list. Through the margin that we set we will show the navigation to the user and with the JavaScript we will then hide it.
And that’s all!
If you are a shadow-freak (like me), you can also add these lines to the CSS of the link element:

ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}

Demo

Adding the box shadow and removing opacity, will give the navigation items a 3D look. Leaving the opacity makes them look cool, too, try it out and enjoy the article!

The post Beautiful Slide Out Navigation: A CSS and jQuery Tutorial appeared first on Web Developer Geeks.

HTML

The HTML structure will consist of a wrapper with the class and ID st-accordion and an unordered list. The list items will have a link element which will serve as the item title and a content area that is initially hidden. The span with the class st-arrow will be the little indicator on the right side that we will make appear when we hover over its parent, the link element.

Demo Download

	

		

			
				Item Title
				Open or Close
			
			

				
Some content
			
		
		
 ... 
	

CSS

First, we will style the main wrapper. We will give it a width of 100 because we want it to adjust to the width of its surrounding wrapper. If you don’t have one, just use a suitable percentage here (if you want it to be liquid). The surrounding wrapper in the demo has a maximal width of 800 pixels and a width of 90%.
The st-accordion will have a minimal width of 270 pixels:

.st-accordion{
    width:100%;
    min-width:270px;
    margin: 0 auto;
}

Assuming that we have some kind of reset css that will remove paddings and margins from unordered lists etc., we define the style for each list element. We’ll set an initial height of 100 pixels which is basically the height of the link element and the overflow will be hidden, so we won’t see the content. When we open the item, we’ll animate its height in order to reveal the content. The borders that we are giving to the element will create a nice engraved separation between the items.

.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}

The first item should not have a top border:

.st-accordion ul li:first-child{
    border-top:none;
}

We’ll add a color transition to the link element which will create a nice effect on hover. The line-height should be the same like the initial height of the list element:

.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 46px;
    display: block;
	position: relative;
    line-height: 100px;
	outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
	-moz-transition:  color 0.2s ease-in-out;
	-o-transition:  color 0.2s ease-in-out;
	-ms-transition:  color 0.2s ease-in-out;
	transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
    color: #1693eb;
}

The span for the arrow will be positioned absolutely and we’ll hide it by setting it outside of the link element and giving it an opacity of 0. The transition will be the item moving from the right and fading in:

.st-accordion ul li > a span{
	background: transparent url(../images/down.png) no-repeat center center;
	text-indent:-9000px;
	width: 26px;
	height: 14px;
	position: absolute;
	top: 50%;
	right: -26px;
	margin-top: -7px;
	opacity:0;
	-webkit-transition:  all 0.2s ease-in-out;
	-moz-transition:  all 0.2s ease-in-out;
	-o-transition:  all 0.2s ease-in-out;
	-ms-transition:  all 0.2s ease-in-out;
	transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover span{
	opacity:1;
	right: 10px;
}

When we open an item, we will give it the class st-open and the link element will stay with the hover color. The span will be rotated to that the arrow stays pointing up and in sight:

.st-accordion ul li.st-open > a{
    color: #1693eb;
}
.st-accordion ul li.st-open > a span{
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
    transform:rotate(180deg);
	right:10px;
	opacity:1;
}

Let’s style the content and its elements:

.st-content{
    padding: 5px 0px 30px 0px;
}
.st-content p{
    font-size:  16px;
    font-family:  Georgia, serif;
    font-style: italic;
    line-height:  28px;
    padding: 0px 4px 15px 4px;
}
.st-content img{
    width:125px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}

With a media query we will make sure that the font size of the item title will be smaller:

@media screen and (max-width: 320px){
	.st-accordion ul li > a{
		font-size:36px;
	}
}

And that’s all the style! Let’s move on to the JavaScript.

Javascript

Let’s look at the most important parts of this plugin. We’ll start by the default options:

$.Accordion.defaults 		= {
	// index of opened item. -1 means all are closed by default.
	open			: -1,
	// if set to true, only one item can be opened.
	// Once one item is opened, any other that is
	// opened will be closed first
	oneOpenedItem	: false,
	// speed of the open / close item animation
	speed			: 600,
	// easing of the open / close item animation
	easing			: 'easeInOutExpo',
	// speed of the scroll to action animation
	scrollSpeed		: 900,
	// easing of the scroll to action animation
	scrollEasing	: 'easeInOutExpo'
};

We initialize our plugin by calling the init function:

_init 				: function( options ) {

		this.options 		= $.extend( true, {}, $.Accordion.defaults, options );

		// validate options
		this._validate();

		// current is the index of the opened item
		this.current		= this.options.open;

		// hide the contents so we can fade it in afterwards
		this.$items.find('div.st-content').hide();

		// save original height and top of each item
		this._saveDimValues();

		// if we want a default opened item...
		if( this.current != -1 )
			this._toggleItem( this.$items.eq( this.current ) );

		// initialize the events
		this._initEvents();

	}

The _saveDimValues function saves the original height and top of an item so that we know where we have to scroll when we open an item.
If we’ve set an item to be opened by default, we will call _toggleItem.
Then we initialize the events.
The _toggleItem function takes care of the two cases when clicking an item. Either we have the item already open, i.e. it has the class st-open, or it is closed. If it’s open, we’ll set the current to -1 and fade out the content while setting the item’s height to its original one. If the item we are clicking is closed, we’ll set the index of that item to be the current one, animate the height to fit the content and fade in the content. Then we scroll the window to the point that the clicked item stays at the top by calling the _scroll function:

_toggleItem			: function( $item ) {

	var $content = $item.find('div.st-content');

	( $item.hasClass( 'st-open' ) ) 

		? ( this.current = -1, $content.stop(true, true).fadeOut( this.options.speed ), $item.removeClass( 'st-open' ).stop().animate({
			height	: $item.data( 'originalHeight' )
		}, this.options.speed, this.options.easing ) )

		: ( this.current = $item.index(), $content.stop(true, true).fadeIn( this.options.speed ), $item.addClass( 'st-open' ).stop().animate({
			height	: $item.data( 'originalHeight' ) + $content.outerHeight( true )
		}, this.options.speed, this.options.easing ), this._scroll( this ) )
}

In the _initEvents function we initialize two events, clicking on an item and the window resize. When we click on an item we either open or close it calling the _toggleItem function and if we’ve set the option oneOpenedItem to true, we first close any opened item before opening the current one.
When the window gets resized we need to reset the original item values and the content’s height. We’ll also want to scroll the item to the top again.

_initEvents			: function() {

	var instance	= this;

	// open / close item
	this.$items.find('a:first').bind('click.accordion', function( event ) {

		var $item			= $(this).parent();

		// close any opened item if oneOpenedItem is true
		if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) {

			instance._toggleItem( instance.$items.eq( instance.current ) );

		}

		// open / close item
		instance._toggleItem( $item );

		return false;

	});

	$(window).bind('smartresize.accordion', function( event ) {

		// reset original item values
		instance._saveDimValues();

		// reset the content's height of any item that is currently opened
		instance.$el.find('li.st-open').each( function() {

			var $this	= $(this);
			$this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );

		});

		// scroll to current
		if( instance._isOpened() )
		instance._scroll();

	});

}

These were the most important functions for this accordion.
I hope you enjoyed this simple accordion and find it useful!

The post Flexible Slide-to-top Accordion appeared first on Web Developer Geeks.

Screen

We will create four steps in our form:

1. username and password fields



2. first name and last name and email address



3. age, gender and country



4. summary

HTML

First thing to do is to create the html structure. We need a box container with four divs, one for each step. The basic HTML code is the following:

Inside each box container we will put the fields and a simple helpful label. You can see the code inside the first box in the code below:

    
SIGN UP FOR A FREE YOURSITENAME ACCOUNT

    

        
        At least 4 characters. Uppercase letters, lowercase letters and numbers only.

        
        At least 4 characters. Use a mix of upper and lowercase for a strong password.

        
        If your passwords aren’t equal, you won’t be able to continue with signup.
    
      

    
      

We have used three input fields: username, password and confirm password and at the end of the box, an input submit for the next step. The other boxes work in the same way.

At the end of the container box you can see a simple progress bar. This code is necessary:

    

    
0% Complete

The complete HTML code is the following:

       


           
           

               
SIGN UP FOR A FREE YOURSITENAME ACCOUNT

               

                   
                   At least 4 characters. Uppercase letters, lowercase letters and numbers only.

                   
                   At least 4 characters. Use a mix of upper and lowercase for a strong password.

                   
                   If your passwords aren’t equal, you won’t be able to continue with signup.
               
      

               
           
      


           
           

               
SIGN UP FOR A FREE YOURSITENAME ACCOUNT

               

                   
                   Your First Name. 
                   
                   Your Last Name. 
                   
                   Your email address. We send important administration notices to this address
               
      

               
           
      


           
           

               
SIGN UP FOR A FREE YOURSITENAME ACCOUNT

               

                   
                        0 - 17
                       18 - 25
                       26 - 40
                       40+
                   
                   Your age range.  


                   
                       Male
                       Female
                   
                   Your Gender.  


                   
                       United States
                       United Kingdom
                       Canada
                       Serbia
                       Italy
                   
                   Your country.  


               
      

               

           
      


           
           

               
SIGN UP FOR A FREE YOURSITENAME ACCOUNT

               

                   
Summary

                   

                       
Username

                       
Password

                       
Email

                       
Name

                       
Age

                       
Gender

                       
Country

                   
               
      

               
           

       


           

           
0% Complete

As you can see, in the fourth step the table is empty. We fill it with the information entered by the users using jQuery.

CSS

Now we will add style to the form. Complete CSS Code is listed below:

/* CSS Reset (Eric Meyer) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

@font-face {
   font-family: 'Cantarell';
   src: url(../fonts/Cantarell-Regular.eot);
   src: local('Cantarell'), url('../fonts/Cantarell-Regular.ttf') format('truetype');
}

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;
}

input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; }
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#container {
    background: url('../images/container.png') no-repeat;
    width: 754px;
    height: 370px;
    margin: 20px auto;
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}
    #container #first_step, #second_step, #third_step, #fourth_step { display: none; }
    #container #first_step { display: block; }

    #container .form { margin: 66px 72px 0 72px; }

    #container h1, #container h2 {
        font-size: Cantarell, Verdana, sans-serif;
        text-align: center;
        font-size: 24px;
        text-shadow: 1px 1px 2px #222;
    }
        #container h1 span { color: #a90329; }

    #container h2 {
        color: #888;
        font-size: 20px;
        text-align: left;
        text-shadow: none;
    }

    #container table {
        margin: 20px 40px;
        font-size: 14px;
        font-weight: bold;
    }
        #container table td {
            padding: 5px 10px;
        }
            #container table td:nth-child(2) {
                color: #a90329;
            }

    #container input, #container select {
        background: url('../images/input.png') no-repeat;
        color: #888;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        height: 35px;
        padding: 0 25px;
        margin: 20px 0;
        float: left;

        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }
        #container input.submit {
            background: url('../images/button.png') no-repeat;
            border: none;
            cursor: pointer;
            width: 85px;
            height: 38px;
            position: relative;
            bottom: 2px;
            left: 655px;
        }
            #container input.submit:focus { border: none; }

        #container input.send{ background: url('../images/send.png') no-repeat; }

        #container input.error { border: 1px solid red; }
        #container input.valid { border: 1px solid #1FFF00; }

        #container input:focus, #container select:focus {
            border: 1px solid #a90329;
            color: #a90329;
        }

    #container select { padding: 5px 0 5px 25px; }
        #container option { padding: 0 15px; }

    #container label {
        color: #666;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        float: right;
        margin: 23px -25px;
        width: 270px;
    }

#progress_bar {
    background: url('../images/progress_bar.png') no-repeat;
    width: 339px;
    height: 24px;
    margin: 0 auto;
    position: relative;
}

#progress {
    background: url('../images/progress.png') repeat-x;
    width: 0px;
    height: 23px;

    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
#progress_text {
    position: relative;
    line-height: 21px;
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px #222;
    width: 339px;
    height: 24px;
    top: -23px;
    left: 0;
}

jQuery

We will use jQuery for:

• slide the steps
• check if the data are valid
• change the completion percentage of progress bar

We need to load jQuery library inside the page and then to use two plugins:

• jQuery UI, the most famous plugin used to extend the jQuery functionality.
• jQuery inputfocus, my jQuery plugin used to manage focus and blur events of the form.

Our jQuery code is listed below:

$(function(){
    //original field values
    var field_values = {

            //id        :  value
            'username'  : 'username',
            'password'  : 'password',
            'cpassword' : 'password',
            'firstname'  : 'first name',
            'lastname'  : 'last name',
            'email'  : 'email address'
    };

    //inputfocus
    $('input#username').inputfocus({ value: field_values['username'] });
    $('input#password').inputfocus({ value: field_values['password'] });
    $('input#cpassword').inputfocus({ value: field_values['cpassword'] });
    $('input#lastname').inputfocus({ value: field_values['lastname'] });
    $('input#firstname').inputfocus({ value: field_values['firstname'] });
    $('input#email').inputfocus({ value: field_values['email'] });

    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');

    //first_step
    $('form').submit(function(){ return false; });
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var fields = $('#first_step input[type=text], #first_step input[type=password]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<4 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
            if( $('#password').val() != $('#cpassword').val() ) {
                    $('#first_step input[type=password]').each(function(){
                        $(this).removeClass('valid').addClass('error');
                        $(this).effect("shake", { times:3 }, 50);
                    });

                    return false;
            } else {
                //update progress bar
                $('#progress_text').html('33% Complete');
                $('#progress').css('width','113px');

                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();
            }
        } else return false;
    });

    $('#submit_second').click(function(){
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');

        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        var fields = $('#second_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update progress bar
                $('#progress_text').html('66% Complete');
                $('#progress').css('width','226px');

                //slide steps
                $('#second_step').slideUp();
                $('#third_step').slideDown();
        } else return false;

    });

    $('#submit_third').click(function(){
        //update progress bar
        $('#progress_text').html('100% Complete');
        $('#progress').css('width','339px');

        //prepare the fourth step
        var fields = new Array(
            $('#username').val(),
            $('#password').val(),
            $('#email').val(),
            $('#firstname').val() + ' ' + $('#lastname').val(),
            $('#age').val(),
            $('#gender').val(),
            $('#country').val()
        );
        var tr = $('#fourth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });

        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();
    });

    $('#submit_fourth').click(function(){
        //send information to server
        alert('Data sent');
    });

});

The code from row 3 to 20 activates the inputfocus plugin to each input field. The code from row 27 to 64 check the validity of the data entered by the user (if username and password length is greater than 4 characters, if the password and confirm password fields are equal), then update the progress bar value and then slide to second step.
The code from row 71 to 100 check the data integrity for the second step (if first and last name aren’t empty and if the email address is valid). The rest is similar to the previous code.

So,We have seen how simple it’s to create a multistep signup form.
You can ask ivf you want me to clear anything requarding this.

The post Create Multi-Step Signup Form Using CSS3 and jQuery appeared first on Web Developer Geeks.

Let’s start from beginning.
First Of All, I want to place the background image with the grid overlay:

HTML

The next div element will be used to add the little boxes with their random position and rotation degree.

We will place a total of 10 boxes (div elements) into this container.
The menu and the heading will have the following HTML structure:

	
Lack of Color



	About
	Work
	Media
	Contact

After that, we will define the structure for the content area. There will be a main wrapper with the class “wdg_content_wrapper” which contains all the content containers that have the class “wdg_content” and a span for the closing cross:

	
	

		
About
		

			
Some text...
		
	
	

		...
	
	

		...
	
	

		...
	

One of the content elements is going to contain a list of images:

	
...
	

		

		

		
...
	
	
...

CSS

For this, we will embed our reset.css that will reset all the basic style-sheets, and we will define some main properties:

@import url('reset.css');

body{
	background:#000;
	color:#fff;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
}
a{
	color:#fff;
	text-decoration:none;
}

Then, we will define the styles for the image that we will use as a background and pattern:

img.wdg_bgimage{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	opacity:0.8;
	z-index:1;
}
.wdg_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/pattern.png) repeat top left;
	z-index:2;
}

The little boxes will all have a height and width of 50 pixel and they will have absolute positioning:

.wdg_heading h1{
	position:absolute;
	top:15px;
	left:15px;
	font-size:60px;
	color:#000;
	text-shadow:0px 0px 1px #fff;
	font-family:"Astloch", Arial, sans-serif;
	z-index:4;
}

The menu container will be placed perfectly to the left side of the screen:

.wdg_menu{
	position:absolute;
	top:150px;
	left:0px;
	z-index:11;
}

The link elements inside of the menu container will be black boxes with a neat transition on hover:

.wdg_menu a{
	background-color:#000;
	margin-bottom:2px;
	opacity:0.9;
	display:block;
	width:98px;
	height:98px;
	color:#fff;
	line-height:98px;
	text-align:center;
	text-transform:uppercase;
	outline:none;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-transition: all 0.2s ease-in;
}
.wdg_menu a:hover{
	color:#000;
	background-color:#fff;
}

Next step is to style the content wrapper. We will give it a fixed width and height and a semi-transparent dark background. We will hide it initially:

.wdg_content_wrapper{
	background:transparent url(../images/bg_menu.png) repeat top left;
	width:400px;
	height:400px;
	position:absolute;
	top:154px;
	left:200px;
	z-index:4;
	display:none;
}

Why don’t we just use opacity instead of a repeated background image?

In some browsers all child elements will inherit that opacity level and we cannot set it higher for them. So, if we really want the inner elements to be completely opaque, it’s safer to use a background image for the surrounding container.
The little closing span will have the following style:

span.wdg_close{
	position:absolute;
	top:10px;
	right:10px;
	width:11px;
	height:12px;
	cursor:pointer;
	background:transparent url(../images/close.png) no-repeat top left;
	opacity:0.8;
}
span.wdg_close:hover{
	opacity:1.0;
}

The content area is going to have some padding and we’ll hide it:

.wdg_content{
	padding:30px;
	display:none;
}

The heading will have some background image for the stripe underline:

.wdg_content h2{
	font-family:"Astloch";
	text-shadow:0px 0px 1px #fff;
	font-size:42px;
	background:transparent url(../images/line.png) repeat-x bottom left;
	padding:0px 0px 5px 0px;
	margin-bottom:10px;
}

The following container is for the resting content and it will be this element that we will apply the custom scrollbar to:

.wdg_content_inner{
	line-height:24px;
	height:268px;
	outline: none;
}
.wdg_content_inner p{
	padding:5px 0px;
}

For the thumbnail list in the “Work” section, we will have the following style:

ul.wdg_imagelist li{
	float:left;
	margin:2px;
	cursor:pointer;
}
ul.wdg_imagelist li img{
	display:block;
	opacity:0.3;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-transition: all 0.5s ease-in-out;
}
ul.wdg_imagelist li img:hover{
	opacity:1.0;
}

As you can see, we will add some transition to it, making the thumbnail become opaque swimmingly.

The JavaScript

So the main idea is to create those little boxes and scatter them around a restricted area and rotate them. When we click on a menu item, we’ll make those boxes animate to a certain position and form the main content container. Then we’ll show the container and the respective content. When clicking on the closing span, we want to make the boxes disperse again.

In the “Works” content, we will have some thumbnails that will show a background image when clicking on them.
So, let’s start by caching some elements:

var $menu				= $('#wdg_menu'),
	$menuItems			= $menu.children('a'),
	$mbWrapper			= $('#wdg_content_wrapper'),
	$mbClose			= $mbWrapper.children('.wdg_close'),
	$mbContentItems		= $mbWrapper.children('.wdg_content'),
	$mbContentInnerItems= $mbContentItems.children('.wdg_content_inner');
	$mbPattern			= $('#wdg_pattern'),
	$works				= $('#wdg_imagelist > li'),
	$wdg_bgimage			= $('#wdg_background > img'),

Next, we will define the “Menu” function:

Menu	= (function(){
  ...
})();

/*
call the init method of Menu
 */
Menu.init();

So, inside of our “Menu” function, we’ll define our main functionality, starting with a method to initialize the whole thing:

var init	= function() {
	preloadImages();
	initPlugins();
	initPattern();
	initEventsHandler();
}

We want to preload the images that we have in the “Work” content. The data attribute in the thumbnails tells us, which images we need:

preloadImages		= function() {
	$works.each(function(i) {
		$('').attr('src' , $(this).children('img').data('bgimg'));
	});
}

The jScollPane plugin needs to be initialized, and we’ll apply the custom scroll to the inner content area of the content div when we call this:

initPlugins			= function() {
	$mbContentInnerItems.jScrollPane({
		verticalDragMinHeight: 40,
		verticalDragMaxHeight: 40
	});
}

“initPattern” will randomly place 16 boxes (div elements) into a restricted area. We restrict that area by restricting the top and left values to a certain range:

initPattern			= function() {
	for(var i = 0; i < 16 ; ++i) {
		//opacity, random top, left and angle
		var o		= 0.1,
		t		= Math.floor(Math.random()*196) + 5, // between 5 and 200
		l		= Math.floor(Math.random()*696) + 5, // between 5 and 700
		a		= Math.floor(Math.random()*101) - 50; // between -50 and 50

		$el		= $('
').css({
			opacity			: o,
			top				: t + 'px',
			left			: l + 'px'
		});

		if (!$.browser.msie)
			$el.transform({'rotate'	: a + 'deg'});

		$el.appendTo($mbPattern);
	}
	$mbPattern.children().draggable(); //just for fun
},

When we close the content area we want to move the little boxes back, scattered around randomly again:

disperse			= function() {
	$mbPattern.children().each(function(i) {
		var o			= 0.1,
		t			= Math.floor(Math.random()*196) + 5,
		l			= Math.floor(Math.random()*696) + 5,
		a			= Math.floor(Math.random()*101) - 50;
		$el			= $(this),
		param		= {
			width	: '50px',
			height	: '50px',
			opacity	: o,
			top		: t + 'px',
			left	: l + 'px'
		};

		if (!$.browser.msie)
			param.rotate	= a + 'deg';

		$el.animate(param, 1000, 'easeOutExpo');
	});
}

Let’s handle the events:

initEventsHandler		= function() {
	/*
		click a link in the menu
	 */
	$menuItems.bind('click', function(e) {
		var $this	= $(this),
		pos		= $this.index(),
		speed	= $this.data('speed'),
		easing	= $this.data('easing');
		//if an item is not yet shown
		if(!$menu.data('open')){
			//if current animating return
			if($menu.data('moving')) return false;
			$menu.data('moving', true);
			$.when(openItem(pos, speed, easing)).done(function(){
				$menu.data({
					open	: true,
					moving	: false
				});
				showContentItem(pos);
				$mbPattern.children().fadeOut(500);
			});
		}
		else
			showContentItem(pos);
		return false;
	});

	/*
		click close makes the boxes animate to the top of the page
	 */
	$mbClose.bind('click', function(e) {
		$menu.data('open', false);
		/*
			if we would want to show the default image when we close:
			changeBGImage('images/default.jpg');
		 */
		$mbPattern.children().fadeIn(500, function() {
			$mbContentItems.hide();
			$mbWrapper.hide();
		});

		disperse();
		return false;
	});

	/*
		click an image from "Works" content item,
		displays the image on the background
	 */
	$works.bind('click', function(e) {
		var source	= $(this).children('img').data('bgimg');
		changeBGImage(source);
		return false;
	});

}

When we click on one of the thumbnails in the “Work” section, we want the background image to change. So we define:

changeBGImage			= function(img) {
	//if its the current one return
	if($wdg_bgimage.attr('src') === img || $wdg_bgimage.siblings('img').length > 0)
		return false;

	var $itemImage = $('');
	$itemImage.insertBefore($wdg_bgimage);

	$wdg_bgimage.fadeOut(1000, function() {
		$(this).remove();
		$wdg_bgimage = $itemImage;
	});
	$itemImage.fadeIn(1000);
}

This shows a content item when there is already one shown:

showContentItem			= function(pos) {
	$mbContentItems.hide();
	$mbWrapper.show();
	$mbContentItems.eq(pos).show().children('.wdg_content_inner').jScrollPane();
}

“openItem” moves the boxes from the top to the center of the page, and shows the respective content item:

openItem				= function(pos, speed, easing) {
	return $.Deferred(
		function(dfd) {
			$mbPattern.children().each(function(i) {
				var $el			= $(this),
				param		= {
					width	: '100px',
					height	: '100px',
					top		: 154 + 100 * Math.floor(i/4),
					left	: 200 + 100 * (i%4),
					opacity	: 1
				};

				if (!$.browser.msie)
					param.rotate	= '0deg';

				$el.animate(param, speed, easing, dfd.resolve);
			});
		}
	).promise();
};

And that’s All! We really hope you enjoyed the Article and find it useful!! If any query you can ask.

The post Moving Boxes Content with jQuery appeared first on Web Developer Geeks.

Vertical Layout

Horizontal Layout

The post Smooth Vertical or Horizontal Page Scrolling with jQuery appeared first on Web Developer Geeks.