jQuery For Designers: Part 2

In our first look at jQuery we established that we could use JQuery to “fix” some of the discrepancies of certain browsers handling of CSS. We used jQuery to simply append (or prepend) a little bit of information inside of a tag enabling us to make site wide changes to certain visual cues very quickly and simply.

With part two we are going in a little deeper. Most web sites these days tend to have “news” pages where they display a “title”, a “summary” and the main “body” of the article. To my mind this can sometimes lead to overwhelming amounts of text in your face. I don’t know about you but if I’m presented with masses of text my brain shuts down and orders my fingers to click my mouse button away. So? What’s this got to do with jQuery?

Wouldn’t it be nice…

Wouldn’t it be nice to be able to have a little button underneath each article that displayed the “body” when it was needed and allow just the summaries for each article to be shown? Of course it would and using jQuery we can do this very quickly and simply, a bit like this.

Diving in

Before we dive straight in, let’s think about our lovely accessible semantic strict XHTML code for a few minutes. Our page already displays the “title”, “summary” and “body”, so we need to “hide” the body and place a “button” under the body. If we just placed a “button” directly into the page and the user has JavaScript turned off we would have a button that did nothing, bad usability. Hmm.

Bad button, bad

OK, so we need to add the “button” if JavaScript is enabled first. Now luckily we’ve already figured out how to do this in part 1, we just added the button using “prepend” in our JavaScript.

Show me the money…

So the first part of our JavaScript looks like this…

<script src=”http://jquery.com/src/jquery-latest.js”></script>
<script>
// When the page is ready
$(document).ready(function(){
$(“.article .thebody”).hide();
$(“#container .article ul”)
.prepend(“<li class=’readbody’><a href=” title=’Read the article’>Read Body</a></li>”);
});
</script>

Which if you’ve read the first part of this tutorial should look a little familiar. This assumes that our HTML mark-up looks like this…

<div id=”container”>
<div class=”article”>
<h3>Title 01</h3>

<p class=”summary”>Summary 01</p>
<p class=”thebody”>Lorem ipsum….</p>

<ul class=”actions”>
<li><a href=”">comment</a></li>
<li><a href=”">Trackback</a></li>
</ul>

</div>

<div class=”article”>
<h3>Title 02</h3>

<p class=”summary”>Summary 02</p>
<p class=”thebody”>Lorem ipsum….</p>

<ul class=”actions”>
<li><a href=”">comment</a></li>
<li><a href=”">Trackback</a></li>
</ul>
</div>
</div>

So our JavaScript firstly hides everything with a class of .thebody making all of our “body” text disappear, then it finds the UL in .article and prepends an LI with a link that displays “Read Body” inside the UL.

Which means, we hide all the article body text and stick another list item into every un-ordered list contained in an article. OK that was easy (was it?), but now we have to delve into the deep dark depths of JavaScript to get the functionality that we want.

<script src=”http://jquery.com/src/jquery-latest.js”></script>

<script> //<![CDATA[
// When the page is ready
$(document).ready(function(){
$(".article .thebody").hide();
$("#container .article ul")
.prepend("<li class='readbody'><a href='' title='Read the article'>Read Body</a></li>");

$(".actions li.readbody a").click(function(event){
$(this).parents("ul").prev(".thebody").toggle();

// Stop the link click from doing its normal thing
return false;
});
});
//]]></script>

Dark and Deep?

EH? OK, so its not as dark and deep as we thought, but still pretty mysterious nonetheless. Essentially this new bit of code looks for the link that we’ve just added and then steps back through the HTML until it finds the class .thebody. If it finds this, it gets toggled on or off and the default action of being a link is disabled (so we don’t click away or reload the page).

And that’s it. We’ve modified our “existing” site to use a nice accessible piece of JavaScript to enhance the usability of our site. You’ll notice as well that we’ve enclosed the JavaScript in a CDATA tag, this prevents XHTML validation systems throwing a wobbly and allows the page to validate for strict compliance.

Tagged as: designers, javascript, jquery, tutorial