I was working on our new open source project that i think you will like and I was working on the registration page. This is what I got in the end and i will walk you trough the process with me. This new tutorial is about styling the forms of your website, I find it very good looking and very simple to implement. We will use simple CSS and some JavaScript.

Usually for inserting text into the inputs or our forms we set the value attribute with the text and then use javascript to check for different scenarios for doing some fancy things. This is different we will use labels to fill the text and move them under the inputs and then just do our magic with JS.

The JavaScript library that we will use to create this effect for our forms is Jquery

1. Creating the markup!

            <div id="login">
                <div class="sayit">Log In:</div>
                <form action="javascript:void(0)" onsubmit="login()" autocomplete="off">
                    <label for="username">Username</label>
                    <input type="text" id="username"/>
                    <label for="password">Password</label>
                    <input type="password" id="password"/>
                    <input type="submit" class="medium button green" value="Log me In"/>
                </form>
            </div>

The above code is our markup and as you can see is very simple and it can be changed as you like because the code that we will use for checking for different scenarios in javascript will work without necessary classes or ids. We have 2 inputs and 2 labels, one is password one is text and we can work with these ones, you can add as many as you like.

Now let’s style these bastards!

2. Use CSS to style the form elements!

input[type=text],input[type=password]{padding: 5px 10px; background-color: transparent;	position: relative; z-index: 2;}
label{position: absolute; z-index: 1;-webkit-transition: opacity 0.15s linear; color: #bababa; background-color: #FFFFFF; }

#login{width: 290px; margin: 0 auto;}
#login input[type=text],#login input[type=password]{width:270px; margin: 5px 0; font-size: 24px; font-weight: bold; border: 1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; color: #595959;}
#login label{font-size: 24px; margin: 14px 10px;}

#login .sayit{font-size:24px; color: #595959; font-style: italic; padding-bottom: 5px;}

What we did here is make the label absolute so it will go under the input. This is important you will have to place the label before the input so remember this! The input will have a position relative and a z-index of 2 so we can be sure it will land above the label. Next we define the login div by using his id(#login). We use CSS3 for creating the round borders for the input and style the label by setting a big font-size to fit the input. The rest is pretty obvious, if you have trouble understanding this then let us know in the comments.

3. Make everything move with JS!

$(document).ready(function(){
    $.string(String.prototype);
    $("input,textarea").each(function (type) {
        $(this).focus(function () {
            if($(this).val().blank())
                $(this).prev("label").fadeTo('fast',0.45);
        });

        $(this).keypress(function () {
            $(this).prev("label").fadeTo('fast',0);
        });

        $(this).blur(function () {
            if($(this).val().blank()){
                $(this).prev("label").fadeTo('fast',1);
            }
        });
    });
});

We use here jQuery of course that we add using the google api like this:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

And one plugin that I use to extend the jQuery string properties and that is $.string plugin. After we do that we create the above code and we assign to input and textarea elements a focus, keypress and blur actions. We use the focus action to lower the labels opacity to 45% then on keypress we just hide it for good. Then on blur we check to see if anything was written in our sexy element and if not then we fade the label back to 100%. This is kind of everything we do here, pretty simple.

4. Showing of a demo and download source

I’ve set up a demo here: DEMO

The source code you can either pick it from the demo page or from here: SOURCE

5. Wrapping up!

So here is our nice form styling that you can use on your website and that can be done very easily. Feel free to leave us comments and suggestions. Thanks a lot!

Have fun coding!

Related posts

• Making a Mosaic Slideshow With jQuery and CSS (0)
• How to Code up a Web Design from PSD to HTML (0)
• Sweet AJAX Tabs With jQuery 1.4 and CSS3 (0)
• Making a Photoshoot Effect With jQuery and CSS (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)

1. Understand jQuery!

When you call ‘jQuery’ what happens?

The jQuery function itself is very simple:

jQuery = function (selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context);
};

Under its skin, the jQuery function (commonly referred to as the “wrapper” function) simply returns an instantiated jQuery object — i.e. an instance of the ‘jQuery.fn.init’ constructor.

This is useful to know; with this information we know that each time we call ‘jQuery’ we’re actually creating a totally unique object with a set of properties. jQuery is clever in that it gives you an object that can be treated as an array. Each of your elements (all together, commonly known as the “collection”) is referenced within the object under a numerical index, just like within an array. And jQuery also gives this object a ‘length’ property, just as you would expect from an array. This opens up a world of possibilities. For one, it means that we can borrow some functionality from ‘Array.prototype’. jQuery’s ’slice’ method is a good example of this — modified from the source:

/* ... jQuery.fn.extend({ ... */
slice: function() {
    return this.pushStack(
        Array.prototype.slice.apply( this, arguments ),
        "slice",
        Array.prototype.slice.call(arguments).join(",")
    );
},
/* ... */

The native ’slice’ method doesn’t care that ‘this’ is not a real array– it’ll be fine with anything that’s got a ‘length’ property and [0], [1], [2] etc.

There are some other interesting properties within this jQuery object — ‘.selector’ and ‘.context’ will, most of the time, reflect the arguments that you pass into ‘jQuery(…)’.

var jqObject = jQuery('a');
jqObject.selector; // => "a"

One thing that’s important to note is that jQuery will sometimes give you new jQuery objects to work with. If you run a method that changes the collection in some way, such as ‘.parents()’, then jQuery won’t modify the current object; it’ll simply pass you a brand new one:

var originalObject = jQuery('a');
var anotherObject = originalObject.parents();

originalObject === anotherObject; // => false

All methods that appear to mutate the collection in some way return a brand new jQuery object — you can still access the old object though, via ‘.end()’, or more verbosely, via ‘.prevObject’.

2. Bread-and-butter Element Creation

Central to jQuery’s DOM capabilities, is its element creation syntax. 1.4 brought with it an entirely new way to create your elements quickly and succinctly. E.g.

var myDiv = jQuery('<div/>', {
    id: 'my-new-element',
    class: 'foo',
    css: {
        color: 'red',
        backgrondColor: '#FFF',
        border: '1px solid #CCC'
    },
    click: function() {
        alert('Clicked!');
    },
    html: jQuery('<a/>', {
        href: '#',
        click: function() {
            // do something
            return false;
        }
    })
});

As of 1.4 you can pass a second argument to the jQuery function when you’re creating an element — the object you pass will, for the most part, act as if you were passing it to ‘.attr(…)’. However, jQuery will map some of the properties to its own methods, for example, the ‘click’ property maps to jQuery’s ‘click’ method (which binds an event handler for the ‘click’ event) and ‘css’ maps to jQuery’s ‘css’ method etc.

To check out what properties map to jQuery’s methods, open your console and type ‘jQuery.attrFn’.

3. Serialize your Inputs

jQuery provides a method that you can use to serialize all of the inputs within one or more forms. This is useful when submitting data via XHR (“Ajax”). It’s been in jQuery for a long time but it’s not often talked about and so many developers don’t realise it’s there. Submitting an entire form via Ajax, using jQuery, couldn’t be simpler:

var myForm = $('#my-form');
jQuery.post('submit.php', myForm.serialize(), function(){
    alert('Data has been sent!');
});

jQuery also provides the ’serializeArray’ method, which is designed to be used with multiple forms, and the ‘param’ helper function (under the jQuery namespace) which takes a regular object and returns a query string, e.g.

var data = {
    name: 'Joe',
    age: 44,
    profession: 'Web Developer'
};

jQuery.param(data); // => "name=Joe&age=44&profession=Web+Developer"

4. Animate Anything

jQuery’s ‘animate’ method is probably the most flexible of jQuery’s methods. It can be used to animate pretty much anything, not just CSS properties, and not just DOM elements. This is how you would normally use ‘animate’:

jQuery('#box').animate({
    left: 300,
    top: 300
});

When you specify a property to animate (e.g. ‘top’) jQuery checks to see if you’re animating something with a style property (‘element.style’), and it checks if the specified property (‘top’) is defined under ’style’ — if it’s not then jQuery simply updates ‘top’ on the element itself. Here’s an example:

jQuery('#box').animate({
    top: 123,
    foo: 456
});

‘top’ is a valid CSS property, so jQuery will update ‘element.style.top’, but ‘foo’ is not a valid CSS property, so jQuery will simply update ‘element.foo’.

We can use this to our advantage. Let’s say, for example, that you want to animate a square on a canvas. First let’s define a simple constructor and a ‘draw’ method that’ll be called on every step of the animation:

function Square(cnvs, width, height, color) {

    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.color = color;

    this.cHeight = cnvs.height;
    this.cWidth = cnvs.width;
    this.cntxt = cnvs.getContext('2d');

}

Square.prototype.draw = function() {

    this.cntxt.clearRect(0, 0, this.cWidth, this.cHeight);
    this.cntxt.fillStyle = this.color;
    this.cntxt.fillRect(this.x, this.y, this.width, this.height);

};

We’ve created our ‘Square’ constructor, and one of its methods. Creating a canvas and then animating it couldn’t be simpler:

// Create a <canvas/> element
var canvas = $('<canvas/>').appendTo('body')[0];
canvas.height = 400;
canvas.width = 600;

// Instantiate Square
var square = new Square(canvas, 70, 70, 'rgb(255,0,0)');

jQuery(square).animate({
    x: 300,
    y: 200
}, {
    // 'draw' should be called on every step
    // of the animation:
    step: jQuery.proxy(square, 'draw'),
    duration: 1000
});

This is a very simple effect, but it does clearly demonstrate the possibilities. You can see it in action here: http://jsbin.com/ocida (this will only work in browsers that support the HTML5 canvas)

5. jQuery.ajax Returns the XHR Object

jQuery’s Ajax utility functions (‘jQuery.ajax’, ‘jQuery.get’, ‘jQuery.post’) all return an ‘XMLHttpRequest’ object which you can use to perform subsequent operations on any request. For example:

var curRequest;

jQuery('button.makeRequest').click(function(){
    curRequest = jQuery.get('foo.php', function(response){
        alert('Data: ' + response.responseText);
    });
});

jQuery('button.cancelRequest').click(function(){
    if (curRequest) {
        curRequest.abort(); // abort() is a method of XMLHttpRequest
    }
});

Here we’re making a request whenever the ‘makeRequest’ button is clicked — and we’re cancelling the active request if the user clicks the ‘cancelRequest’ button.

Another potential usage is for synchronous requests:

var myRequest = jQuery.ajax({
    url: 'foo.txt',
    async: false
});

console.log(myRequest.responseText);

Read more about the ‘XMLHttpRequest’ object and also be sure to check out jQuery’s Ajax utilities.

6. Custom Queues

jQuery has a built-in queuing mechanism that’s used by all of its animation methods (all of which use ‘animate()’ really). This queuing can be illustrated easily with a simple animation:

jQuery('a').hover(function(){
    jQuery(this).animate({paddingLeft:'+=15px'});
}, function(){
    jQuery(this).animate({paddingLeft:'-=15px'});
});

Quickly hovering over a bunch of anchors and then hovering over them again will cause the animations to queue up and occur one at a time — I’m sure many of you have witnessed this queuing effect before. If not, check it out here: http://jsbin.com/aqaku

The ‘queue’ method is similar to the well-known ‘each’ method in how it’s called. You pass a function, which will eventually be called for each of the elements in the collection:

jQuery('a').queue(function(){
    jQuery(this).addClass('all-done').dequeue();
});

Passing just a function to ‘queue’ will cause that function to be added to the default ‘fx’ queue, i.e. the queue used by all animations done by jQuery. Therefore, this function will not be called until all current animations occurring on each element in the collection (in this case, all anchors) have completed.

Notice that we’re adding a class of ‘all-done’ in the function above. As outlined, this class will only be added when all current animations are complete. We’re also calling the ‘dequeue’ method. This is very important, as it will allow jQuery to continue with the queue (i.e. it lets jQuery know that you’re finished with whatever you’re doing). jQuery 1.4 provides another way of continuing the queue; instead of calling ‘dequeue’, simply call the first argument passed to your function:

jQuery('a').queue(function(nextItemInQueue){
    // Continue queue:
    nextItemInQueue();
});

This does exactly the same, although it’s slightly more useful in that it can be called anywhere within your function, even within a mess of closures (that typically destroy the ‘this’ keyword). Of course, pre-jQuery-1.4 you could just save a reference to ‘this’, but that would get a bit tiresome.

To add a function to a custom queue, simply pass your custom queue’s name as the first argument and the function as the second:

jQuery('a').queue('customQueueName', function(){
    // Do stuff
    jQuery(this).dequeue('customQueueName');
});

Notice that, since we’re not using the default ‘fx’ queue, we also have to pass our queue’s name to the ‘dequeue’ method, in order to allow jQuery to continue with our custom queue.

Read more about ‘queue’, ‘dequeue’ and ‘jQuery.queue’.

7. Event Namespacing

jQuery provides a way for you to namespace events, which can be very useful when authoring plugins and third-party components. If needed, the user of your plugin can effectively disable your plugin by unbinding all event handlers that it’s registered.

To add a namespace when registering an event handler, simply suffix the event name with a period and then your unique namespace (e.g. ‘.fooPlugin‘):

jQuery.fn.foo = function() {

    this.bind('click.fooPlugin', function() {
        // do stuff
    });

    this.bind('mouseover.fooPlugin', function() {
        // do stuff
    });

    return this;
};

// Use the plugin:
jQuery('a').foo();

// Destroy its event handlers:
jQuery('a').unbind('.fooPlugin');

Passing just the namespace to ‘unbind’ will unbind all event handlers with that namespace.

Conclusion

So which ones did I miss? Any helpful features that you feel jQuery doesn’t document well enough? Let’s discuss in the comments!

Related posts

• Make your MooTools Code Shorter, Faster, and Stronger (0)
• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• How to Code up a Web Design from PSD to HTML (0)
• 2 Different Ways For Getting Twitter Status / PHP and jQuery (0)
• Protect Your Flash Files From Decompilers by Using Encryption (0)

But changes do not come from nowhere. The early adopters are already using what we are going to use day-to-day a few years from now. One of these technologies is HTML5 – the new version of the fundamental language of the web.

Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.

Step 1 – The Design

Every design process starts with an initial idea which you later build upon. At this stage designers usually go with programs such as Photoshop to work on the details and see how it will all look.

Photoshop Design

After this, the design is hand coded with HTML and CSS going hand by hand, moving from designing the background, colors and fonts, to detail work on the content section.

Step 2 – HTML

It is a good time to note, that HTML5 is still a work in progress. It will remain so probably till around 2022 (I am absolutely serious about this). However some parts of the standard are complete, and can be used today.

In this tutorial, we are using a few of the tags introduced with this new version of HTML:

• header – wraps your page header;
• footer – wraps your page footer;
• section – groups content into sections (e.g. main area, sidebar etc);
• article – separates the individual articles from the rest of the page;
• nav – contains your navigation menu;
• figure – usually contains an image used as an illustration for your article.

These are used exactly as you would use normal divs. With the difference being that these tags organizes your page semantically. In other words, you can present your content in such a way, that the subject matter of your page can be more easily determined. As a result services, such as search engines, will bring you more targeted visitors and thus boost your revenue (and theirs actually).

However, there are some implications in using HTML5 today. One of the most notable is the IE family of browsers, which does not support these tags (it can be fixed with a simple JavaScript include file though). This is why you should base your decision for moving to HTML5 on your site’s audience. And just for this purpose, we are releasing a pure XHTML version of this template as well.

template.html – Head section

<!DOCTYPE html> <!-- The new doctype -->

<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Coding A CSS3 &amp; HTML5 One Page Template | Tutorialzine demo</title>

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

	<!-- Internet Explorer HTML5 enabling script: -->

	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<style type="text/css">

			.clear {
				zoom: 1;
				display: block;
			}

		</style>

	<![endif]-->

</head>

You can notice the new <DOCTYPE> at line one, which tells the browser that the page is created with the HTML5 standard. It is also much shorter and easier to remember than older doctypes.

After specifying the encoding of the document and the title, we move on to including a special JS file that will enable Internet Explorer (any version) to render HTML5 tags properly. Again, this means that if a visitor is using IE and has JavaScript disabled, the page is going to show up all messed up. This is why, depending on your audience, you should consider the regular XHTML version of this template, which works in any browser and is released free for all our readers here.

template.html – Body Section

<body>

	<section id="page"> <!-- Defining the #page section with the section tag -->

	<header> <!-- Defining the header section of the page with the appropriate tag -->

		<h1>Your Logo</h1>

		<h3>and a fancy slogan</h3>

		<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->

			<ul>

				<li><a href="#article1">Photoshoot</a></li>
				<li><a href="#article2">Sweet Tabs</a></li>
				<li><a href="#article3">Navigation Menu</a></li>

			</ul>

		</nav>

	</header>

Here we use the new section tags, which divide your page into separate semantic sections. Outermost is the #page section which is set to a width of 960px in the style sheet (a fairly standard width with older computer displays in mind). After this comes the header tag and the navigation tag.

Notice the href attributes of the links – the part after the hash symbol # corresponds to the ID of the article we want to scroll to.

template.html – Article

	<!-- Article 1 start -->

	<div class="line"></div>  <!-- Dividing line -->

	<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->

		<h2>Photoshoot Effect</h2>

		<div class="line"></div>

		<div class="articleBody clear">

			<figure> <!-- The figure tag marks data (usually an image) that is part of the article -->

				<a href="http://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
					<img src="http://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>

			</figure>

			<p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p>

		</div>

	</article>

	<!-- Article 1 end -->

The markup above is shared between all of the articles. First is the dividing line (the best solution semantically would be an <hr> line, which in HTML5 has the added role of a logical diving element, but unfortunately it is impossible to style in a cross-browser fashion, so we will stick with a DIV). After this we have the new article tag, with a unique ID, which is used by the navigation to scroll the page.

Inside we have the title of the article, two paragraphs and the new figure tag, which marks the use of images in the article.

template.html – Footer

		<footer> <!-- Marking the footer section -->

			<div class="line"></div>

			<p>Copyright 2010 - YourSite.com</p> <!-- Change the copyright notice -->
			<a href="#" class="up">Go UP</a>
			<a href="http://tutorialzine.com/" class="by">Template by Tutorialzine</a>

		</footer>

	</section> <!-- Closing the #page section -->

	<!-- JavaScript Includes -->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
	<script src="script.js"></script>

	</body>

</html>

Lastly, we have the footer tag, which does exactly what you expect it to do. At the bottom of the page are the rest of the JavaScript  includes, which add the jQuery library and the scrollTo plug-in, which we are going to use in the next steps.

An HTML5 & CSS3 Website Template

Step 3 – CSS

As we are using HTML5, we have to take some extra measures with the styling. The tags that this new version of HTML introduces, are not yet provided with a default styling. This is however easily fixed with a couple of lines of CSS code and the page works and looks as it is supposed to:

styles.css – Part 1

header,footer,
article,section,
hgroup,nav,
figure{
	/* Giving a display value to the HTML5 rendered elements: */
	display:block;
}

article .line{
	/* The dividing line inside of the article is darker: */
	background-color:#15242a;
	border-bottom-color:#204656;
	margin:1.3em 0;
}

footer .line{
	margin:2em 0;
}

nav{
	background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
	padding:0 5px;
	position:absolute;
	right:0;
	top:4em;

	border:1px solid #FCFCFC;

	-moz-box-shadow:0 1px 1px #333333;
	-webkit-box-shadow:0 1px 1px #333333;
	box-shadow:0 1px 1px #333333;
}

nav ul li{
	display:inline;
}

nav ul li a,
nav ul li a:visited{
	color:#565656;
	display:block;
	float:left;
	font-size:1.25em;
	font-weight:bold;
	margin:5px 2px;
	padding:7px 10px 4px;
	text-shadow:0 1px 1px white;
	text-transform:uppercase;
}

nav ul li a:hover{
	text-decoration:none;
	background-color:#f0f0f0;
}

nav, article, nav ul li a,figure{
	/* Applying CSS3 rounded corners: */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

We basically need to set the display value of the new tags to block, as you can see from the first couple of lines. After this we can style them as we would with regular divs.

We style the horizontal lines, the articles and the navigation buttons, with the latter organized as an unordered list inside of the nav tag. At the bottom we assign the border-radius property for four different types of elements of once, which saves a lot of code.

styles.css – Part 2

/* Article styles: */

#page{
	width:960px;
	margin:0 auto;
	position:relative;
}

article{
	background-color:#213E4A;
	margin:3em 0;
	padding:20px;

	text-shadow:0 2px 0 black;
}

figure{
	border:3px solid #142830;
	float:right;
	height:300px;
	margin-left:15px;
	overflow:hidden;
	width:500px;
}

figure:hover{
	-moz-box-shadow:0 0 2px #4D7788;
	-webkit-box-shadow:0 0 2px #4D7788;
	box-shadow:0 0 2px #4D7788;
}

figure img{
	margin-left:-60px;
}

/* Footer styling: */

footer{
	margin-bottom:30px;
	text-align:center;
	font-size:0.825em;
}

footer p{
	margin-bottom:-2.5em;
	position:relative;
}

footer a,footer a:visited{
	color:#cccccc;
	background-color:#213e4a;
	display:block;
	padding:2px 4px;
	z-index:100;
	position:relative;
}

footer a:hover{
	text-decoration:none;
	background-color:#142830;
}

footer a.by{
	float:left;

}

footer a.up{
	float:right;
}

In the second part we apply more detailed styling to the elements. A width for the page section, a hover property for the figure tag and styles for the links inside of the footer. There are also a few styles that are not included here, but you can see them in styles.css.

Now lets continue with the next step.

Structure Of The Page – HTML5 Tags

Step 4 – jQuery

To enhance the template, we will create a smooth scrolling effect once a navigation link has been clicked using the scrollTo jQuery plug-in we included in the page earlier. To make it work we just need to loop through the links in the navigation bar (and the UP link in the footer) and assign an onclick event which will trigger the $.srollTo() function.

script.js

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	$('nav a,footer a.up').click(function(e){

		// If a link has been clicked, scroll the page to the link's hash target:

		$.scrollTo( this.hash || 0, 1500);
		e.preventDefault();
	});

});

With this our template is complete!

Wrapping it up

In this tutorial we leveraged the new semantic features provided by HTML5 to design and code a one-page web template. You can use it for free both personally and commercially, providing you leave the back link intact.

Related posts

• How to Code up a Web Design from PSD to HTML (0)
• Design and Code a Cool iPhone App Website in HTML5 (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• Personal vCard Pt.2 (0)
• Design a Prettier Web Form with CSS 3 (0)

1. Create Your Own MooTools Build or Pull From Google AJAX Libraries

One of the great advantages to using MooTools is that it’s incredibly modular. What does that mean?
Almost nothing is required unless you need it. The advantage of MooTools’ modularity is that your
limited, custom MooTools build can keep your JavaScript load time short.

Want to create a custom MooTools build for your next project? Follow these steps:

• Go to http://mootools.net/core (and/or http://mootools.net/more if you’d like additional plugins)
• Select the plugins of your choosing. Don’t worry about accounting for dependencies — the plugin builder does that for you!
• Select the compression option of your choosing — the YUI Compressor will provide the you with the smallest possible build of MooTools

That’s it! Sometimes, however, your project requires the entire MooTools Core library. In that case, your website can save itself thousands
of requests per day by using the Google AJAX Libraries complete build of MooTools. You may do this two ways:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>

This first method simply includes MooTools into the page per normal. The second method allows more functionality and performance:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("mootools", "1.2.4"); //older versions also available
</script>

What’s great about using the Google AJAX Libraries API is that if another website uses the AJAX Library API, that version of MooTools is already cached
within their browser and the site will load faster!

2. Use jQuery and MooTools Together

While it’s best to stick to one library in a given page to avoid a bunch of overhead, sometimes you can’t avoid needing multiple frameworks.
Luckily MooTools can coexist with any non-prototype-based JavaScript frameworks. Here’s how you can use jQuery and MooTools in the same page:

<!-- jquery gets the "$" method -->
<script type="text/javascript" src="jquery-1.4.js" />
<!-- mootools doesn't steal the "$" method; instead, document.id will be used -->
<script type="text/javascript" src="mootools.js" />
<!-- lets use them -->
<script type="text/javascript">
//with jquery, grab all links, make then red
$('a').css('color','red');
//with mootools, get the content div, set it's background color to pink
document.id('content').setStyle('background','pink');
//with mootools, get the content div, set it's background color to pink
//this time, we'll give mootools the "$" method
(function($) {
	$('content').setStyle('background','pink');
})(document.id);
</script>

Thanks to MooTools’ Dollar Safe Mode, MooTools no longer assumes the “$” method if it’s already taken!

3. Save Elements and Element Collections

Developers often need to collect one element or a collection of elements. For example, you may need to grab all A elements within the page, change their color, and create tooltips from them.

//grab links, change color */
$$('#footer a').setStyle('color','#f00');
//make links tooltips
var tippers = new Tips($$('#footer a'));

The code above is grossly inefficient. Why query the DOM twice (with $$) if you can collect all of the elements once? Let’s make this more efficient:

//"save" links into a variable
var links = $$('#footer a');
//grab links, change color */
links.setStyle('color','#f00');
//make links tooltips
var tippers = new Tips(links);

You could make this even shorter, but it’s not as readable:

var tippers = new Tips($$('#footer a').setStyle('color','#f00'));

Readability is important, so I wouldn’t recommend coding this way if you work with a team.

4. Use Element Methods on Element Collections

Cycling through an array of elements is not unique to any JavaScript framework:

//for every link...
$$('a').each(function(a) {
	//add link nudging to the element
	a.addEvents({
		mouseenter: function() { //animate to the right
			if(!a.retrieve('oPad')) { a.store('oPad',a.getStyle('padding-left')); }
			a.tween('padding-left',30);
		},
		mouseleave: function() { //animate back to the left
			a.tween('padding-left',a.retrieve('oPad'));
		}
	});
});

What many developers aren’t aware that Element collections have the same methods as Elements,
so there’s no need to cycle through them — simply apply the desired functionality to the collection:

$$('a').addEvents({
	mouseenter: function() { //animate to the right
		if(!this.retrieve('oPad')) { this.store('oPad',this.getStyle('padding-left')); }
		this.tween('padding-left',30);
	},
	mouseleave: function() { //animate back to the left
		this.tween('padding-left',this.retrieve('oPad'));
	}
});

Note that the “this” keyword is used to reference the “current” element within the collection, not the collection itself.

5. Use MooTools Alias

MooTools’ “alias” method allows you to rename or alias an existing method. Take the following snippet of code which is currently in the MooTools Core source:

Array.alias('forEach', 'each');

The above code lets you call the “each” method instead of “forEach”. Using “each” is more readable, a quiet standard between most JavaScript frameworks, and
it even saves you a few bytes in your code. If you prefer to give MooTools’ Native or Class methods a custom name, feel free to!

For example, the Element Class’ method for removing an Element form the DOM is:

$('myElement').dispose();

Suppose your web app is about a given topic and you’d like to stay within that terminology for your code. Here are a few examples:

Element.alias('dispose','can'); //career site?
Element.alias('dispose','shank'); //prison site?

Whatever your reasons are for calling a method by a different name, just don’t be afraid to do so!

6. Create Custom Pseudo Selectors

Accessing a collection of Elements in the DOM is a core responsibility of any JavaScript framework. Unfortunately it can also be taxing and
the pseudo selectors you want aren’t always available. Luckily MooTools allows you to easily implement your own pseudo selectors! Let’s
create a pseudo selector named “disabled” that returns an element if it’s disabled.

//grab disabled elements
Selectors.Pseudo.disabled = function() {
	return this.disabled;
}

//how you use it
var disabledInputs = $$('input:disabled');

Simply add your selector to the Selectors.Pseudo object. If the new pseudo’s function returns “true”, the element is a match and will be returned.

Defining you own pseudo selectors is a great way to take control of your selectors!

7. Implement Methods on Existing Objects

MooTools’ philosophy is that it’s acceptable, even encouraged, to modify Native (String, Function, Number, etc.) prototypes when needed.
Implementing new methods on these Natives will empower them even more. Let’s create a String method that will turn any string of text into
“tweet” format (add links for @reply’s, links, etc.):

String.implement({
	toTweet: function() {
		 return this.replace(/(https?:\/\/\S+)/gi,'<a href="$1">$1</a>').replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>').replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>');
	}
});

Now you can call “toTweet” on any string and you’ll get the string back as a “tweet”. Here are a few examples:

//set an element's html to a tweet value
var el = $('myElement');
el.set('html',el.get('html').toTweet()); //sets the element's html to a linked, tweet value.

//alert the tweeted value
alert('Yo @NetTuts, check out my #MooTools website: http://davidwalsh.name'.toTweet());
//alerts:  Yo <a href="http://twitter.com/nettuts">@NetTuts</a>, check out my <a href="http://search.twitter.com/search?q=%23MooTools">MooTools</a> website: <a href="http://davidwalsh.name">http://davidwalsh.name</a>

Implementing custom methods on Objects strengthens every existing and future instance of that object.

8. Extend Existing Classes

MooTools’ OOP philosophy allows for a super-powerful inheritance model. Extending existing classes
allows you to avoid repeating code, empower existing objects, and leverage existing functionality.
MooTools Core, More, and your custom classes extend existing functionality. Consider the Request class:

var Request = new Class({

	Implements: [Chain, Events, Options],

	options: {/*
		onRequest: $empty,
		onComplete: $empty,
		onCancel: $empty,
		onSuccess: $empty,
		onFailure: $empty,
		onException: $empty,*/
		url: '',
		data: '',
		headers: {
			'X-Requested-With': 'XMLHttpRequest',
			'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'
		},
		async: true,
		format: false,
		method: 'post',
		link: 'ignore',
		isSuccess: null,
		emulation: true,
		urlEncoded: true,
		encoding: 'utf-8',
		evalScripts: false,
		evalResponse: false,
		noCache: false
	},

	initialize: function(options){
		this.xhr = new Browser.Request();
		this.setOptions(options);
		this.options.isSuccess = this.options.isSuccess || this.isSuccess;
		this.headers = new Hash(this.options.headers);
	},

	onStateChange: function(){
		if (this.xhr.readyState != 4 || !this.running) return;
		this.running = false;
		this.status = 0;
		$try(function(){
			this.status = this.xhr.status;
		}.bind(this));
		this.xhr.onreadystatechange = $empty;
		if (this.options.isSuccess.call(this, this.status)){
			this.response = {text: this.xhr.responseText, xml: this.xhr.responseXML};
			this.success(this.response.text, this.response.xml);
		} else {
			this.response = {text: null, xml: null};
			this.failure();
		}
	},

	isSuccess: function(){
		return ((this.status >= 200) && (this.status < 300));
	},

	processScripts: function(text){
		if (this.options.evalResponse || (/(ecma|java)script/).test(this.getHeader('Content-type'))) return $exec(text);
		return text.stripScripts(this.options.evalScripts);
	},

	success: function(text, xml){
		this.onSuccess(this.processScripts(text), xml);
	},

	onSuccess: function(){
		this.fireEvent('complete', arguments).fireEvent('success', arguments).callChain();
	},

	failure: function(){
		this.onFailure();
	},

	onFailure: function(){
		this.fireEvent('complete').fireEvent('failure', this.xhr);
	},

	setHeader: function(name, value){
		this.headers.set(name, value);
		return this;
	},

	getHeader: function(name){
		return $try(function(){
			return this.xhr.getResponseHeader(name);
		}.bind(this));
	},

	check: function(){
		if (!this.running) return true;
		switch (this.options.link){
			case 'cancel': this.cancel(); return true;
			case 'chain': this.chain(this.caller.bind(this, arguments)); return false;
		}
		return false;
	},

	send: function(options){
		if (!this.check(options)) return this;
		this.running = true;

		var type = $type(options);
		if (type == 'string' || type == 'element') options = {data: options};

		var old = this.options;
		options = $extend({data: old.data, url: old.url, method: old.method}, options);
		var data = options.data, url = String(options.url), method = options.method.toLowerCase();

		switch ($type(data)){
			case 'element': data = document.id(data).toQueryString(); break;
			case 'object': case 'hash': data = Hash.toQueryString(data);
		}

		if (this.options.format){
			var format = 'format=' + this.options.format;
			data = (data) ? format + '&' + data : format;
		}

		if (this.options.emulation && !['get', 'post'].contains(method)){
			var _method = '_method=' + method;
			data = (data) ? _method + '&' + data : _method;
			method = 'post';
		}

		if (this.options.urlEncoded && method == 'post'){
			var encoding = (this.options.encoding) ? '; charset=' + this.options.encoding : '';
			this.headers.set('Content-type', 'application/x-www-form-urlencoded' + encoding);
		}

		if (this.options.noCache){
			var noCache = 'noCache=' + new Date().getTime();
			data = (data) ? noCache + '&' + data : noCache;
		}

		var trimPosition = url.lastIndexOf('/');
		if (trimPosition > -1 && (trimPosition = url.indexOf('#')) > -1) url = url.substr(0, trimPosition);

		if (data && method == 'get'){
			url = url + (url.contains('?') ? '&' : '?') + data;
			data = null;
		}

		this.xhr.open(method.toUpperCase(), url, this.options.async);

		this.xhr.onreadystatechange = this.onStateChange.bind(this);

		this.headers.each(function(value, key){
			try {
				this.xhr.setRequestHeader(key, value);
			} catch (e){
				this.fireEvent('exception', [key, value]);
			}
		}, this);

		this.fireEvent('request');
		this.xhr.send(data);
		if (!this.options.async) this.onStateChange();
		return this;
	},

	cancel: function(){
		if (!this.running) return this;
		this.running = false;
		this.xhr.abort();
		this.xhr.onreadystatechange = $empty;
		this.xhr = new Browser.Request();
		this.fireEvent('cancel');
		return this;
	}

});

Then consider Request.JSONP, which extends Request:

Request.JSON = new Class({

	Extends: Request,

	options: {
		secure: true
	},

	initialize: function(options){
		this.parent(options);
		this.headers.extend({'Accept': 'application/json', 'X-Request': 'JSON'});
	},

	success: function(text){
		this.response.json = JSON.decode(text, this.options.secure);
		this.onSuccess(this.response.json, text);
	}

});

You see how small the Request.JSONP class is? By adding “Extends: Request”, the Request.JSONP class gets all
of the Request Class’ methods. Essentially, this small snippet of code becomes a powerhouse because it extends
Request. You can even add extensions to extensions. Now consider Request.JSONP and then Scott Kyle’s Request.Twitter
class:

//Request.JSONP
/*
---

script: Request.JSONP.js

description: Defines Request.JSONP, a class for cross domain JavaScript via script injection.

license: MIT-style license

authors:
- Aaron Newton
- Guillermo Rauch

requires:
- core:1.2.4/Element
- core:1.2.4/Request
- /Log

provides: [Request.JSONP]

...
*/

Request.JSONP = new Class({

	Implements: [Chain, Events, Options, Log],

	options: {/*
		onRetry: $empty(intRetries),
		onRequest: $empty(scriptElement),
		onComplete: $empty(data),
		onSuccess: $empty(data),
		onCancel: $empty(),
		log: false,
		*/
		url: '',
		data: {},
		retries: 0,
		timeout: 0,
		link: 'ignore',
		callbackKey: 'callback',
		injectScript: document.head
	},

	initialize: function(options){
		this.setOptions(options);
		if (this.options.log) this.enableLog();
		this.running = false;
		this.requests = 0;
		this.triesRemaining = [];
	},

	check: function(){
		if (!this.running) return true;
		switch (this.options.link){
			case 'cancel': this.cancel(); return true;
			case 'chain': this.chain(this.caller.bind(this, arguments)); return false;
		}
		return false;
	},

	send: function(options){
		if (!$chk(arguments[1]) && !this.check(options)) return this;

		var type = $type(options),
				old = this.options,
				index = $chk(arguments[1]) ? arguments[1] : this.requests++;
		if (type == 'string' || type == 'element') options = {data: options};

		options = $extend({data: old.data, url: old.url}, options);

		if (!$chk(this.triesRemaining[index])) this.triesRemaining[index] = this.options.retries;
		var remaining = this.triesRemaining[index];

		(function(){
			var script = this.getScript(options);
			this.log('JSONP retrieving script with url: ' + script.get('src'));
			this.fireEvent('request', script);
			this.running = true;

			(function(){
				if (remaining){
					this.triesRemaining[index] = remaining - 1;
					if (script){
						script.destroy();
						this.send(options, index).fireEvent('retry', this.triesRemaining[index]);
					}
				} else if(script && this.options.timeout){
					script.destroy();
					this.cancel().fireEvent('failure');
				}
			}).delay(this.options.timeout, this);
		}).delay(Browser.Engine.trident ? 50 : 0, this);
		return this;
	},

	cancel: function(){
		if (!this.running) return this;
		this.running = false;
		this.fireEvent('cancel');
		return this;
	},

	getScript: function(options){
		var index = Request.JSONP.counter,
				data;
		Request.JSONP.counter++;

		switch ($type(options.data)){
			case 'element': data = document.id(options.data).toQueryString(); break;
			case 'object': case 'hash': data = Hash.toQueryString(options.data);
		}

		var src = options.url +
			 (options.url.test('\\?') ? '&' :'?') +
			 (options.callbackKey || this.options.callbackKey) +
			 '=Request.JSONP.request_map.request_'+ index +
			 (data ? '&' + data : '');
		if (src.length > 2083) this.log('JSONP '+ src +' will fail in Internet Explorer, which enforces a 2083 bytes length limit on URIs');

		var script = new Element('script', {type: 'text/javascript', src: src});
		Request.JSONP.request_map['request_' + index] = function(){ this.success(arguments, script); }.bind(this);
		return script.inject(this.options.injectScript);
	},

	success: function(args, script){
		if (script) script.destroy();
		this.running = false;
		this.log('JSONP successfully retrieved: ', args);
		this.fireEvent('complete', args).fireEvent('success', args).callChain();
	}

});

Request.JSONP.counter = 0;
Request.JSONP.request_map = {};

…and now Request.Twitter:

Request.Twitter = new Class({

	Extends: Request.JSONP,

	options: {
	  linkify: true,
	  url: 'http://twitter.com/statuses/user_timeline/{term}.json',
	  data: {
	    count: 5
	  }
	},

	initialize: function(term, options){
	  this.parent(options);
	  this.options.url = this.options.url.substitute({term: term});
	},

	success: function(data, script){
	  if (this.options.linkify) data.each(function(tweet){
	    tweet.text = this.linkify(tweet.text);
	  }, this);

	  // keep subsequent calls newer
	  if (data[0]) this.options.data.since_id = data[0].id;

	  this.parent(data, script);
	},

	linkify: function(text){
	  // modified from TwitterGitter by David Walsh (davidwalsh.name)
	  // courtesy of Jeremy Parrish (rrish.org)
	  return text.replace(/(https?:\/\/[\w\-:;?&=+.%#\/]+)/gi, '<a href="$1">$1</a>')
	             .replace(/(^|\W)@(\w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>')
	             .replace(/(^|\W)#(\w+)/g, '$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
	}

});

You see how a waterfall effect of extending objects can make the smallest of classes an absolute beast of a class?
Experiment with MooTools’ inheritance model and don’t repeat code!

9. Create Custom Events

I’ve already explained how flexible the MooTools selector engine is, the class system is, and how modular the framework is.
Why would you expect anything different from MooTools’ event system? Creating custom events within MooTools is as simple
as it gets. Here’s a basic outline of your MooTools custom event:

Element.Events.altClick = {
	base: 'click', //the "base" event
	condition: function(event) {
		return event.alt; // alt key?
	},
	onAdd: function() {
		//do something when the event is added
	},
	onRemove: function() {
		//do something when the event is removed
	}
};

Here’s a great example of a custom event — listening for “alt” and “click” at the same time:

//alt click
Element.Events.altClick = {
	base: 'click',
	condition: function(event) {
		return event.alt; // alt key?
	}
};

//usage
$(document.body).addEvent('altClick',function() {
	alert('You alt-clicked me!');
});

Or you can simply define a custom event so that a specific function executes any time that type of event is assigned.
In my next example, any time a click event is assigned to an element, that element’s cursor will be automatically changed
to the “pointer” cursor.

/* update cursor on add/remove click event */
Element.Events.click = {
	base:'click',
	onAdd: function() {
		if(this.setStyle) {
			this.store('original-cursor',this.getStyle('cursor'));
			this.setStyle('cursor','pointer');
		}
	},
	onRemove: function() {
		if(this.setStyle) {
			this.setStyle('cursor',this.retrieve('original-cursor'));
		}
	}
};

You’ll notice that if the click event is removed, the original cursor will be restored.

10. jQuery-Style Events

While the MooTools event sytax is different from jQuery’s, it doesn’t have to be! With a minimal amount of
javascript you can make MooTools’ event syntax reflect jQuery’s.

MooTools holds all of its events in the Element.NativeElements object:

Element.NativeEvents = {
	click: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, //mouse buttons
	mousewheel: 2, DOMMouseScroll: 2, //mouse wheel
	mouseover: 2, mouseout: 2, mousemove: 2, selectstart: 2, selectend: 2, //mouse movement
	keydown: 2, keypress: 2, keyup: 2, //keyboard
	focus: 2, blur: 2, change: 2, reset: 2, select: 2, submit: 2, //form elements
	load: 1, unload: 1, beforeunload: 2, resize: 1, move: 1, DOMContentLoaded: 1, readystatechange: 1, //window
	error: 1, abort: 1, scroll: 1 //misc
};

Essentially all you need to do is cycle through each element type and implement a method on the Element class, named like the event type,
that simulates what addEvent does:

//hash the element.natives so you can do stuff with it
var hash = new Hash(Element.NativeEvents);
//remove items that need to be replaced, add their replacements
hash.erase('mouseover').erase('mouseout').erase('DOMMouseScroll');
hash.include('mouseenter',1).include('mouseleave',1);
//initialize this
var eventHash = new Hash({});
//for every event type, add to the hash
hash.getKeys().each(function(event){
	eventHash[event] = function(fn) {
		this.addEvent(event,fn);
		return this;
	};
});
//make it happen
Element.implement(eventHash);

Now you can listen for events like:

$('myElement').click(function() {
	//do stuff
});

11. Add Events During Element Creation

If you have experience coding with MooTools, at some point you’ve no doubt created an element and subsequently added events to it:

var myElement = new Element('a',{
	href: 'mypage.php',
	text: 'Click here!'
});

myElement.addEvent('click',function(e) {
	//stop the event
	if(e) e.stop();
	//do stuff
});

There’s nothing wrong with the above, per say, but you could just add those events during element creation:

var myElement = new Element('a',{
	href: 'mypage.php',
	text: 'Click here!',
	events: {
		click: function() {
			//stop the event
			if(e) e.stop();
			//do stuff
		}
	}
});

12. Implement Events Within Classes

Extending classes was discussed in tip #8 above. Now lets explore the *implement* functionality within MooTools classes.
What’s the difference? MooTools contributor Mark Obcena says it best in his article titled
Up The Moo Herd IV: There’s A Class For This:

MooTools has two built-in mutators: Extends and Implements. The Extends mutator takes the class name passed on to it and makes the new class inherit directly from it, while Implements takes the class (or classes) passed and adds their methods to the new class (or mixes them in—thus mixin).

With the difference between extending and implementing, lets get back to it. Implementing events within your MooTools classes
can make your classes much more flexible. Consider the following simple Overlay class:

var Overlay = new Class({

	Implements: [Options,Events],

	options:  {
		id: 'overlay',
		color: '#000',
		duration: 500,
		opacity: 0.5,
		zIndex: 5000
	},

	initialize: function(container,options) {
		this.setOptions(options);
		this.container = document.id(container);
		this.overlay = new Element('div',{
			id: this.options.id,
			opacity: 0,
			styles: {
				position: 'absolute',
				background: this.options.color,
				left: 0,
				top: 0,
				'z-index': this.options.zIndex
			},
		}).inject(this.container);
		this.tween = new Fx.Tween(this.overlay,{
			duration: this.options.duration,
			link: 'cancel',
			property: 'opacity',
			onStart: function() {
				this.overlay.setStyles({
					width: '100%',
					height: this.container.getScrollSize().y
				});
			}.bind(this)
		});
	},
	open: function() {
		this.tween.start(this.options.opacity);
		return this;
	},
	close: function() {
		this.tween.start(0);
		return this;
	}
});

Sure the class does what it’s supposed to but it isn’t nearly as flexible it could be. Now lets implement
onClick, onClose, onHide, onOpen, and onShow events:

var Overlay = new Class({

	Implements: [Options,Events],  // EVENTS IMPLEMENTED HERE!

	options:  {
		id: 'overlay',
		color: '#000',
		duration: 500,
		opacity: 0.5,
		zIndex: 5000/*,
		onClick: $empty,
		onClose: $empty,
		onHide: $empty,
		onOpen: $empty,
		onShow: $empty
		*/
	},

	initialize: function(container,options) {
		this.setOptions(options);
		this.container = document.id(container);
		this.overlay = new Element('div',{
			id: this.options.id,
			opacity: 0,
			styles: {
				position: 'absolute',
				background: this.options.color,
				left: 0,
				top: 0,
				'z-index': this.options.zIndex
			},
			events: {
				click: function() {    // CLICK EVENT
					this.fireEvent('click');
				}.bind(this)
			}
		}).inject(this.container);
		this.tween = new Fx.Tween(this.overlay,{
			duration: this.options.duration,
			link: 'cancel',
			property: 'opacity',
			onStart: function() {
				this.overlay.setStyles({
					width: '100%',
					height: this.container.getScrollSize().y
				});
			}.bind(this),
			onComplete: function() {
				this.fireEvent(this.overlay.get('opacity') == this.options.opacity ? 'show' : 'hide');  // SHOW OR HIDE EVENT
			}.bind(this)
		});
	},
	open: function() {
		this.fireEvent('open');  // OPEN EVENT
		this.tween.start(this.options.opacity);
		return this;
	},
	close: function() {
		this.fireEvent('close');  // CLOSE EVENT
		this.tween.start(0);
		return this;
	}
});

What’s great about adding events to a class is that events allow your to give more options and trigger functionality when
our class methods execute. In the above example, you can execute any functionality when the overlay opens, closes, shows, hides, or gets clicked.
Essentially you added two tiny snippets of code to the class:

Implements: [Events]

…and the following wherever you’d like an event to be signaled…

this.fireEvent('someEvent',[argument1, argument2]);

So how can you control these events when you create an instance of the class? Add them in the options like this:

var overlay = new Overlay({
	onClick: function() {
		this.hide();
	},
	onOpen: function() {
		alert('Thank you for opening!');
	}
});

You’d be hard pressed to find a class that wouldn’t benefit from implementing events!

13. Use Event Delegation

Event delegation is the process of adding an event to a parent for all of its children instead of assigning the
event to each individual child. The advantage of event delegation is that you may add child elements to the
parent element without needing to assign the event to that new element. If you choose to remove the event,
you need only remove it from one element.

So, instead of:

$$('a').addEvent('click',function() {
	//do stuff -- individually assigned
});

…you do this:

$('myContainer').addEvent('click:relay(a)',function() {
	//assigned to the parent of all A elements (in this case, #myContainer), to listen to A element click event
})/

Don’t let the “:relay()” pseudo-syntax fool you; Element.Delegation rewrites the event methods to accommodate for :relay.

14. Use Class.toElement

One hidden gem within MooTools’ Class is the Class.toElement method. Class.toElement plays a small role but can help you out
when it comes to accessing the primary element within a class, especially if you don’t know what that element is otherwise.
Implementing toElement on your class is easy:

var myClass = new Class({

	Implements: [Options],

	initialize: function(container,options) {
		this.container = $(container);
	},

	toElement: function() {
		return this.container;
	}
});

Once you have toElement defined, you can use your class just like an element:

var myInstance = new MyClass('myElement');
myInstance.setStyle('color','#f00').set('html','This is my element!');

Look at that — a class virtually manipulated by Element methods.

15. “return this” Within Methods For Chainability

So we’ve all seen how the JavaScript frameworks allow you to chain the hell out of methods. Chaining looks like this:

$('myElement').setStyles('color','#f00').set('html','Click Here').fade('out').addClass('cssClass').addEvent('click',function(e) {
	if(e) e.stop();
	alert('Clicked'!);
});

Holy chaining Batman! Want your classes to chain forever? No problem — all you need to do is return “this”:

var myClass = new Class({

	//options, initialize, implements, etc.

	doSomething: function() {
		//do a whole bunch of functionality here and...
		return this;
	},
	doAnotherThing: function() {
		//do a whole bunch of functionality here and...
		return this;
	},
	doYetAnotherThing: function() {
		//do a whole bunch of functionality here and...
		return this.
	}
});

Since you placed “return this” in each method, now you can do:

var klass = new myClass();
klass.doSomething().doAnotherThing().doYetAnotherThing();

Make sure to return “this” wherever it makes sense. Doing so can make your Class much easier to work with and your code will be shorter!

BONUS! 16. Use Fx Shortcuts on Elements

MooTools effects are unarguably the smoothest of any JavaScript framework. The Fx library also provides loads of control through numerous options.
Lets take a look at a basic Tween which fades an element to 50%:

var myTween = new Fx.Tween('myElement',{
	duration: 500,
	fps: 200,
	//a bunch of options here
});
//fade to 50%
$('myElement').addEvent('click',function() {
	myTween.start('opacity',0.5);
});

Did you know you didn’t need to type out all of this? You could use element shortcuts like:

$('myElement').fade(0.5); //fading: Fx.Tween
$('myElement').tween('width',300); //tweening: Fx.Tween
$('myElement').morph({
	width: 200,
	height: 300
}); //morph:  Fx.Morph

The above snippets, of course, rely on you wanting to use the default options. You can actually set custom options for these shortcut methods per element:

$('myElement').set('tween',{ duration:500, fps: 200 }).tween('width',300);

Save your self a few bytes by using Fx shortcuts!

MooTools FTW!

Hopefully I’ve given you some tips to improve your MooTools JavaScript code, making it shorter, faster, and stronger. Have some of your own tips to share?
Place them in the comments below!

Related posts

• Protect Your Flash Files From Decompilers by Using Encryption (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• How to Make a CSS Sprite Powered Menu (0)
• How to Build an Unobtrusive Login System in Rails (0)
• Design and Code a Cool iPhone App Website in HTML5 (0)

You can use Adman65/nettuts for a successful login. Be sure to use bad credentials so you can see how everything works.

What We’re Making

Getting Started

We’re going to start by creating a dummy application that has a public and private page. The root url is the public page. There’s a login link on the public page. If the user logs in successfully, they’re redirected to the private page. If not, they’re redirected back to the login form. The private page shows the user name. We’ll use this as the starting point for ajaxifying the site.

The first step is using the rails command to generate a new application, then install and setup up authlogic.

$ cd into-a-directory
$ rails unobtrusive-login

Add authlogic.

# /config/environment.rb
config.gem 'authlogic'

Now install the gems.

$ sudo gem install gemcutter
$ sudo gem tumble
$ sudo rake gems:install

Next create a user model and add the required authlogic columns to the migration.

$ ./script/generate model User
exists  app/models/
exists  test/unit/
exists  test/fixtures/
create  app/models/user.rb
create  test/unit/user_test.rb
create  test/fixtures/users.yml
create  db/migrate
create  db/migrate/20100102082657_create_users.rb

Now, add the columns to the new migration.

class CreateUsers < ActiveRecord::Migration
  def self.up
    create_table :users do |t|
      t.string    :login,               :null => false
      t.string    :crypted_password,    :null => false
      t.string    :password_salt,       :null => false
      t.string    :persistence_token,   :null => false
      t.timestamps
    end
  end

  def self.down
    drop_table :users
  end
end

Migrate the database.

$ rake db:migrate

Include authlogic in the user model.

# /app/models/user.rb
class User < ActiveRecord::Base
  acts_as_authentic
end

Now we can create a user. Since this is a demo app, web based functionality for signing up isn’t required. So open up the console and create a user:

$ ./script/console
>> me = User.create(:login => 'Adman65', :password => 'nettuts', :password_confirmation => 'nettuts')

Now we have a user in the system, but we have no way to login or logout. We need to create the models, controllers, and views for this. Authlogic has its own class for tracking logins. We can use the generator for that:

# create the user session
$ ./script/generate UserSession

Next we need to generate the controller that will login/logout users. You can create sessions just like any other resource in Rails.

# create the session controller
$ ./script/generate controller UserSessions

Now set its contents to:

# /app/controllers/user_sessions_controller.rb
class UserSessionsController < ApplicationController
  def new
    @user_session = UserSession.new
  end

  def create
    @user_session = UserSession.new(params[:user_session])
    if @user_session.save
      flash[:notice] = "Login successful!"
      redirect_back_or_default user_path
    else
      render :action => :new
    end
  end
end

It looks exactly the same as a controller that was generated via scaffolding. Now create the users controller which has public and private content. Generate a users controller. Inside the controller we’ll use a before filter to limit access to the private areas. The index action is public and show is private.

# create the users controller
$ ./script/generate controller users

Update its contents:

# /app/controllers/users_controller.rb
class UsersController < ApplicationController
  before_filter :login_required,  nly => :show

  def index
  end

  def show
    @user = current_user
  end

  private
  def login_required
    unless current_user
      flash[:error] = 'You must be logged in to view this page.'
      redirect_to new_user_session_path
    end
  end
end

You should notice that current_user is an undefined method at this point. Define these methods in ApplicationController. Open up application_controller.rb and update its contents:

# application controller
class ApplicationController < ActionController::Base
  helper :all # include all helpers, all the time
  protect_from_forgery # See ActionController::RequestForgeryProtection for details

  # From authlogic
  filter_parameter_logging :password, :password_confirmation
  helper_method :current_user_session, :current_user

  private
  def current_user_session
    @current_user_session ||= UserSession.find
  end

  def current_user
    @current_user ||= current_user_session && current_user_session.user
  end
end

At this point the models and controllers are complete, but views aren’t. We need to create views for a login form and the public and private content. We’ll use the nifty-generators gem to create a basic layout.

$ sudo gem install nifty-generators
$ ./script/generate nifty_layout

Time to create the login form. We’re going to use a partial for this because in the future we’ll use the partial to render just the login form in the modal box. Here’s the code to create the login form. It’s exactly the same as if you were creating a blog post or any other model.

# create the login views
# /app/views/user_sessions/_form.html.erb
<% form_for(@user_session, :url => user_session_path) do |form| %>
  <%= form.error_messages %>

  <p>
    <%= form.label :login %>
    <%= form.text_field :login %>
  </p>

  <p>
    <%= form.label :password %>
    <%= form.password_field :password %>
  </p>

  <%= form.submit 'Login' %>
<% end %>

Render the partial in the new view:

# /app/views/user_sessions/new.html.erb
<% title 'Login Please' %>
<%= render :partial => 'form' %>

Create some basic pages for the public and private content. The index action shows public content and show displays private content.

# create the dummy public page
# /app/views/users/index.html.erb
<% title 'Unobtrusive Login' %>

<p>Public Facing Content</p>

<%= link_to 'Login', new_user_session_path %>

And for the private page:

# create the dummy private page
# /app/views/users/show.html.erb
<% title 'Welcome' %>
<h2>Hello <%=h @user.login %></h2>

<%= link_to 'Logout', user_session_path, :method => :delete %>

Delete the file /public/index.html and start the server. You can now log in and logout of the application.

$ ./script/server

Here are some screenshots of the demo application. The first one is the public page.

Now the login form

And the private page

And finally, access denied when you try to visit http://localhost:3000/user

The AJAX Login Process

Before continuing, we need to understand how the server and browser are going to work together to complete this process. We know that we’ll need to use some JavaScript for the modal box and the server to validate logins. Let’s be clear on how this is going to work. The user clicks the login link, then a modal box appears with the login form. The user fills in the form and is either redirected to the private page, or the modal box is refreshed with a new login form. The next question is how do you refresh the modal box or tell the browser what to do after the user submits the form? Rails has respond_to blocks. With respond_to, you can tell the controller to render different content if the user requested XML, HTML, JavaScript, YAML etc. So when the user submits the form, the server can return some JavaScript to execute in the browser. We’ll use this render a new form or a redirect. Before diving any deeper, let’s go over the process in order.

1. User goes to the public page
2. User clicks the login link
3. Modal box appears
4. User fills in the form
5. Form is submitted to the server
6. Server returns JavaScript for execution
7. Browser executes the JavaScript which either redirects or updates the modal box.

That’s the high level. Here’s the low level implementation.

1. User visits the public page
2. The public page has some JavaScript that runs when the DOM is ready that attaches JavaScript to the login link. That javscript does an XMLHTTPRequest (XHR from now on) to the server for some JavaScript. The JavaScript sets the modal box’s content to the form HTML. The JavaScript also does something very important. It binds the form’s submit action to an XHR with POST data to the form’s action. This allows the user to keep filling the login form in inside the modal box.
3. Modal box now has the form and required JavaScript
4. User clicks ‘Login’
5. The submit() function is called which does a POST XHR to the form’s action with its data.
6. Server either generates the JavaScript for the form or the redirect
7. Browser receives the JavaScript and executes it. The browser will either update the modal box, or redirect the user through window.location.

Taking a Peak at the AJAX Ready Controller

Let’s take a look at the new structure for the UserSessions controller.

class UserSessionsController < ApplicationController
  layout :choose_layout

  def new
    @user_session = UserSession.new
  end

  def create
    @user_session = UserSession.new(params[:user_session])

    if @user_session.save
      respond_to do |wants|
        wants.html { redirect_to user_path(@user_session.user) }
        wants.js { render :action => :redirect } # JavaScript to do the redirect
      end
    else
      respond_to do |wants|
        wants.html { render :new }
        wants.js # defaults to create.js.erb
      end
    end
  end

  private
  def choose_layout
    (request.xhr?) ? nil : 'application'
  end
end

As you can see the structure is different. Inside the if save, else conditional, respond_to is used to render the correct content. want.xx where xx is a content type. By default Prototype and jQuery request text/JavaScript. This corresponds to wants.js. We’re about ready to get started on the AJAX part. We won’t use any plugins except ones for modal boxes. We’ll use Facebox for jQuery and ModalBox for Prototype.

Prototype

Rails has built in support for Prototype. The Rail’s JavaScript helpers are Ruby functions that generate JavaScript that use Prototype. This technique is known as RJS (Ruby JavaScript). One example is remote_form_for which works like the standard for_for adds some JS bound to onsubmit that submits to the form to its action using its method with its data. I won’t use RJS in this article since I want to demonstrate vanilla JS. I think by using pure JS and eliminating the JS helpers the article will be more approachable by less experienced developers. That being said, you could easily accomplish these steps using RJS/Prototype helpers if you choose.

Adding Prototype to the application is very easy. When you use the rails command, it creates the Prototype and scriptaculous files in /public/JavaScripts. Including them is easy. Open up /app/views/layouts/application.erb and add this line inside the head tag:

<%= JavaScript_include_tag :defaults %>

JavaScript_include_tag creates script tags for default files in /public/JavaScripts, most importantly prototype.js, effects.js, and application.js. effects.js is scriptaculous. application.js is a file you can use to keep application specific JS. Now we need a modal box plugin. We’re going to use this. Its a very nice modal box plugin inspired by OSX. The source is hosted on GitHub, so you’ll have to clone and move the files in your project directory. For example:

$ cd code
$ git clone git://github.com/okonet/modalbox.git
$ cd modalbox
# move the files in the correct directories.
# move modalbox.css into /public/stylesheets
# move modalbox.js into /public/JavaScripts
# move spinner.gif into /public/images

Now include the stylesheets and JavaScript in your application.

  <%= stylesheet_link_tag ‘application’ %>
  <%= stylesheet_link_tag ‘modalbox’ %>
  <%= JavaScript_include_tag :defaults %>
  <%= JavaScript_include_tag ‘modalbox’%>

Now let’s get our login link to open a modalbox. In order to do this we need to add some JavaScript that runs when the DOM is ready that attaches the modalbox to our link. When the user clicks the login link, the browser will do a GET to /user_sessions/new which contains the login form. The login link uses the #login-link selector. Update the login link to use the new id in /app/views/users/index.html.erb. Modify the link_to function like this:

<%= link_to 'Login', new_user_session_path, :id => 'login-link' %>

That gives us a#login-link. Now for the JavaScript to attach a modalbox. Add this JS in /public/JavaScripts/application.js

document.observe('dom:loaded', function() {
    $('login-link').observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,
            {title: 'Login',
            width: 500}
        );
    });
})

There’s some simple JS for when the user clicks the link a modal box opens up with the link’s href. Refer to the modalbox documentation if you’d like more customization. Here’s a screenshot:

Notice that inside the modal box looks very similar to our standard page. Rails is using our application layout for all HTML responses. Since our XHR’s want HTML fragments, it make sense to render without layouts. Refer back to the example controller. I introduced a method for determining the layout. Add that to UserSessionsController to disable layout for XHR’s.

class UserSessionsController < ApplicationController
  layout :choose_layout

  def new
    @user_session = UserSession.new
  end

  def create
    @user_session = UserSession.new(params[:user_session])
    if @user_session.save
      flash[:notice] = "Login successful!"
      redirect_to user_path
    else
      render :action => :new
    end
  end

  def destroy
    current_user_session.destroy
    flash[:notice] = "Logout successful!"
    redirect_to root_path
  end

  private
  def choose_layout
    (request.xhr?) ? nil : 'application'
  end
end

Refresh the page and click the link you should get something like this:

Fill in the form and see what happens. If you fill in the from with bad info, you’re redirected outside the modal box. If you login correctly you’re redirected normally. According the requirements the user should be able to fill out the form over and over again inside the modal box until they login correctly. How can we accomplish this? As described before we need to use AJAX to submit data to the server, then use JavaScript to update the modal box with the form or do a redirection. We know that the modalbox does a GET for HTML. After displaying the initial modalbox, we need to write JS that makes the form submits itself AJAX style. This allows the form to submit itself inside the modal box. Simply adding this code after the modal box is called won’t work because the XHR might not have finished. We need to use Modalbox’s afterLoad callback. Here’s the new code:

document.observe('dom:loaded', function() {
    $('login-link').observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,
            {title: 'Login',
            width: 500,
            afterLoad: function() {
                $('new_user_session').observe('submit', function(event) {
                    event.stop();
                    this.request();
                })
            }}
        );
    });
})

Form#request is a convenience method for serializing and submitting the form via an Ajax.Request to the URL of the form’s action attribute—which is exactly what we want. Now you can fill in the form inside the modal without it closing. The client side is now complete. What about the server side? The client is submitting a POST wanting JS back. The server needs to decide to either return JavaScript to update the form or render a redirect. In the UserSessionsController we’ll use respond_to to handle the JS request and a conditional to return the correct JS. Let’s begin by handling the failed login case. The server needs to return JS that updates the form, and tells the new form to submit over ajax. We’ll place this template in /app/views/users_sessions/create.js.erb. Here’s the structure for the new create action:

def create
  @user_session = UserSession.new(params[:user_session])
  if @user_session.save
    flash[:notice] = "Login successful!"
    redirect_to user_path
  else
    respond_to do |wants|
      wants.html { render :new }
      wants.js # create.js.erb
    end
  end
end

Now let’s fill in create.js.erb:

$('MB_content').update("<%= escape_JavaScript(render :partial => 'form') %>");
Modalbox.resizeToContent();
$('new_user_session').observe('submit', function(event) {
    event.stop();
    this.request();
});

First we update the content to include the new form. Then we resize the modal box. Next we ajaxify the form just as before. Voilla, you can fill in the form as many times as you want.

Next we need to handle the redirection case. Create a new file in /app/views/users_sessions/redirect.js.erb:

  window.location=”<%= user_path %>”;

Now, update the create action to handle the redirection process:

def create
  @user_session = UserSession.new(params[:user_session])
  if @user_session.save
    respond_to do |wants|
      wants.html do
        flash[:notice] = "Login successful!"
        redirect_to user_path
      end

      wants.js { render :redirect }
    end
  else
    respond_to do |wants|
      wants.html { render :new }
      wants.js # create.js.erb
    end
  end
end

And that’s it! Now try login with correct credentials and you’re redirected to the private page. For further learning, try to add a spinner and notification telling the user the form is submitting or they’re being redirect. The application still works if the user has JavaScript disabled too.

jQuery

Since I’ve already covered the Prototype process, so I won’t go into the same detail as before. Instead, I will move quickly describing the alternate JavaScript to add to the application. The jQuery vesion will have the exact same structure as the Prototype version. All we need to change is what’s in application.js, create.js.erb, and the JavaScript/css includes.

First thing we need to do is download jQuery and Facebox. Move jQuery into /public/JavaScripts as jquery.js. For facebox move the images into /public/images/, stylesheets into /public/stylesheets, and finally the JS into /public/JavaScripts. Now update /app/views/layouts/application.html.erb to reflect the changes:

<head>
  <title><%= h(yield(:title) || "Untitled") %></title>
  <%= stylesheet_link_tag 'facebox' %>
  <%= stylesheet_link_tag 'application' %>
  <%= JavaScript_include_tag 'jquery' %>
  <%= JavaScript_include_tag 'facebox' %>
  <%= JavaScript_include_tag 'application' %>
</head>

Facebox comes with a default stylesheet which assumes you have your images in /facebox. You’ll need to update these selectors in facebox.css like so:

#facebox .b {
  background:url(/images/b.png);
}

#facebox .tl {
  background:url(/images/tl.png);
}

#facebox .tr {
  background:url(/images/tr.png);
}

#facebox .bl {
  background:url(/images/bl.png);
}

#facebox .br {
  background:url(/images/br.png);
}

Now we attach facebox to the login link. Open up /public/JavaScripts/application.js and use this:

$(document).ready(function() {
    $('#login-link').facebox({
        loadingImage : '/images/loading.gif',
    closeImage   : '/images/closelabel.gif',
    });
});

I override the default settings for the images to reflect the new image path. Start the sever and head over to the index page. You should see a nice facebox with the login form:

Next thing we have to do is set the form to submit itself via AJAX. Just like before, we’ll have to use callbacks to execute code after the modal box is ready. We’ll use jQuery’s post method for the XHR request. Facebox has an after reveal hook we can use. application.js:

$(document).ready(function() {
    $('#login-link').facebox({
        loadingImage : '/images/loading.gif',
        closeImage   : '/images/closelabel.gif',
    });

    $(document).bind('reveal.facebox', function() {
        $('#new_user_session').submit(function() {
            $.post(this.action, $(this).serialize(), null, "script");
            return false;
        });
    });
});

Updating create.js.erb should be easy enough. We have to update the facebox’s contents and re-ajaxify the form. Here’s the code:

$('#facebox .content').html("<%= escape_JavaScript(render :partial => 'form') %>");
$('#new_user_session').submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
});

And that’s it! Here’s the final product:

Related posts

• How to Code up a Web Design from PSD to HTML (0)
• AJAX-enabled Sticky Notes With PHP and jQuery (0)
• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• Protect Your Flash Files From Decompilers by Using Encryption (0)
• PHP and MySQL File Download Counter (0)

To refresh your memory

Cast your mind back and you’ll remember we left off at the end of the post titled Create a Gnarly Snowboarding Themed Web Design with a finished PSD sporting a textured background, large feature area and a mix of text, images and video making up the main content area.

Cutting up the PSD concept

With our design being pretty design heavy, there’s a good selection of elements that will need exporting from the PSD. The first is the large textured background.

Disable all other layers then draw a large marquee across the design that includes all the textured elements and blue gradient. Press CMD+Shift+C to copy this selection, then paste in into a new document.

To take into consideration larger monitors, we need to make sure our design is wide enough not to be cropped off. A width of 2200px should be more than sufficient to accommodate even the larger of monitor setups. Select a portion of the gradient and press CMD-T to transform and stretch the background to fill the white space. Save this large image for the web, but take care to balance between file size and quality. With the image being super-sized, it’s important to carefully select the appropriate compression settings. My final file weighs in at 220kb, which is pretty heavy in normal circumstances, but considering that the rest of the design is quite lightweight, it’s a sacrifice that can be justified. We could have made things much easier for ourselves by not including a gradient as well as a texture, this way we could set a smaller graphic in the center that fades out to a flat colour. (Or wait until the multiple backgrounds CSS3 property is more widely supported!)

Continue selecting individual page elements with the marquee tool, pressing CMD-Shift-C to copy-merged then paste in a new document and export. Elements such as the logo, feature graphics, profile shots and every small icon needs saving as an individual graphic.

Remember to choose the most appropriate file type and compression setting for each item. An element that is made up of flat colours will be more suited to PNG format. Elements that require a transparent background can be exported using the PNG-24 option.

Once all of the images have been saved, you’re ready to move onto the HTML section of the website build.

Building the HTML structure

It’s always important to build the house before decorating the rooms, so we’ll begin by writing out the HTML structure of the website. We’ll base the HTML on the XHTML Strict Doctype and add the initial link to the stylesheet and a containing div to hold the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Snow Candy</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
<div id="container">

</div>
</body>
</html>

The header

The structure for the header is pretty simple. We have our logo, which is set in a H1 and links back to the homepage. Our navigation is perfect for an unordered list, and each contains an anchor to the relevant page. A class of active will then allow us to target an individual page for highlighting the active page.

<div id="header">
	<h1><a href="#">Snow Candy</a></h1>
	<ul id="nav">
		<li><a href="#" class="active">Home</a></li>
		<li><a href="#">Apparel</a></li>
		<li><a href="#">Team</a></li>
		<li><a href="#">Shop</a></li>
	</ul>
</div>

The content

Next we flesh out the bulk of the page content. The whole main area can be contained within a div with an ID of content. Within this we’ll start with the large feature graphics, an unordered list will once again be a handy element to use, as it allows us to easily list them out in sequence. Inside each list element is each image graphic, complete with a descriptive alt attribute.

<div id="content">
<div id="features">
	<ul>
		<li><a href="#"><img src="images/feature-1.jpg" alt="5th Annual Big Air Jam. 5th January 2010" /></a></li>
		<li><a href="#"><img src="images/feature-2.jpg" alt="Salomon Shred Round One" /></a></li>
		<li><a href="#"><img src="images/feature-3.jpg" alt="Snow Candy in S&auml;len" /></a></li>
	</ul>
</div>

The design then splits into two columns, so we can add a div with a class of column ready for floating with CSS later. Within the featured video section I’ve embedded a cool snowboarding video from Vimeo, followed by the title and description, both set in natural header and paragraph tags. A paragraph tag with a class of “btn” will allow us to set up a global style for any button style objects, allowing some unique styling to be added. The actual Vimeo embedding code has been modified slightly to keep it valid within our Strict doctype.

<div class="column">
	<h2 class="featured-video">Featured Video</h2>
	<div class="video">
		<object width="379" height="213" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=3155182&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1">
			<param name="allowfullscreen" value="true" />
			<param name="allowscriptaccess" value="always" />
			<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3155182&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" />
		</object>
	</div>

	<h3><a href="#">Snow Candy in S&auml;len</a></h3>
	<p>The Snow Candy team head to S&auml;len to experience the local snow, attractions and lifestyle.</p>
	<p class="btn"><a href="#">See more videos</a></p>
</div>

In the second column, the list of events has a layout that lends itself well to being rendered as a definition list, with the date and event description being relative to each other. The date can be set as the definition title, and the definition description as the content, which will help us target these tags to style up the fancy layout we’ve got going on. With the dates being laid out vertically at different type sizes, adding a span around the month will help provide that extra hook needed for the CSS styling.

<div class="column">
	<h2 class="events">Upcoming Events</h2>
	<dl>
		<dt>5 <span>Feb</span></dt>
		<dd>
			<h4>5th Annual BigAir Jam</h4>
			<p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p>
		</dd>

		<dt>3 <span>Mar</span></dt>
		<dd>
			<h4>Salomon Shred Round 1</h4>
			<p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p>
		</dd>
	</dl>
	<p class="btn"><a href="#">See more events</a></p>
</div>

The last portion of content is the list of team members. Again, this list of objects is tailored nicely to be written as an unordered list element. Within each list element is an anchor link that will head off to the relevant page. Each anchor also has a class to help identify each team member when styling them up.

<h2 class="team">Meet the Team</h2>

<ul id="team">
	<li><a href="#" class="joe">Joe</a></li>
	<li><a href="#" class="charlie">Charlie</a></li>
	<li><a href="#" class="lars">Lars</a></li>
	<li><a href="#" class="marco">Marco</a></li>
</ul>

The footer

The HTML is then closed out with the footer, containing a simple back-to-top link, and the body and HTML tags closed to finish off the document. A quick validation ensures there’s no errors, meaning it’s time to move onto some CSS styling.

	<div id="footer">
		<p><a href="#header" class="back-top">Back to top</a></p>
	</div>

</div>

</body>
</html>

Styling the CSS

The first line of CSS that’s written is to quickly reset any browser specific styling. Ensuring that we’re starting from a clean slate when it comes to margins, padding and borders. Next, the sans-serif font-family is set on the body tag, to render the Helvetica font throughout the design. A line-height of 24px will help us stick to our 24px baseline grid from the design, and will help fix any differences between browsers.

The main background of the site is then added. First the flat blue colour is specified, then the large textured background. This is positioned at the top center, and told not to repeat. Unlike inline images, background images don’t create scrollbars if they are larger than the content window, so despite our graphic being a huge 2200 pixels wide, a portion of the edges will be hidden according to how large the viewer’s monitor is.

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
	background: #b9d2f8 url(images/body-bg.jpg) center top no-repeat;
}

The header

Next up for styling is the main container div, which is simply given a 980px width and set to appear centrally. This is followed by the header and its sub-elements. The header div is given some padding to create the spacing at the top and sides according to the PSD concept, and is given an overflow:hidden property to clear itself and correctly calculate its height after the floated navigation elements.

The header one tag is given specific dimensions in order to properly display the logo as a background image, and a negative text-indent shifts the standard header text out of the way off-screen. The navigation is then floated alongside it, with a little margin to help align the elements. Each anchor inside the list items is styled to give the appropriate appearance according to the PSD concept, which includes setting the font-size and gaps between each element. They are then finished off with the addition of the transparent brush stroke graphic as a background image for links that have the active class, or are being hovered by the mouse.

#container {
	width: 980px; margin: 0 auto;
}

#header {
	padding: 48px 16px 0 16px; overflow: hidden;
}
	#header h1 a {
		display: block; width: 221px; height: 107px; float: left;
		background: url(images/logo.jpg); text-indent: -9999px;
	}

	#header ul#nav {
		width: 720px; float: right; margin: 42px 0 0 0;
	}
		#header ul#nav li {
			float: left; list-style: none;
		}
			#header ul#nav li a {
				display: block; width: 155px; height: 34px; margin: 0 0 0 25px; padding: 12px 0 0 0;
				font-size: 24px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;
				text-shadow: 0 3px 3px #333;
			}
				#header ul#nav li a:hover, #header ul#nav li a.active {
					background: url(images/active-nav.png);
				}

General content styling

The main central content area can then be styled to mimic the original PSD concept. First it’s given a specific width, with padding to push the content away from the edges. It’s set to overflow:hidden because it will contain some floated elements, and is given a transparent-white background PNG to create the translucent effect. Other options to create the white transparency could have been the opacity property, or the CSS3 RGBa property, but a good old PNG-24 graphic is the most cross-browser friendly, with just IE6 requiring extra work to enable the alpha transparency.

To finish off the content area, a small radius is added to the corners using the border-radius property. Because this isn’t fully supported yet, browser specific code can tell individual browsers to add the novelty effect.

#content {
	width: 938px; padding: 16px 16px 60px 16px; overflow: hidden;
	background: url(images/white-trans.png);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

Styling the feature section

The large features section in the design currently holds three slides, but the aim is to only display one at a time. When Javascript is added, these can be tweaked to transitionally fade between each one, but we also need the section to work without Javascript being enabled. To do this, the features section is given the specific dimensions of one slide. The overflow:scroll property will then add scrollbars to allow the user to manually navigation between slides. The UL is given a width of 2820px (3x the width of the slides), and they’re floated side by side. Without limiting the features container to a specific size, the slides would simply fill up the whole page, which ruins the usability of the site. This way, the user can experience the features slideshow, albeit in a much more low-tech way.

#content #features {
	width: 940px; height: 457px; margin: 0 0 48px 0;
	overflow: scroll; /* Changed to hidden if javascript enabled */
}
	#content #features ul {
		width: 2820px;
	}

	#content #features ul li {
		float: left;
	}

Styling the columns and their content

Remember those two columns we wrote out in the HTML? They need floating side by side, so a width is calculated that will fit inside the content div, and the float:left property added. Inside these columns the video and upcoming events sections are styled. The video div simply has an image background to style up the embedded video, and some padding quickly aligns everything up. The definition list for the events section requires some extra CSS to manipulate the basic definition list element into the fancy layout we have planned. The date of each event is contained within the definition title, so that can be floated to the side and set to a large font-size. The extra span we added then comes in handy to render the month text at a smaller font-size, and as a block element so that it drops down below the number.

The definition description and its header h4 tags can then be given the appropriate typographic treatment once the DD is floated alongside the DT. With all styling complete it matches the original concept perfectly.

#content .column {
	width: 409px; float: left; padding: 0 30px 0 30px; margin: 0 0 24px 0;
}
	#content .column .video {
		width: 387px; height: 222px; padding: 13px 0 0 17px; margin: 0 0 24px 0;
		background: url(images/video-bg.jpg) no-repeat;
	}

	#content .column dl dt {
		width: 55px; float: left; padding: 10px 0 0 0;  overflow: auto;
		color: #fff; font-size: 64px; line-height: 34px;
	}
		#content .column dl dt span {
			font-size: 16px; text-transform: uppercase; display: block;;
		}
		#content .column dl dd {
			float: left; width: 354px;
		}

		#content .column dl h4 {
			font-size: 32px; font-weight: normal; color: #fff; margin: 0 0 5px 0;
		}

Styling the team list

The last part of the content styling is to flesh out the list of team members. Earlier each team member photo was exported, so these can now be set to each individual anchor tag. Each list item is set to float left, and is given the appropriate margin to space them out across the page. Anchor elements are by default inline elements, so to allow a specific width and height to be set, they need to be converted to display:block. Each individual team member can then be targeted through the class names on each anchor, with each photo graphic and image dimensions being added as a background.

#content ul#team {
	list-style: none; overflow: hidden;
}
	#content ul#team li {
		float: left; margin: 0 0 0 27px;
	}
		#content ul#team li a {
			display: block; text-indent: -9999px;
		}
			#content ul#team li a.joe {
				width: 199px; height: 229px;
				background: url(images/joe.jpg);
			}
			#content ul#team li a.charlie {
				width: 199px; height: 229px;
				background: url(images/charlie.jpg);
			}
			#content ul#team li a.lars {
				width: 205px; height: 233px;
				background: url(images/lars.jpg);
			}
			#content ul#team li a.marco {
				width: 198px; height: 229px;
				background: url(images/marco.jpg);
			}

Styling the footer

The footer area can be quickly finished up by adding the subtle texture background, and the back-to-top link floated over to the right, styled up and positioned into place.

#footer {
	min-height: 159px; overflow: hidden;
	background: url(images/footer-bg.jpg) center 0 no-repeat;
}
	#footer p a.back-top {
		float: right; margin: 14px 24px 0 0;
		font-size: 12px; text-decoration: none; color: #4d74bb;
	}
		#footer p a.back-top:hover {
			color: #234c97;
		}

Adding the Javascript

Let’s not forget the extra Javascript effects we had planned for that features section. With the help of some jQuery, and the super cool Cycle plugin, we can easily transform that basic features list into a fully working slideshow.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>

First, the jQuery library and our own scripts file is referenced in the HTML. The cycle plugin is included in the scripts.js, then some of our own Javascript can put it all into practice. First the overflow:scroll on the features list needs changing to hidden to remove those ugly scrollbars, then the cycle plugin is initiated on the features list. By default the plugin will place a simple fading transition between each element, but there’s plenty more options that could be configured.

$(document).ready(function() {

/* Change the overflow:scroll to overflow hidden on the Features list */

	$('#features').css('overflow','hidden');

/* Initiate the cycle on the Features list */
	$('#features ul').cycle();
});

The final concept

So here we have the complete mockup in live HTML and CSS format. Our HTML is clean and valid, and the CSS renders everything how we wanted according to the original PSD concept.

View the demo

Related posts

• Design and Code a Cool iPhone App Website in HTML5 (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• Coding a CSS3 & HTML5 One-Page Website Template (0)
• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• How to Build an Unobtrusive Login System in Rails (0)

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

• AJAX-enabled Sticky Notes With PHP and jQuery (0)
• PHP and MySQL File Download Counter (0)
• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• How to Build an Unobtrusive Login System in Rails (0)
• Big HTML Tutorial & Reference (0)

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

• How to Code up a Web Design from PSD to HTML (0)
• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• Animated Sharing Bar With jQuery and CSS (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• How to Build an Unobtrusive Login System in Rails (0)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'> $(function(){ var iFrames = $('iframe'); function iResize() { for (var i = 0, j = iFrames.length; i < j; i++) { iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';} } if ($.browser.safari || $.browser.opera) { iFrames.load(function(){ setTimeout(iResize, 0); }); for (var i = 0, j = iFrames.length; i < j; i++) { var iSource = iFrames[i].src; iFrames[i].src = ''; iFrames[i].src = iSource; } } else { iFrames.load(function() { this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; }); } }); </script>

Will resize an iframe like this:

<iframe src="content.html" class="iframe" scrolling="no" frameborder="0"></iframe>

View Demo

Still problematic…

1. The source of the iframe content must reside on the same domain
2. if the content inside the iframe changes height, this won’t adapt
3. I left Google Analytics code off the demo above, as when I added it in it seems to interfere and not resize the iframe, despite seemingly generating no errors.

Related posts

• Making a Sleek Feed Widget With YQL, jQuery and CSS3 (0)
• Make your MooTools Code Shorter, Faster, and Stronger (0)
• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• How to Build an Unobtrusive Login System in Rails (0)
• Sweet AJAX Tabs With jQuery 1.4 and CSS3 (0)

Mouse Wheel plugin is here.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2) Attach mousewheel event to body

The “30″ represents speed. preventDefault ensures the page won’t scroll down.

$(function() { $("body").mousewheel(function(event, delta) { this.scrollLeft -= (delta * 30); event.preventDefault(); }); });

Related posts

• Sweet AJAX Tabs With jQuery 1.4 and CSS3 (0)
• Resize iFrame to Fit Content (Same Domain Only) (0)
• Quick and Easy Way to Implement Drag n Share With jQuery (0)
• Making a Sleek Feed Widget With YQL, jQuery and CSS3 (0)
• Make your MooTools Code Shorter, Faster, and Stronger (0)