Dreamer Lines

The navigation on this site isn’t really all that complex, but the effect is pretty nifty: The highlighted words change color when you hover over the corresponding navigation item and vice versa.

Unowhy

So, the photography made me hungry and the recipes even moreso, but the site is here because of the jQuery effect both on the page spanning home-page navigation and the animated question marks (Click the “Inspirez-moi” circle).

Druckbar

A German design agency with a restrained garage door effect on the rollovers on the center of the page.  A truly excellent example of design, both in the static and javascripted parts.

Aviary

An online imaging suite (there is an image editor, a vector editor, a sound editor, effects editor and more) and they even have a tutorial for creating and submitting a design on Threadless with their tools. But the jQuery effects here are minimal again. They liven up the navigation without being over the top.

These three examples show fabulous restraint while still giving the added enhancement of jQuery. The thing to remember with the effects is the restraint. Just because it is possible to make everything move and respond to the user and fly around the screen, doesn’t mean it should. And with those words of warning, I give you my favorite navigation tutorials & plugins!

Build it yourself:

jQuery Tabbed menu (via Queness)
jQuery Sliding Menu (via I Love Colors)
Slick Animated Navigation (via Net Tuts+)
Superfish Navigation
Vimeo Style Navigation
Smooth Animated Menu (via BuildInternet)
jQ Dock
Long Dropdowns (via CSS Tricks) 

Our favorite jQuery techniques/plugins to enhance your CSS are:

Rounded Corners Don’t you hate it when your corners aren’t rounded in every browser? Or having to use some image based hack to get it just right? This jQuery plugin will fix that for you. Any browser that doesn’t support rounded corners natively will display your corners just how you intended.
Equal Height Columns Sometimes CSS just isn’t enough, and this little script will help you overcome the hurdles that CSS leaves.
Selector Styling Select menus are ugly, and really, they have no alibi, at least not any more. This plugin utilizes the jQuery UI to fix some really ugly HTML elements.

Better tooltips with CSS this tooltip tutorial walks you through better tooltips and creating them with CSS.

Pretty checkboxes and more pretty checkboxes and radio buttons We all know checkboxes look better on a Mac than on a PC. This script changes that. It lets you change yet another one of those ugly default parts of the web with jQuery.
Targeting advanced elements One of the best parts of jQuery is its ability to use advanced selectors, and this indepth guide will explain it to you better than I ever could.
Make an entire div a clickable link This little jQuery plugin will allow you to set a rollover effect and a link on an entire div all while letting your code validate. C’est super chouette!
Super Selector Support from the plugin’s site “In the course of a recent project, I used jQuery to add a first-child class to some <li> elements in our top navigation, to shore up IE6 CSS support without having to alter the markup. After seeing how easy jQuery made that, I realized it’s be possible to write a plugin allowing any browser supported by jQuery capable of supporting all CSS 2.1 selectors. So I wrote SuperSelectors. It goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover.” Ah, thank you!
Better current field highlighting Yes, you can create some field highlighting with CSS, but this technique from Chris Coyier over at CSS tricks is a great way to enhance the usability of your forms.

Some helpful resources are:

• jQuery for Designers
• Learning jQuery
• Noupe

There are a lot of tutorials out there to get you started, here short synopsis on why you should learn it and then some links to the best tutorials out there to get the job done. And a tutorial on how to write your first bit of jQuery code. Hooray!

What is jQuery?

jQuery is a JavaScript library that allows faster development of JavaScript effects. It does a lot of what Flash can do, by interacting with the HTML and CSS and manipulating these properties. It makes your website more dynamic and frequently more visually exciting. It also doesn’t have any direct negative effects on SEO (those only happen if you do things like set default CSS to display: none but we aren’t covering that here).

What is it used for?

It is used to make your page respond to events, (clicks, rollovers, etc) or to animate, or to post notifications such as error warnings. With jQuery you can manipulate the DOM and make pretty nifty animations and effects.

Let’s write some jQuery

You are going to need to download the current version of jQuery for this tutorial and include it in your header.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>jQuery Week on Purpleurbia</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8">
 </script>

</head>

Now we need to add some content to our HTML to manipulate:

<body>
 <div id="container">
 <div id="header">
 I made a jQuery!
 </div>
 <ul id="nav">
 <li>
 <a href="#">Click me</a>
 </li>
 </ul>
 <div>
 </div>
 <h3>Hello everyone!</h3>
 <h3 style="display: none;">
 Come back tomorrow for a more exciting tutorial!
 </h>
 </div>
</body>
</html>

*                    { margin: 0; padding: 0; }
body                { font-size: 62.5%; font-family: Georgia, serif; }
.clear              { clear: both; }

a                    { outline: none; text-decoration: none; color: white; font-size: 1.3em; }
h3                    { font-size:18px; color: #4b0049;}

div#container        { width: 300px; margin: 0 auto;}

#header                { padding: 20px; font-size: 3.0em; background: #9b6999; color: #ffffff;}

ul#nav                { list-style: none;  width: 300px; margin: 10px auto; }
ul#nav li            { float: left; padding: 10px; margin-right: 3px; width: 200px; background: #4b0049; }

Now we can write our jQuery. Put this in script tags (<script type=”text/javascript”></script>) in the header area of your document.

$(document).ready(function() {
 $("li.button").click(function(){
 $("h3").toggle();
 });
 });

The first line says to wait until the document is ready. The next line says that when there is a click on an li element with a class of button to toggle the h3 element.

Pretty nifty, eh? (You should get something that looks like this)

Some great tutorials to make sure you really get the basics:

jQuery's own tutorials. A little more technical than most of the others out there, but if you are a programmer type, this is the way to go.
ThemeForest's jQuery for Absolute Beginners series. This is a great video tutorial series that will get you on your way to learning jQuery.
Learningjquery.com's series on Working with Events. This series talks about the major difference between JavaScript and CSS
CSS Tricks' Video Series on Getting Started with jQuery. This is a great basic series on working with jQuery and CSS.

Check back tomorrow for some more advanced jQuery coding!

(the background from our header image is from BittBox's Free Texture Tuesday Series)

Almost every website has a featured content slider or tabbed section of some sort, so today, we will make an auto-scrolling, fancy-schmancy featured tabbed content thingy. Which will be primed and ready for us to make add some WordPress code to next time.

Take a look at this bad boy!

We are going to start by downloading a couple of important files:

jQuery

jQuery UI (the core and tabs)

Put these in your project folder/js.

Now create an HTML file in your root folder.

And create a blank stylesheet in your project folder /css.

Now, we need to make sure that we are calling the script files and css.

 		<link type="text/css" href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/ui.core.js"></script>
		<script type="text/javascript" src="js/ui.tabs.js"></script>

The core and tabs js files can be found in the development folder of your download.
Now, lets have some fun. In your HTML file, you will need to create an unordered list which will become the tabs, and a series of divs that will contain the corresponding content.

        <div id="Container">
            <!-- Tabs -->
            <div id="tabs">
                <div id="tabs-1" class="feature">
                    <h3>my<strong>robot</strong></h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip x ea commodo consequat.
                    </p>
                    <img src="images/robot1-big.jpg" alt="Featured Product" class="bigIMG" />
                </div>
                <div id="tabs-2" class="feature">
                    <h3>big<strong>robot</strong></h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipx ea commodo consequat.
                    </p>
                    <img src="images/robot2-big.jpg" alt="Featured Product" class="bigIMG" />
                </div>
                <div id="tabs-3" class="feature">
                    <h3>cool<strong>robot</strong></h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                        x ea commodo consequat.
                    </p>
                    <img src="images/robot3-big.jpg" alt="Featured Product" class="bigIMG" />
                </div>
                <ul id="tabby">
                    <li>
                        <a href="#tabs-1"><img src="images/robot1.jpg" alt="robot" /></a>
                    </li>
                    <li>
                        <a href="#tabs-2"><img src="images/robot2.jpg" alt="robot" /></a>
                    </li>
                    <li>
                        <a href="#tabs-3"><img src="images/robot3.jpg" alt="robot" /></a>
                    </li>
                </ul>
            </div>
        </div><!--end Container-->

This is where it gets fun! We are now going to make the slider look pretty and act the way it is supposed to.  I used Eric Meyer’s CSS reset to start with, and you probably should too.  It is followed by the styling telling the featured content how to look and finally the CSS telling the tabs how to behave.

/*Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/*End Reset*/
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height::21px;
}
#Container {
	width:960px;
	margin-left:auto;
	margin-right: auto;
	position:relative;
}
.clrBOTH {
	clear:both
}
img {
	border: none;
	}

#tabs {
	background-color: #6cb9c7;
	height:275px;
	padding-top: 25px;
}
.feature p {
	color: #ffffff;
	float:left;
	font-size: 1.166667em;
	margin-left:30px;
	margin-right:30px;
	line-height: 1.5em;
	width: 520px;
}
.feature h3 {
	color:#ffffff;
	float:left;
	font-size: 2em;
	font-weight:normal;
	line-height: 0.875em;
	margin-top:00px;
	margin-left:30px;
	margin-bottom:10px;
	width: 620px;
}

.bigIMG {
	margin-left:20px;
}
#tabby {
	position:absolute;
	left:0px;
	bottom:-75px;}
/* Tabs
----------------------------------*/
.ui-tabs {
    padding: 0em;
    zoom: 1;
	z-index: 100;
}

.ui-tabs .ui-tabs-nav {
    list-style: none;
    position: relative;
    padding: 0em 0em 0;
}

.ui-tabs .ui-tabs-nav li {
    position: relative;
    float: left;
    border-bottom-width: 0 !important;
    margin-top:5px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
	text-align: center;
    text-decoration: none;
    padding-top:30px;
	width:320px;
	color: #ffffff;
	height:75px;
	font-size: 1.5em;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
	background-image: url('../images/arrow.png');
	background-repeat: no-repeat;
    padding-bottom: 0px;
    border-bottom-width: 0;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
    cursor: text;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer;
}
 /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
    padding: 0em 0em;
    display: block;
    border-width: 0;
    background: none;
}

.ui-tabs .ui-tabs-hide {
    display: none !important;
}

  Here’s why that is working: we positioned the div contianing the tabs below the content area, but allowed the padding (the area where the arrow is) to overlap. We set the arrow to be a background image on the selected li (the selected class will be applied by the jQuery. Pretty nifty, eh? Meh, that’s alright, but it is still lacking a little magic. We want it to cycle through the featured content automatically, all sexy and such. How do we do that? We add a little bit more javascript!

$(function(){
 
    $('#tabs').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 2000);
    
   });

 Make sure to wrap that in <script> tags or put it in an external js file and link to it after your other files. And, voila! You have now made our slider! Hooray!

Entire sites built in Flash are ok in the following situations:

• You have a budget to burn on a team of designers and programmers
• You design really cool interactive games and applications built in Flash
• Your target market is one with higher end computers and they don’t mind having to install software to view your site
• Users in your target market typically have high-speed internet connections
• You have an alternate mobile-accessible or Flash-less site.

Flash is ok if:

• It is used sparingly to create effects or interactivity
• In those little ads on MySpace
• It doesn’t contain all the content of your site

Here is why: People want straight-forward sites.  They don’t want to wait for ages while your site downloads.  I have a high speed internet connection and I hate waiting through the spinners and page load animations to get to a site.  But they can be super totally awesome.

My point is if you are out shopping for a car, you wouldn’t get the one with all the bells and whistles just because you could afford it.  You would research it, see what is going to give you the best value.  That new Ford has nearly as many features as that Mercedes but the cost to purchase and maintain are much lower.  But I do know that sometimes you just have to have that Mercedes.  Just like sometimes you just have to have your Flash.  But use it smartly, and you will be rewarded.