SitePoint Design ViewJuly 12 2006 
Issue 23 

Newsletter Archives | Advertising | Contact us  
The Useful, the Usable and the Unbelievable in Design for the Web 

In This Issue...

What do you want your website to do?

CMS400.NET boxDevelop award-winning sites with an award-winning web CMS, and accomplish everything you want on the web.

Ektron CMS400.NET's extensive feature set lets you build sites quickly and easily, right out of the box -- all with a single application named 'Best in Show' at AIIM 2006. Use CMS400.NET to:

  • Build online communities with blogs, forums, & memberships
  • Publish polls, surveys, & HTML forms
  • Notify visitors with subscriptions & Web alerts
  • Track Web site visitors with site analytics and Web traffic reports.

Want more? Click here and download a FREE TRIAL now

Top


Introduction

Alex WalkerWelcome to Design View #23.

It's good to see the light of day again.

Last month Tom and I were despatched to SitePoint's "special project unit" -- dubbed "The Dog House" -- to work on the rebuilding of SitePoint's Marketplace. So far, we've re-launched the "Sell Your Site" section with (we think) a much improved layout and functionality. Other sections will follow shortly.

Although we've been isolated from our normal ICQ, email and RSS feeds (an eerie sensation at first) we did manage to come across a couple of really useful new tools that you might find handy -- jQuery and Total Validator.

I'll take you through them today.

Alex Walker
Editor
SitePoint Design View

P.S. Tell us what technologies you're using in your web development work, before July 15th, and you'll be entered to win a Dell 20" Wide-Panel LCD Monitor. Plus, you'll get a copy of the results so you can see what your peers (and competitors!) are doing.

Top


jQuery - The Web Designer's Fix-all Tool

If the rebirth of JavaScript has been the biggest theme of the past two years, you could probably divide most of the talk surrounding this topic into two main areas.

At the geekier end of town we've seen smarties harnessing JavaScript to do all sorts of amazing, and occasionally ridiculous, things with Ajax.

However for "front-end guys" like myself, much of the scripting fizz and bubble has been focussed around "refitting your markup", that is, using JavaScript to make your markup work better after it gets to the browser. Long-time Design View readers will probably remember a few of my own experiments along these lines over the past two years:

Although each of these scripts has quite a different purpose, they all involve sending neat, semantic markup to browsers, and then using JavaScript to either fix or extend the abilities of the browsers that are smart enough to understand. In most cases this involved "wrapping" some part of your markup in some more markup. Today we're going to look at an easy, all-purpose method that will allow us to do this anytime, anywhere: jQuery.

So, what is jQuery?

JQuery is yet another JavaScript library to join the already crowded space that includes Prototype, Scriptaculous, Rico, Moo.Fx and maybe a dozen others. You attach the ".JS" file in your <head> to get access to lots of pre-built functions and gizmos.

Q: Why would you possibly want another arcane Javascript library to deal with?

A: The key attraction of jQuery is what it can offer you within the first 10 minutes of using it.

As I mentioned, we've spent most of the past month working on improving the way in which SitePoint's Marketplace operates. While looking for an elegant way to allow sellers to display large screenshots, stats, graphs and other images without leaving the main auction page, we came across Cody Lindley's Thickbox, which is powered by John Resig's jQuery JavaScript library.

Cody's Thickbox in action

Thickbox speaks for itself, and five minutes of toying with it will show you its relative advantages. In the new MarketPlace, I was able to pull through both linked images and full HTML documents to the "Thickbox window" while simultaneously dimming (but not losing) the "launch page". Non-JavaScript users are simply linked directly to the item (image or page). Very clever, usable and accessible.

However since we'd already factored in the overhead of including the jQuery library (it's tiny, only 10kish), I thought it would be a good idea to find out what else it could do for us.

An hour later, I was a jQuery convert.

The true beauty of jQuery is its simplicity. Single lines of jQuery code can replace a dozen lines of normal JavaScript, yet it remains very elemental and flexible.

Top


ProWorkflow - The Business/Project Dashboard for Web Design Firms and Freelancers!

ProWorkFlow is a web-based application that allows you to manage your projects, tasks, time, contacts, notes and more.

  • Keep accurate time usage records
  • Deliver projects on time, and on budget
  • Organize, plan and delete jobs and tasks
  • Get a global overview of company activity

ProWorkflow is customisable and expandable to suit your business and is available in two flavours: subscription account or permanent license to run on your own server.

Click here to view our Free Online Demo or start your 14 Day Trial.

Top


Here's a perfect example. In my horizontal rules fixer from 2 years ago, we used the following script snippet: 

function fancyRules() { 
  if
(!document.getElementsByTagName) return; 
	  var hr = document.getElementsByTagName("hr");
  for (var i=0; i<hr.length; i++) { 
    var newhr = hr[i]; 
    var wrapdiv = document.createElement('div');
    wrapdiv.className = 'line';  
    newhr.parentNode.replaceChild(wrapdiv, newhr);  
    wrapdiv.appendChild(newhr);  
  } 
 } 

window.onload = fancyRules;

As a quick summary, the browser waits for the page to finish loading before rifling through the DOM to locate each occurance of <HR>. Each time it finds one, it creates a new <DIV>, gives it the class name "line", inserts it where the <HR> was, and then pops the old <HR> inside the new <DIV>. With a touch of CSS, we get a perfect HR result without having to change hundreds of pages.

At the time, I thought it wasn't a bad result for 12 lines of code. But let's look at how we'd achieve the same result using jQuery. 

$(document).ready(function(){
  $("hr").wrap("<div
class='line'></div>");
});

I kid you not.

To break it down (not that there's much to break): 

$(document).ready(function(){
  ....
});

The first and third lines are jQuery's "load event", which replace the old "window.onload" from above. Any task that we wish to complete during the loading of the page can be dropped inside these wiggly brackets.

This is a great improvement on the old "onload" because rather than waiting until everything has finished loading, jQuery's function watches everything that comes in and starts working as soon as it has all the parts it needs. Very neat.

Remarkably, the second line is even simpler: 

  $("hr").wrap("<div
class='line'></div>");

The "dollar object" -- $("hr") -- is all we need to tell jQuery to grab every horizontal rule on this page.

.wrap() is what we will be doing to those <HR> tags.

jQuery's built-in "wrap()" function takes in whatever HTML we give it (in this case "<div class='line'></div>") and wraps it around each <HR> in our page -- no loops or tests required.

We've used a "<DIV>" here, but it could just as easily have been a "<B>", "<SPAN>" or "<A>".

And although we've used a very simple selection rule here (i.e. all <HR>'s) , we could have easily been much more specific with what we targeted. Using familiar old CSS syntax, we could have used any of the following:

  • $("hr.separate") -- get the <HR> tags with the class name "separate"
  • $("li:only-child") -- get list items that are by themselves
  • $("ul > li") -- get only list items with unordered parent lists

While I've personally found .wrap to be of the most instantly useful jQuery functions, it's just one of many, including hide(), .show(), fadeOut("slow") and slideUp("fast"), just to name a few. You can probably guess what each one of these functions does. The jQuery starter's tutorial on the site is quite a gentle beginners guide and takes you through some of the most common functions.

But perhaps jQuery's single neatest feature is its ability to "chain" functions together. In other words, if I wanted to add a second <DIV> to our <HR> tags, I could simply add another ".wrap()" to the end of my code like this: 

$("hr").wrap("<div></div>").wrap("<div></div>");

So easy it's crazy. Crazy like a fox!

The new "Sell your Site" section of the Marketplace gives you another example of where this might come in handy.

Thumbnails images popping out

I wanted to add a small icon to the bottom corner of each thumbnail. This required each <IMG> tag to be wrapped in a container <DIV>, and another <DIV> showing the icon to be positioned in the container <DIV>.

The jQuery code is again one line (sorry -- I've had to split it here because of this newsletter's format). 

  $("#thumbnails li img")
.wrap("<div class='wrap'></div>")
.before("<div class='thumb'></div>");

In plain english, this code simply asks jQuery to:

  • find all the images in <li> tags that are inside "#thumbnails"
  • wrap these images in a DIV called "wrap"
  • squeeze another DIV (the one with the icon graphic) in my "wrap" DIV just before my image

Now that we have the structure, CSS does the rest.

Of course, if JavaScript is turned off, the thumbnails link directly to the raw image files and there is no need for the icons. Elegant degradation.

Like most other JavaScript libraries, jQuery's capable of some very high-end tricks, but the biggest attraction for me was its ability to solve the little problems quickly and with a minimum of fuss.

As you can probably tell, I'm a big JQuery fan already. I hope you'll find it useful too.

And of course, if you're expanding your JavaScript horizons, don't forget to upgrade to Joe Hewitt's latest Firebug extension, which is now the undisputed king of JavaScript debuggers.

Read the blog entry:

Kevin Yank DHTML/CSS Blog: Stylish Scripting
by Kevin Yank

FireBug 0.4 includes JavaScript Debugger (5 comments)

Top


Total Validator

While there's never really been a lack of excellent Firefox validation extensions, a new one did catch my eye recently -- Total Validator from Andy Halford.

As you might well expect, Total Validator validates your CSS and HTML. However, it also throws in a number of other original and useful touches, including:

  1. a spellchecker
  2. accessibility reports (508 and W3C WAI)
  3. a link checker
  4. the ability to receive your report as zipped HTML via email
  5. reports can contain a rendered screenshot from one of 18 available browsers including Firefox 1 and 1-5, Opera 7,8 and 9, IE 5 and 6, Netscape 3, 4.8 and 6.2 on Win, Konquerer, Epiphany(?), and Lynx on Linux.

Total ValidatorIt's just a pity that there's no Safari at this stage.

Nevertheless, "TV" is a comprehensive tool that's worth checking out. If you do find the extension handy, remember that Andy will gladly accept any donations thatyou can provide to keep the service operating and developing.

P.S. If you send yourself an email report, don't panic if it doesn't arrive in minutes. They take a little while to compile and send, but it won't be too long before it arrives.

Top


Design Spotlight

This month's pick from the talent pool as SitePoint's Marketplace Contests is a logo design for CondoGossip.com, described as a forum/portal 'for all things condominium'.

The contest has already attracted four or five top notch designs, but so far my personal fave has been this entry from Scottish designer Alex Cowles of Grafyte Studios -- better known as Grafyte in the forums.

Condo Gossip Design by Grafyte

If you check out some of Alex's other designs, you'll see that his design style is always simple and very classy with a great sense for colour. Really nice work.

Top


That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, The SitePoint Design View

Top


Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the SitePoint Design View!

Send this to a friend

Download free chapters from every SitePoint Book!

 What's New on SitePoint!

Build Your Own AJAX Web Applications

Matthew Eernisse
By Matthew Eernisse

Eager to dabble in remote scripting, but don't know where to start? Let AJAX guru Matthew Eernisse be your pilot -- his aerial tour will give you a bird's-eye view of the basics of building AJAX applications. Then it's back to the workshop to develop the foundations of an AJAX library on which you can glide to the dizzy heights of Web 2.0 success!

Five Keys to Improving Web Site Conversions

Kent Lewis
By Kent Lewis

If you spend your SEO dollars - and all your time - attracting visitors to your site, it might be time to refocus. As Kent explains, if your site doesn't generate conversions, your search budget's wasted. He presents his top five tips for ensuring good - and growing - conversion rates.

How to Code HTML Email Newsletters

Tim Slavin
By Tim Slavin

Browser idiosyncracies, spam registers, and various mail clients are just some of the pitfalls that must be faced by email marketers. Make sure your HTML email gets through with Tim's essential how-to.

The JavaScript Library World Cup

Dan Webb
By Dan Webb

Fast-track your way to AJAX supremacy with some of the better-trained libraries. Coach Dan Webb puts World Cup contenders Dojo, Mochikit, Prototype, and YUI through their paces, as they battle for a position in your next AJAX line-up. Full player profiles, as well as game highlights, are included!

HTML and CSS: An Absolute Beginner's Guide

Ian Lloyd
By Ian Lloyd

Toying with the idea of building your first web site? Or are you tired of being asked to build sites for family and friends? In this hands-on tutorial, Ian Lloyd unwraps the building blocks of web design and development, and shows exactly how they should be used! With this tutorial, readers can begin to build a complete, standards-compliant web site from scratch -- Ian assumes no prior knowledge at all.

 Hot Forum Topics
 New Blog Entries

Daily Links Blog:
SitePoint News Wire

Selling Web Design Services Blog:
Down To Business

Web Tech Blog:
Technically Speaking

DHTML & CSS Blog:
Stylish Scripting

Manage Your Subscription Here.

!You are currently subscribed as to the HTML edition of the Design View.

CHANGE your email address here

UNSUBSCRIBE from the Design View here.

SUBSCRIBE to the Design View here.

SWAP to the 'Text-Only' version of the Design View here.

SitePoint Pty. Ltd.
424 Smith St
Collingwood, VIC 3066
AUSTRALIA

Thanks for reading!
 © SitePoint 1998-2006. All Rights Reserved.

Back to the archives

Newsletter signup

Design, coding, community or marketing? Select the right newsletters right for your needs...