Whilst working on a project recently I came across a need for us to show a selection of images depending on their type and when a link to them is clicked. I decided to use jQuery as it saves a lot of time as most of the work is done for you. I will step through the code so you can see how I did it.

View Demo As with any jQuery, we are required to use the following line to tell our jQuery code to run as soon as DOM is ready rather than when the page has finished loading.

$(document).ready(function(){

The next line detects any click from a link inside the div with an id of “links” $('#links a').click(function(){ Once a link has been clicked any attribute from that link is accessible through $(this), so the next line sets up a new variable called “color” and takes the “rel” attribute from the tag and puts it into our new variable. var color = $(this).attr('rel'); Once we know which colour link has been clicked we can then fade out all images that have a different colour and fade in the colour that has been clicked.

$('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3); $('#tiles div.' + color + ' img').fadeTo("slow", 1);

To finish off we need to close our function brackets. You will notice there is a “return false;”. This is to stop the link actually activating the href attribute and basically overriding it so we can do our magic. This becomes useful when users don’t have Javascript activated in there browser, you can make the link work as normal. Unfortunately, you would need to create separate pages with different colours highlighted instead. (sigh!) So, to sum up I have put all the code below and you will need to remember to include the latest jQuery Javascript file from http://www.jquery.com All the HTML you can grab from the source of the demo page. Final Code

$(document).ready(function(){ $('#links a').click(function(){ var color = $(this).attr('rel'); $('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3); $('#tiles div.' + color + ' img').fadeTo("slow", 1); }); return false; });

Hopefully, this will be useful to someone. Have fun! View the Demo

A very simple tutorial submitting HTML form values without refreshing page using jQuery and Ajax. Just implement this and enrich your web applications.

Download Script     Live Demo

JavaScript Code: jQuery and Ajax script take a look at dataString

On a project at work this week, I was creating a form that needed to have word limitations for each textarea. I found a ton of jQuery character counters, but not many word counters, so I decided to create my own.

Planning it all out I really love how when you type more than 140 characters in Twitter; it doesn’t prevent you from typing anymore, it just warns you that you have too many characters.

I definitely wanted to add in that kind of functionality, and here were a couple of things I needed to account for when creating this for the project:

Ability to add in maximum number of words Ability to add in minimum number of words Ability to add in minimum and maximum number of words

I wanted it to be easy to apply the word count to the textarea, so I just wanted to be able to add a class to each textarea and the functionality would be applied. Examples

Maximum of 50 words: class=”count[50]“ Between 50 & 100 words: class=”count[50,100]“ Minimum of 50 words (no maximum): class=”count[50,0]“

That seemed easy and flexible enough to get the job done, so let’s get started on the script. The jQuery First, once the document is loaded, we will use an attribute selector to target each textarea that has a class that starts with count[

$(document).ready(function() { $("[class^='count[']").each(function() {   }); });

Next, we are going to create some variables to use later on:

var elClass = $(this).attr('class'); var minWords = 0; var maxWords = 0; var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');

The first 3 lines should be pretty straightforward, just assigning the class value of the textarea to a variable, and defining our minimum and maximum variables. The fourth line may look a little crazy, so let’s walk through that. First, we want to take a substring of our class variable. The start of that substring will be the location of the open bracket, [ (+1 so we don’t actually include the bracket). The end of the substring will be the location of the closing bracket, ]. Then, we want to split the substring on the comma and assign it to an array named countControl. Next, we are going to assign values to our minWords and maxWords variables:

if(countControl.length > 1) { minWords = countControl[0]; maxWords = countControl[1]; } else { maxWords = countControl[0]; }

Then, we want to add in the information about the number of words after the textarea, and if there is a minimum number of words required, assign a class of error:

$(this).after('<div class="wordCount"><strong>0</strong> Words</div>'); if(minWords > 0) { $(this).siblings('.wordCount').addClass('error'); }

In the stylesheet, we also need to add a a style for the error class. Here is what I used:

.error { color: #f00; }

Here is where get into the meat of the script, where we actually do the counting of the words:

$(this).bind('keyup click blur focus change paste', function() { var numWords = jQuery.trim($(this).val()).split(' ').length; if($(this).val() === '') { numWords = 0; } $(this).siblings('.wordCount').children('strong').text(numWords);   if(numWords < minWords || (numWords > maxWords && maxWords != 0)) { $(this).siblings('.wordCount').addClass('error'); } else { $(this).siblings('.wordCount').removeClass('error'); } });

Ok, let’s go through this piece by piece:

$(this).bind('keyup click blur focus change paste', function() {

This is where we are binding functions to the textarea. I didn’t know you could bind multiple functions in one statement like that, but I just thought of as many actions that a user could take that could trigger a change of words. So basically what this says is that anytime any of those events are triggered, we fill execute the function that we defined. Next, let’s look at this section:

var numWords = jQuery.trim($(this).val()).split(' ').length; if($(this).val() === '') { numWords = 0; } $(this).siblings('.wordCount').children('strong').text(numWords);

Basically, we are just counting the number of spaces and updating our wordCount div that we appended as a sibling to the textarea. If there is nothing in the textarea, we assign a value of 0. This is necessary because if you type words and then go back and delete them all, it still thinks there is 1 word. I have no clue why. Finally, let’s look at this section:

if(numWords < minWords || (numWords > maxWords && maxWords != 0)) { $(this).siblings('.wordCount').addClass('error'); } else { $(this).siblings('.wordCount').removeClass('error'); }

If the number of words is less then the minimum number of words or greater then the maximum number of words (and the maximum number of words is not zero), then we add the class of error to our wordCount div. Otherwise, we remove the class of error. Take a look at the demo to see it in action. That’s it! Nothing too crazy going on and could be customized pretty easily. Anything you would want to add? Done differently? Let me know in the comments.

Learn how to use jQuery animations to slide captions and images in and out of view. Don’t distract your visitors, show them only what they need to see. Come check out what you can do to juice up your site. DIRECT LINK »

A while ago i spent a long time looking into how Digg made their original spy script, which i can no longer find on their site. They do however have a flash spy which is pretty cool and can be found here. I found a similar script to do the job over at leftlogic.com and used that for a while for a small project of my own, and over the past few weeks found the need to use the spy script for a project at MySpace that I’m working on that aggregates RSS feeds from various sources into one feed and displays them in a simple spy in date order. Due to the scale of the site the page needs to be cached and scalable for other projects. So with that in mind I went on the hunt for a new Spy script and found this one over at Jquery for designers. For the project, we modified the code so on load it paused before the next list item came in allowing for a better user experience, the code was also modified to order the list items correctly which was not the case in the original script. This script requires Jquery version 1.2.6. The [removed]

$(document).ready(function(){ $('ul.spy').simpleSpy('4','4000');

$('ul.spy li').reverseOrder();

});

(function ($) { $.fn.reverseOrder = function() { return this.each(function() { $(this).prependTo( $(this).parent() ); }); };

$.fn.simpleSpy = function (limit, interval) { limit = limit || 4; interval = interval || 4000;

return this.each(function () {
        // capture a cache of all the list items
        // chomp the list down to limit li elements
    var $list = $(this),
        items = [], // uninitialised
        currentItem = limit,
        total = 0, // initialise later on
        start = 0,//when the effect first starts
        startdelay = 4000;//set the initial delay onload.
        height = $list.find('> li:first').height();

    // capture the cache
    $list.find('> li').each(function () {
        items.push('

<li>' + $(this).html() + '</li> '); });

    total = items.length;

    $list.wrap('

<div class="spyWrapper">').parent().css({ height : height * limit });

    $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
    function spy() {
        // insert a new item with opacity and height of zero
        var $insert = $(items[currentItem]).css({
            height : 0,
            opacity : 0,
            display : 'none'
        }).prependTo($list);

        // fade the last item out.
        $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
            // increase the height of the new first item.
             $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                // fade the first item in and remove the last one
                $(this).remove();

        });

        currentItem++;
        if (currentItem >= total) {
            currentItem = 0;
        }

        setTimeout(spy, interval)
    }

    if (start < 1) {
           setTimeout(spy,startdelay);
            start++;
        } else {
        spy();
        }

});

};

})(jQuery);

The HTML:

<div id="sidebar"> <ul class="spy"> <li> <a href="#" title="Title"><img width="70" height="70" src="image/image1.jpg" title="Title" /></a> <h5><a href="#" title="View round">List Item 1</a></h5> <p class="info">Nov 29th 2008 by <a href="#" title="Visit Profile">Profile</a></p> <p class="tags"></p> </li> </ul> </div>

The style and content of the spy is completely up to you, you could easily add a PHP database query and while loop to this script to make this dynamic. If anyone has any questions implementing a database query into this leave a comment below.

Today, James Padolsey will demonstrate how to build an advanced jQuery plugin.

Ben Nadel has generously created a comprehensive video overview of the jQuery framework. He carefully covers everything from the basic hide/show methods, to jQuery’s AJAX capabilities. This is a “DON’T MISS” tut. I highly recommend it.

What Does He Cover?

Introduction What Is jQuery UI Effects - Pain Free Animation Why I Didn’t Like jQuery At First jQuery For Developers Anonymous Methods $() Factory Method Wrapping DOM Elements jQuery Selectors jQuery Selector Moment of Bliss Working With The $() Collection Attributes And Values Moving Elements Around Traversing The DOM Filtering The jQuery Collection Iterating Over The Stack jQuery Closures - Awesome Voodoo Magic! Eventing Binding And Triggering Custom Event Types jQuery AJAX Monitoring AJAX Requests jQuery Data() Method Extending jQuery - Plugins And Selectors jQuery Is Mad Awesome jQuery Resources Thank You For Listening

Watch the Video

You can view Ben’s video training here.

Today, one of our screencast competition winners, Brenley Dueck, will show us how to crop images with a jQuery plugin.

This post about feedback mail with nice slide effect using php SMTP class and jQuery. It's very useful to add your php websites as like contact/feedback page.I have downloaded this SMTP class from phpclasses.org. Include with jQuery Slide effect just you have to upload these files into hosting server. Feedback page with slide effect.

Download Script     Live Demo

You have to add this jquery

Today will be the first part of a 2-part series. Ultimately, we’ll be drawing information from a database to create an advanced tooltip. Today, we’ll start with the layout and the basic functionality. It shouldn’t be too different from what we did in Day 11. In Part 2, we’ll use jQuery to call a PHP method asynchronously, and then populate the tooltip.

For today's massive video tutorial, we'll be working with sessions, classes, prepared statements, and mysqli to build a login system for a small site.

A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud. Aside from the actual links themselves, which give people an idea of the subjects that your site covers, they can also show how popular the different subjects are. Another great thing about tag-clouds is that they can be used to describe the frequency of anything; you can link to articles, blog posts, images, video, or anything else that you have in abundance on your site.

Tag-clouds are easy to do badly; whether from a design perspective or from a code perspective. Thanks to jQuery, it’s also easy to do well. We’ll be using the hot new 1.3 version of jQuery for this example and will be working with PHP and MySql to provide a JSON feed of our tags. Getting the tags into a database in the first place is beyond the scope of this tutorial, but it’s a simple enough matter to retrieve and pass them to a waiting page via AJAX. Getting Started

Let’s make a start on the page that the tag-cloud will be shown on; in a new file in your text editor create the following page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="tagcloud.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Tag Cloud</title> </head> <body> <div id="tagCloud"> <h2>Tag Cloud</h2> </div> <script type="text/javascript" src="jquery-1.3.min.js"></script> <script type="text/javascript"> $(function() { //get tag feed $.getJSON("http://localhost/jquery/tagcloud.php?callback=?", function(data) { //process JSON object }); }); </script> </body> </html>

Save this as tagcloud.html. At this stage we have almost nothing on the page, just a simple container for the tag-cloud and a 2nd-level heading within the container. Any other elements we need can be created as and when they’re required. We link to a stylesheet in the head for some styling which we’ll add later on, and at the end of the body we link to jQuery. We make the request for the JSON response in a custom script block after the reference to jQuery. getJSON

We use the $ alias to call the getJSON jQuery method, which is a higher-level abstraction of the ajax method; normally jQuery methods are called on objects that are references to elements, but because we’re not referencing any elements yet we can use the jQuery alias instead. This also means that the jQuery object will not be returned by the method. Instead the xmlHTTPRequest is passed back. The getJSON method accepts two arguments in this example (although more can be used if necessary); the first is the URL to which we are making the request. As we’ll be receiving a JSON object, it makes sense to use getJSON. We could use the ajax method, but would then need to configure more properties of the request (such as the dataType), so using this saves us a bit of time and coding. At the end of the URL we specify a JSONP callback - ?callback=? - which will enable the browser to directly manipulate the JSON object, even if it comes from another domain, without any additional server-side processing. The Callback Function

The second argument is the callback function that we want to execute once the object is returned to the page. We haven’t put any code in this function yet, because we don’t have the JSON object to work with. We can come back to this page in a little while once we’ve written the PHP. I said a moment ago that no server-side processing is needed when working with JSONP callbacks, and yet we’re now going to go off and write some PHP. This is only because no one is providing the data we want So we have to create it ourselves. If someone were providing a JSON feed of popular tags, we could still use the same jQuery code to request and process it. Some PHP

You’ll need to have access to a web server in order to run the file that we’re about to create, but this could be your own local web server that you use for development, or it could be the server your site or blog is hosted on. In a new page in your text editor add the following code:

<?php

//connection information $host = "localhost"; $user = "root"; $password = "your_password_here"; $database = "tagcloud";

//make connection $server = mysql_connect($host, $user, $password); $connection = mysql_select_db($database, $server);

//query the database $query = mysql_query("SELECT * FROM tags");

//start json object $json = "({ tags:[";

//loop through and return results for ($x = 0; $x < mysql_num_rows($query); $x++) { $row = mysql_fetch_assoc($query);

//continue json object
$json .= "{tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'}";

//add comma if not last row, closing brackets if is
if ($x < mysql_num_rows($query) -1)
  $json .= ",";
else
  $json .= "]})";

}

//return JSON with GET for JSONP callback $response = $_GET["callback"] . $json; echo $response;

//close connection mysql_close($server); ?>

Save this as tagcloud.php. For this example, I’m assuming you have MySql installed and configured, and have setup a database called tagcloud. Within this database I’m also assuming there is a table called tags. This table will have rows of the tags and the frequency of the occurrences of these tags. I want to stress that this isn’t production-level code because security has not been a factor in its design; we need somewhere to get our AJAX response from in this example and this code will give us that somewhere.

Let’s briefly look at what we’ve done.

//connection information $host = "localhost"; $user = "root"; $password = "your_password_here"; $database = "tagcloud";

First we setup the connection information that we’ll need in order to connect to the database. Make sure you replace your_password_here with the actual password you set to access MySql. We then connect to the database and set the query that we’ll use to access the data from the tags table.

//start json object $json = "({ tags:[";

//loop through and return results for ($x = 0; $x < mysql_num_rows($query); $x++) { $row = mysql_fetch_assoc($query);

//continue json object
$json .= "{tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'}";

Next we create the string that will start the JSON object, before looping through each row in the table and performing the query. We continue to build the JSON string within the for loop, adding the data from both fields of the current row as properties and values.

//add comma if not last row, closing brackets if is
if ($x < mysql_num_rows($query) -1)
  $json .= ",";
else
  $json .= "]})";

}

We perform a simple check on each iteration of the loop using the for conditional to see whether we’re reading the last row in the table; if we aren’t we use a comma to separate each object, if we are we close the object. The format of the JSON object will be individual record objects within a single container array, within an outer object.

//return JSON with GET for JSONP callback $response = $_GET["callback"] . $json; echo $response;

//close connection mysql_close($server);

We then echo the response back to the client using a GET request; this is needed in order to make use of the jsonp callback in our main page. We need to specify the name of the URL parameter that follows the URL of the in the JavaScript, which in this example is simply callback. We can’t tell it the name of the function that we want to pass it to however, because the function is anonymous. jQuery will handle this for us and ensure the data is passed to the correct function.

Once we’re done, we close the connection. At this stage, we still can’t see anything on the page, but if you run the run from a content-serving directory of your web-server and use the NET tab of Firebug, you can see that data that is being returned to the page:

Processing the json

Now that we have some JSON to work with, let’s go back to the HTML page and do something with it. Our fist task is to process it to extract the data; in tagcloud.html, remove the comment we left within the callback and add the following code:

//create list for tag links $("<ul>").attr("id", "tagList").appendTo("#tagCloud");

//create tags $.each(data.tags, function(i, val) {

//create item var li = $("<li>");

//create link $("<a>").text(val.tag).attr({title:"See all pages tagged with " + val.tag, href:"http://localhost/tags/" + val.tag + ".html"}).appendTo(li);

//add to list li.appendTo("#tagList"); });

First we create a new list element, set its id attribute, and append it to our container on the page. As the data in the JSON object isn’t in any particular order, an unordered list meets our requirements. Then we use the each() jQuery method to iterate over all of the items in the array nested within our JSON object. For each iteration, we create a new list item and a new link.

We set the text of each link to the value of the tag property of the current object from our JSON object, as well as sett the title and an href. The href used will depend largely on how the pages showing the tags are going to be generated, we could generate a search results style page listing all of the pages that matched whichever tag was clicked using PHP or .NET easily enough (the results page is also beyond the scope of this tutorial). The link is then appended to the list item, and both are appended to the <ul>.

At this stage, our page should appear something like the following:

It’s certainly a list of links, but a tag cloud it isn’t. We can easily fine tune the appearance of the widget with a little CSS. Let’s do this next. In a new file in your text editor, add the following code:

tagCloud {

width:290px; background-color:#575454; text-align:center; padding:5px; overflow:auto; font-size:70%; font-family:arial; }

tagCloud h2 {

color:#ffffff; font-size:2.5em; margin:0 0 10px 0; background:url(images/cloud.gif) no-repeat 0; padding:15px 0 15px 80px; }

tagList { margin:0; padding:0; }

tagList li {

list-style-type:none; float:left; margin:0 10px; height:35px; }

tagList li a { text-decoration:none; color:#ffffff; }

tagList li a:hover ( text-decoration:underline; }

Save this as tagcloud.css. The styles used are a mixture of functional and aesthetic rules, such as floating the list items, and setting their dimensions used to control how the widget functions. I’ve kept the styles as minimal as possible, as no doubt you’ll need to change most of the purely visual styles to fit in with the theme of your existing site.

One important point to note is the font-size we’ve used; a font-size of 70% is set on the outer container element; this represents the smallest text that will appear in the tag cloud. We’re going to be adjusting the font size of some tags using em units in the final part of the script. So setting a baseline font-size is important for consistency.

Now when you run the page, it should appear as follows:

Finishing the Script

One of the hallmark attributes of the tags in a tag cloud is that the individual tags are sized according to their frequency of occurrence; the more popular a tag is, the bigger it’s displayed. We can easily make use of the freq property within our JSON object to resize each link according to its popularity. In between creating the new link and appending it to the unordered list in our script, add the following code:

//set tag size li.children().css("fontSize", (val.freq / 10 < 1) ? val.freq / 10 + 1 + "em": (val.freq / 10 > 2) ? "2em" : val.freq / 10 + "em");

In truth, the css method could easily be chained to the jQuery object directly after we set the link’s title attribute, but they’re separated here for better readability. Within the css method, we specify the fontSize style attribute and use the standard JavaScript ternary conditional to check whether the current value of the freq property divided by 10 is less than 1. If it is, we add 1 to the figure and then concatenate the string em on the end. This will ensure that none of the tags have a font-size of less than 1em, which is equal to our 70% style rule set on the container element.

However if the value of the freq property divided by 10 is not less than 1, we then check (using another ternary, the equivalent of nesting for loops) whether it is greater than 2; if it is, we simply use 2em as the value of the font-size property. Any elements with a font-size of 2em will be twice the size of our original 70% baseline, which is probably as big as any tag in this type of widget should get. Any values greater than 1 but less than 2 are used in their fractional form to set a font-weight of between 1 and 2 ems. The final page should now appear something like the following screenshot when viewed in a browser:

Summary

In this tutorial we’ve seen how “easy” it is to build a basic tag cloud which retrieves the tags to display as part of an AJAX request directly after page load. It is easy to resize each tag depending on its frequency using a sensible range of text sizes. Although the overall appearance of the widget has been left rather minimally styled, it should be easy to build on this foundation to create something that is beautiful as well as functional.

Yesterday I posted a link to some templates that extended the 960.gs grid system that could be used for Rapid Interactive Prototyping. I loved the templates, but not that they used Mootools, I prefer to use JQuery where possible. I put on my hackers hat and ported the templates to JQuery.

You can see a demo of the Fixed width, and Fluid templates, and download the files here.

We like to experiment with new ideas and concepts. We like to challenge ourselves and provide our readers with new formats. This post is the first in our “Ask Smashing Magazine” series, in which well-known developers from the web design community answer our readers’ questions and suggest solutions to common problems. Today, we are glad to welcome Chris Coyier, who you may know from his articles on CSS-Tricks, to our Smashing Magazine Editorial Team. From now on, Chris will regularly answer your CSS- and jQuery-related questions and present answers to the most interesting, useful and original ones in his articles on Smashing Magazine. Welcome, Chris! Of course, you can send any CSS- and jQuery-related question you want. To ask a question, you can do any of the following:

Send an email to Chris at ask [at] smashingmagazine [dot] com with your question, Post your question in our forum, you will need a signup (yes, the forum is not officially launched yet, but it is running!), Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag “[Ask SM].”

Please note: Chris will do what he can to answer most questions, but he will certainly not be able to answer all of them. However, we hope that our forum may help you to solve your problem in case Chris couldn’t help you out. How To Design A Colorful Sitemap With CSS And jQuery? Let’s start with the first question from one of our readers: “I was asked to design a sitemap for our new corporate project, but I wasn’t able to find any good tutorials on the Web. Could you help me out? We are looking for a well-organized, clean and colorful sitemap with dynamic effects (jQuery-based if possible).” Martin Tortier Chris Coyier answers: Content-heavy websites with a deep navigational structure can benefit from sitemaps. A sitemap contains links to every important page on a website, often visually organized in a hierarchy. They generally should not have opening and closing mechanisms to display the hierarchy. If you are forcing someone to click five times to drill down to what they are looking for, that is “navigation,” not a sitemap, and isn’t very helpful. Having every link visible at once is ideal for people searching the page for what they are looking for. Admittedly, though, visually browsing a large and deep sitemap can become confusing quickly. In this demo article, we will build a visually interesting sitemap that makes the hierarchy clearer through the use of color.

View Demo | Download Files Semantic HTML Markup The perfect HTML structure for a sitemap is the unordered list (<ul>) element. Each list represents one layer of the hierarchy. We can nest lists inside of other lists to build downward and complete the sitemap hierarchy. We will use a typical university as an example. University websites are often monstrosities of content, with pages ranging from information about the campus and admissions to sports to academic work to alumni foundations. Let’s take a look at some clean unordered-list markup. <ul> <li> <a href="#">Visiting Campus</a> <ul> <li> <a href="#">Tours</a> <ul> <li><a href="#">Undergraduate</a></li> <li> <a href="#">Walking</a> <ul> <li><a href="#">Guided</a></li> <li><a href="#">Unguided</a></li> </ul> <!-- END Walking --> </li> <li><a href="#">Group</a></li> <li><a href="#">Field Trips</a></li> </ul> <!-- END Tours --> </li> <li><a href="#">Campus Map</a></li> <li><a href="#">Events Calendar</a></li> <li> <a href="#">Athletics</a> <ul> <li><a href="#">Football</a></li> <li><a href="#">Baseball</a></li> <li><a href="#">Soccer</a></li> <li><a href="#">Volleyball</a></li> </ul> <!-- END Athletics --> </li> <li><a href="#">Arts</a></li> <li><a href="#">Science</a></li> <li><a href="#">Hospital</a></li> </ul> <!-- END Visiting Campus --> </li> <li><a href="#">Admissions</a></li> <li><a href="#">Student Life</a></li> <li><a href="#">Academics</a></li> <li><a href="#">International</a></li> <li><a href="#">Research</a></li> </ul> This markup, all by itself and completely unstyled, serves as a completely useable sitemap.

Styling with CSS Some very simple CSS will have this boring ol’ list spiffed up in no time. Indenting each child list, just as the browser does by default, makes good sense for establishing a hierarchy. We’ll keep that idea but house each list in its own box. We’ll shade the background of the boxes in shades of gray, from darkest gray at the “base” of the page (or highest level in the hierarchy) to lightest gray at the “top” (or lowest level in the hierarchy). ul { padding: 8px 25px; list-style: none; background: #282828; } ul ul { background: #393939; } ul ul ul { background: #4b4b4b; } ul ul ul ul { background: #5a5a5a; } Of course, we have already performed a basic CSS reset, set up some basic typography and applied some background images for extra spiffiness. You can view the complete CSS if you want to see it in its entirety. Here is what we have so far:

Bonus CSS for WebKit Browsers Our effect is starting to look like boxes stacked on boxes. For a bit of progressive enhancement, we can build on this look with the CSS3 box-shadow property. Currently, only WebKit browsers support this feature with a proprietary extension, but it works! To create this effect, add this CSS: ul { -webkit-box-shadow: 2px 2px 5px black; }

Hey! Why do those inner lists look faded out like that? Don’t worry, that doesn’t have anything to do with the drop shadow. We are going to be working with that in our next step! Adding the Color Effects with jQuery We are going to use the jQuery JavaScript library to really make this sample sitemap sing. Remember, the goal is to keep the hierarchy defined through use of color. The idea here is, when the mouse cursor hovers over a list, that list will brighten up a bit and fade to a unique color. When the mouse cursor is removed, the list will return to its original color. For example, our “outer” list will fade to a purple color when the mouse hovers over it. This is a distinctive effect and allows your eye to follow the purple border and see all the other list items that are a part of that list, despite it being broken up by sub-lists. We will be animating both the color and opacity of the list. jQuery can animate opacity out of the box, but animating color requires use of the jQuery color plug-in. For the sake of speed, let’s load jQuery from Google, and then link to our own JavaScript file where we’ll be writing our code: <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("jquery", "1.2.6"); </script> <script type="text/javascript" src="js/jquery.color.js"></script> <script type="text/javascript" src="js/sitemap.js"></script> Now we can dig into our own sitemap.js file. The first order of business is to execute our code only when the DOM is ready for it. Then we will set the opacity level of each of our lists to 50%. $(function(){

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

// Do fading stuff

}); Avoiding Repetitious Code, Building a Plug-In Each of our lists will get the same “fading” effect, but each will be just slightly different in that it will fade to a different color. To avoid a bunch of unnecessary and unwieldy repetitive code, let’s abstract the fading effect into a simple plug-in we’ll call “doFade.” Now we can call that plug-in function on each “layer” of the list and pass the color with a parameter. $(function(){

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

$("ul").doFade({ fadeColor: "#362b40" }); $("ul ul").doFade({ fadeColor: "#354668" }); $("ul ul ul").doFade({ fadeColor: "#304531" }); $("ul ul ul ul").doFade({ fadeColor: "#72352d" });

}); Let’s take a look at the entire function and discuss its functionality a bit. jQuery.fn.doFade = function(settings) {

// if no paramaters supplied...

settings = jQuery.extend({ fadeColor: "black", duration: 200, fadeOn: 0.95, fadeOff: 0.5 }, settings);

var duration = settings.duration;
var fadeOff = settings.fadeOff;
var fadeOn = settings.fadeOn;
var fadeColor = settings.fadeColor;

$(this).hover(function(){
 $(this)
     .stop()
     .data("origColor", $(this).css("background-color"))
     .animate({
         opacity: fadeOn,
         backgroundColor: fadeColor
     }, duration)

}, function() { $(this) .stop() .animate({ opacity: fadeOff, backgroundColor: $(this).data("origColor") }, duration) });

}; The function accepts parameters passed to it that it reads as “settings.” The first thing we do is set defaults for those settings, in case the function is called when they are not supplied. This is exactly the case of our code, because we will provide the “fadeColor” but not the duration or fadeOff or fadeOn values.

fadeColor: the background color that the element will fade to. duration: how long the animation takes to complete, 1000 = 1 second. fadeOn: opacity percentage when element is hovered on, 0.95 = 95%. fadeOff: opacity percentage when element is not hovered on, 0.5 = 50%.

Then we set up the hover function, which binds itself to the element that we called the function on. Hover is actually two functions. The first runs when the mouse hovers over the element, and the second is a callback function when element is no longer being hovered on, essentially a mouseout. We do three things in the first function. First we .stop(), which ensures any animation being run on the element is stopped. This prevents animations from queuing if the element is hovered on and off quickly, which looks awkward. Then we use jQuery’s brilliant .data() function to store the original color of the element. Remember, each of our lists has its own unique shade of gray; so to avoid hard-coding nonsense, we’ll just auto-detect this color with the .css() function and save it to a variable we’ll call “origColor.” Then we animate both the opacity and the background color to the settings. In the callback, we’ll again .stop() the animation. Then, all we need to do is animate it back to the original color (which we have stored) and revert to the “off” opacity value. So there you have it, Martin!

View Demo | Download Files Become the author of the “Ask SM”-section! Please notice that we are looking for professionals and experts who know Photoshop, Illustrator, PHP or Ruby On Rails and have a long experience with these tools / languages. If you can regularly answer questions from our readers (in posts on SM, in the forum or on Twitter), please let us know. We’ll pay you, of course. What should the new section focus on? What do you think about the new section on Smashing Magazine? What should it focus on? What problems and solutions would you like to see covered in our posts? Please vote in the poll and let us know how we can improve this new section on Smashing Magazine by commenting on this post! Your input is very important to us! Thanks.

<a href =”http://answers.polldaddy.com/poll/1301379/” >What should the “Ask SM”-section focus on?</a> <span style=”font-size:9px;” mce_style=”font-size:9px;”> (<a href =”http://www.polldaddy.com”> polls</a>)</span> (al)

Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, I’ll show you how to build a custom accordion that is more “bandwidth efficient”.

That seems like a lot for just one simple accordion. Especially when you add in the normal jQuery script, which is 18kb minified and Gzipped. So instead of increasing your page load time with the extra unneeded functionality, why not create something from scratch? I also think that writing things from scratch really gives you a much better understand of how to use jQuery effectively, without always turning to use someone else’s code. So the plan for this tutorial is to show create an accordion using the jQuery UI function, then create one using some custom coding. Let’s use a blog sidebar as an example. The Markup The markup is very simple, just a list item for each section in the accordion: <ul id="accordion"> <li> <a href="#recent" class="heading">Recent Entries</a> <ul id="recent"> <li><span class="date">01.19.2009</span> <a href="#">Recent Entry Title</a></li> <li><span class="date">01.15.2009</span> <a href="#">Recent Entry Title</a></li> <li><span class="date">01.13.2009</span> <a href="#">Recent Entry Title</a></li> <li><span class="date">01.11.2009</span> <a href="#">Recent Entry Title</a></li> <li><span class="date">01.10.2009</span> <a href="#">Recent Entry Title</a></li> </ul> </li> <li> <a href="#popular" class="heading">Popular Entries</a> <ul id="popular"> <li><span class="date">08.16.2008</span> <a href="#">Popular Entry Title</a></li> <li><span class="date">06.12.2008</span> <a href="#">Popular Entry Title</a></li> <li><span class="date">04.12.2008</span> <a href="#">Popular Entry Title</a></li> <li><span class="date">06.12.2007</span> <a href="#">Popular Entry Title</a></li> <li><span class="date">03.12.2007</span> <a href="#">Popular Entry Title</a></li> </ul> </li> <li> <a href="#categories" class="heading">Categories</a> <ul id="categories"> <li><a href="#">Category Name</a> <span class="count">7</span></li> <li><a href="#">Category Name</a> <span class="count">4</span></li> <li><a href="#">Category Name</a> <span class="count">15</span></li> <li><a href="#">Category Name</a> <span class="count">29</span></li> <li><a href="#">Category Name</a> <span class="count">8</span></li> </ul> </li> <li> <a href="#archive" class="heading">Archive</a> <ul id="archive"> <li><a href="#">January 2009</a> <span class="count">4</span></li> <li><a href="#">December 2008</a> <span class="count">14</span></li> <li><a href="#">November 2008</a> <span class="count">12</span></li> <li><a href="#">October 2008</a> <span class="count">8</span></li> <li><a href="#">September 2008</a> <span class="count">18</span></li> </ul> </li> </ul> The CSS We are going to add some very basic styling so that the accordion looks more presentable. Since this tutorial is mainly focused on the JavaScript, I am going to run through what we are doing with the CSS quickly. Since I always start from my own simple framework stylesheet, I’m going to use it here too: /*****Reset*****/ html, body, div, h1, h3, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

/*****Basic Definitions*****/ body { background: #fff; color: #333; font: 14px/20px Georgia, "Times New Roman", Times, serif; } h1 { font-size: 24px; line-height: 30px; margin-bottom: 18px; }

a { } a:visited { } a:hover { text-decoration: none; } img { border: none; } p, ul, ol, dl, table { margin-bottom: 18px; } ul, ol, dd { margin-left: 36px; }

/*****Custom Classes*****/ .clearing { clear: both; } .clearfix { overflow: hidden; } .last { margin-bottom: 0; } .screenReader { left: -9999px; position: absolute; top: -9999px; } Next, I am going to remove the margin and list-style from the accordion unordered list and the descendant lists and add a bottom border to the accordion unordered list (you will see why it is only a bottom border shortly). ul#accordion, ul#accordion ul { list-style: none; margin: 0; } ul#accordion { border-bottom: 1px solid #000E2E; } Then, I am going to add a border around each accordion section, except the bottom border. Also, I am going to remove the border from list items that are descendants of the accordion section and add only a bottom border. If it is the last child of a descendant unordered list, I am going to remove the bottom border. Yes, I know this will not work in IE, but it’s not essential. ul#accordion li { border: 1px solid #000E2E; border-bottom: none; } ul#accordion ul li { border: none; border-bottom: 1px solid #C2C8D1; color: #999; padding: 5px 10px; } ul#accordion ul li:last-child { border-bottom: none; } Next, I am going to style the main link that will toggle the accordion so that they stand out more: ul#accordion a.heading { background: #F4FFF9; color: #999; display: block; font-size: 18px; line-height: 18px; padding: 10px 5px; text-decoration: none; } ul#accordion a.heading:hover { background: #00B9D2; color: #fff; } Finally, I am just going to do some basic styling on the sub lists of the accordion so that they look a little nicer: ul#accordion li ul a { border-bottom: 1px solid #00B9D2; color: #025185; text-decoration: none; } ul#accordion li ul a:hover { border-bottom: none; } ul#accordion li ul .date { padding-right: 10px; } ul#accordion li ul .count { padding-left: 10px; } Let’s take a look at where we are so far. This is also what the accordion will look like when we are using the jQuery UI Accordion and JavaScript is disabled.

It looks like we will need to add some additional CSS for IE6 to account for the whitespace bug: ul#accordion { float: left; width: 300px; } ul#accordion li { float: left; width: 298px; } ul#accordion a.heading { width: 298px; } ul#accordion ul li { float: none; width: auto; } The jQuery UI Accordion

Now that we’ve got all the markup and styling complete, it is very simple to implement the jQuery UI accordion. First, we just need to include jQuery and our jQuery UI script. <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery-ui-accordion.js"></script> Then, we need to initialize the accordion on our unordered list with an id of accordion: <script type="text/javascript"> $(document).ready(function() { $('#accordion').accordion(); }); </script> And there you have it, a working accordion.

To make the currently open accordion item stand out more, I added a little extra CSS: ul#accordion li.ui-accordion-selected a.heading { background: #025185; color: #fff; } The class name of ui-accordion-selected is automatically added to the current accordion section. Our Custom jQuery Accordion Now that we have done the jQuery UI accordion, it’s time to create our own. One thing that I don’t necessarily like about the jQuery UI version is the way it displays when JavaScript is disabled. I would prefer to have it so that only one section is open at a time. To accomplish this, I am going to add in a little PHP. You could easily accomplish this with any programming language as well. The idea behind this is that we are going to pass a variable in the URL, and if the variable coincides with each section, we assign a class of current to that section. It is much easier to see this in code, so have a look: <?php $section = $_GET['section']; ?> <ul id="accordion"> <li<?php if($section == '' || $section == 'recent'): ?> class="current"<?php endif; ?>> <a href="?section=recent" class="heading">Recent Entries</a> <ul id="recent"> <li><span class="date">01.19.2009</span> <a href="#">Recent Entry Title</a></li> <li><span class="date">01.15.2009</span> <a href="#">Recent Entry Title</a></li> <li><span class="date">01.13.2009</span> <a href="#">Recent Entry Title</a></li> <li><span class="date">01.11.2009</span> <a href="#">Recent Entry Title</a></li> <li><span class="date">01.10.2009</span> <a href="#">Recent Entry Title</a></li> </ul> </li> <li<?php if($section == 'popular'): ?> class="current"<?php endif; ?>> <a href="?section=popular" class="heading">Popular Entries</a> <ul id="popular"> <li><span class="date">08.16.2008</span> <a href="#">Popular Entry Title</a></li> <li><span class="date">06.12.2008</span> <a href="#">Popular Entry Title</a></li> <li><span class="date">04.12.2008</span> <a href="#">Popular Entry Title</a></li> <li><span class="date">06.12.2007</span> <a href="#">Popular Entry Title</a></li> <li><span class="date">03.12.2007</span> <a href="#">Popular Entry Title</a></li> </ul> </li> <li<?php if($section == 'categories'): ?> class="current"<?php endif; ?>> <a href="?section=categories" class="heading">Categories</a> <ul id="categories"> <li><a href="#">Category Name</a> <span class="count">7</span></li> <li><a href="#">Category Name</a> <span class="count">4</span></li> <li><a href="#">Category Name</a> <span class="count">15</span></li> <li><a href="#">Category Name</a> <span class="count">29</span></li> <li><a href="#">Category Name</a> <span class="count">8</span></li> </ul> </li> <li<?php if($section == 'archive'): ?> class="current"<?php endif; ?>> <a href="?section=archive" class="heading">Archive</a> <ul id="archive"> <li><a href="#">January 2009</a> <span class="count">4</span></li> <li><a href="#">December 2008</a> <span class="count">14</span></li> <li><a href="#">November 2008</a> <span class="count">12</span></li> <li><a href="#">October 2008</a> <span class="count">8</span></li> <li><a href="#">September 2008</a> <span class="count">18</span></li> </ul> </li> </ul> You should also notice that I changed the url of each of the links the toggle the accordion sections to match up with the if statement for the section. So basically, if JavaScript is disabled, you will be taken to a new page with that section open. We also need to remove the jQuery UI accordion script, and include our own: <script type="text/javascript" src="scripts/accordion.js"></script> Additional CSS With this slight change to the markup, we need to add in a little additional CSS. We no longer have the ui-accordion-selected class being assigned to the list items; it is now a class of current. We also have to account for this class name change in the on state for the accordion: ul#accordion li.current a.heading { background: #025185; color: #fff; } So what we want to do is hide all of the unordered lists, unless they are a descendant of the list item with a class of current. I have also added a body id to this demo page so that we can use the same stylesheet for both examples. body#customAccordion ul#accordion li ul { display: none; } body#customAccordion ul#accordion li.current ul { display: block; } The Custom JavaScript First, we want to execute the script once the document is loaded, so we start with this: $(document).ready(function() {

}); We want the accordion to function when the heading links are clicked, but we don’t want to leave the page so we need to make sure and return false: $(document).ready(function() { $('ul#accordion a.heading').click(function() { return false; }); }); Next, I don’t like the outline that shows up around the links when they are clicked, so I set that to none: $(document).ready(function() { $('ul#accordion a.heading').click(function() { $(this).css('outline','none'); return false; }); }); There are two different cases for this script.

The link being clicked is the section that is already open. The link being clicked is not the section that is already open.

The First Case This is not functionality that the jQuery UI version has, but I think a user should be able to close all sections if they want. If the link clicked has a parent that has a class of current, we want to slide up the unordered list and remove the class of current. $(document).ready(function() { $('ul#accordion a.heading').click(function() { $(this).css('outline','none'); if($(this).parent().hasClass('current')) { $(this).siblings('ul').slideUp('slow',function() { $(this).parent().removeClass('current'); }); } return false; }); }); Another thing that bugs me about the jQuery UI version, is that you can scroll the accordion so it is almost out of view, click it, and then the interaction happens above what you can see. Scroll down on the jQuery UI example and give it a try. So my solution is to use this wonderful little script called jQuery ScrollTo. It is a very small script that adds smooth page scrolling. Let’s add that to the head of the document before our accordion script: <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery-scrollTo.js"></script> <script type="text/javascript" src="scripts/accordion.js"></script> When the section scrolls up, I want to scroll the window to the top of the accordion: $(document).ready(function() { $('ul#accordion a.heading').click(function() { $(this).css('outline','none'); if($(this).parent().hasClass('current')) { $(this).siblings('ul').slideUp('slow',function() { $(this).parent().removeClass('current'); $.scrollTo('#accordion',1000); }); } return false; }); }); The first parameter of the function is the target to scroll to, and the second is the amount of time it should take. The Second Case This case occurs when the section that is clicking is not currently open. So the first thing we want to do is hide the currently open section and remove the class of current (this piece of the code is very similar to the first case): $(document).ready(function() { $('ul#accordion a.heading').click(function() { $(this).css('outline','none'); if($(this).parent().hasClass('current')) { $(this).siblings('ul').slideUp('slow',function() { $(this).parent().removeClass('current'); $.scrollTo('#accordion',1000); }); } else { $('ul#accordion li.current ul').slideUp('slow',function() { $(this).parent().removeClass('current'); }); } return false; }); }); Next, we want to open the section we clicked and add the class of current: $(document).ready(function() { $('ul#accordion a.heading').click(function() { $(this).css('outline','none'); if($(this).parent().hasClass('current')) { $(this).siblings('ul').slideUp('slow',function() { $(this).parent().removeClass('current'); $.scrollTo('#accordion',1000); }); } else { $('ul#accordion li.current ul').slideUp('slow',function() { $(this).parent().removeClass('current'); }); $(this).siblings('ul').slideToggle('slow',function() { $(this).parent().toggleClass('current'); }); } return false; }); }); Finally, let’s scroll the window to the top of the accordion, just like we did in the first case: $(document).ready(function() { $('ul#accordion a.heading').click(function() { $(this).css('outline','none'); if($(this).parent().hasClass('current')) { $(this).siblings('ul').slideUp('slow',function() { $(this).parent().removeClass('current'); $.scrollTo('#accordion',1000); }); } else { $('ul#accordion li.current ul').slideUp('slow',function() { $(this).parent().removeClass('current'); }); $(this).siblings('ul').slideToggle('slow',function() { $(this).parent().toggleClass('current'); }); $.scrollTo('#accordion',1000); } return false; }); }); Take a look at our custom jQuery accordion. That’s it. Seriously. Did you think creating an accordion could be that simple? Conclusion Now, let’s compare the JavaScript file sizes using the Net tab in Firebug.

In the jQuery UI example, the JavaScript files total about 73 kb. In our custom example, with the additional scrolling of the window, the JavaScript files total about 57 kb. Now, that may not seem like much, but imagine if you have a very high traffic site. That could be a lot of bytes saved. Plus, now you understand more about jQuery. Now go out and write your own jQuery.

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

We'll be taking a look at the benefits of using a CSS framework when building web applications.

Funniest facebook comments ever!

jQuery or Prototype ?