webVines

I recently had a need to use a slideshow feature in a website I was building. Although there are many really good solutions in existence already, I found that they were often a little too bloated for my needs.

So I set out to create my own. You can see the result below. This is still a little jagged around the edges, and I will probably extend it to include a few other features, but it provides me with the most basic function I required.

Let me know if you find it useful!

This is an overview of the talk I did for the 2nd jQuery Manchester meetup on the 8th March 2011. What I was trying to do was introduce some of the basics to jQuery including its selectors, chaining, animation, events and ajax. It sparked some pretty good discussion following the talk, particularly around the controversial hashbang. Also, you can check out the code at this github repository. Without much further ado, here it is.

The first thing we need to do is add jQuery to our page, we’re going to be using the copy hosted by google api’s

<script src="//ajax.googleapis.com/ajax/libs /jquery/1.5.1/jquery.js"></script>

Now, we can test to see if this has been loaded by our page. Open up your browser and launch its developer console and type in jQuery.fn.jquery. All being well, we should get back our version number 1.5.1. OK, so the first thing we want to do within our script file is to add the document ready function. This means that we wait until all the elements of the DOM are loaded before we run our jQuery.

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

Once we’re at this stage, we are going to want to add some functionality to our navigation. What we’re going to do here is set their opacity to 0.5, when the user hovers over the nav item we are going to set the opacity to 1. This will distinguish between a hovered item, and an item that isn’t being hovered on. OK, so we’re going to want to make some selections, as these may be used more than once we are going to cache our selectors in variables. The two we will be making are the navigation li elements, and the navigation a elements.

var $navli = $( ‘#mainNav’ ).find( ‘li’ ) , $nava = $navli.find( ‘a’ ) ;

To turn the opacity of our li elements to 0.5 we’re going to use the .css() method.

$navli.css({ opacity : 0.5 });

Using the .css() method, we can set any number of attributes, we just need to separate our key / value pairs with a comma. In this example though, we only need to set the opacity. The next thing we need to look at is adding behaviour for when our users hover over the li elements. We’re going to chain our method to our .css() method.

$navli.css({ opacity : 0.5 }) .hover( function() { $(this).animate({ opacity : 1 }); }, function() { $(this).animate({ opacity : 0.5 }); });

You can see we are using the .animate() method as opposed to .css() on the elements when hovered. This animates our hover from 0.5 opacity to 1 and then back to 0.5 when not hovering. The next thing we are going to do is define our navigations click events. What we want to happen here is the user clicks the link and we go and get the content from its page to display it in our sites #main container. For this we are going to use ajax. OK, let’s set up the click event.

$nava.click( function ( event ) { event.preventDefault(); loadPage( $( this ).attr( ‘href’ )); });

There are two things happening in this snippet, first we are preventing the default action of the click i.e. stopping it loading the page. Secondly, we are passing the elements href to the function loadPage. We need to define what loadPage does; this is where our ajax comes into play.

var loadPage = function(incurl) { $.ajax({ url : incurl }) .success( function( data ) { alert(‘success’); }) .error( function() { alert( ‘error’ ); }); };

What our ajax function is doing here is attempting to get the data from the incoming url. Using our new ajax methods from jQuery 1.5 we can specify what happens when this is a success or when it is a failure. We can also run code on complete. We don’t want an alert to tell us the page exists, we want to load this info into our page. So we alter the code in the .success() method to this:

$(‘#main’).html(data);

Also, if our specified url returns an error (i.e. 404) then we change our code to this:

$( ‘#main’ ).html( ‘This page does not exist!’ );

We can make this a little bit more exciting by adding some animation. As standard we can use fade or slide animations. For this example we are going to be using the slide animation. So our success code now becomes:

$( ‘#main’ ).slideUp( function() { $( this ).html( data ).slideDown(); });

We can run the same code in our error function. We can see here that the code is pretty much identical in each function. So to keep our code as DRY (Don’t Repeat Yourself) as possible we will create a new changePage function.

var changePage = function( incData ) { $( ‘#main’ ).slideUp( function() { $( this ).html( incData ).slideDown(); }); };

OK, so now we can safely navigate through our site, but we might want to let our user know which page they are currently on. We are going to create another function which sets the current page. What this function is going to do is loop through each of our navigation items, if the url is equal to the clicked href then we add the class active.

var currentPage = function( incurl ) { $nava.each( function() { var $this = $(this); if ( $this.attr(‘href’) === incurl) { $this.parent().addClass( ‘active’ ); } }); };

You may have noticed we added in the .parent() method. Here we are traversing the DOM to find the parent element of the a element we’re currently looking at. If the strings match, we give that li element the class active. You’ll notice when we click the element now, we’re leaving all the previously clicked links with a class of active. We want to stop this, to do that, we add the following to our code:

$this.parent() .addClass( ‘active’ ) .siblings() .removeClass( ‘active’ );

And we add the function into our click handler.

$nava.click( function ( event ) { event.preventDefault(); loadPage( $( this ).attr( ‘href’ ) ); currentPage( $( this ).attr( ‘href’ ) ); });

Ok we’re starting to look good, but there is still one pretty big problem, the user cannot use their back button. We’re going to get a bit of help for this one and use Ben Alman’s hash change plugin. A watered down version of his bbq plugin, but it has all we need for this particular problem. So, let’s listen out for the hash change event.

$(window).bind( ‘hashchange’, function() { var hash = window.location.hash ? 'pages/' + window.location.hash.split( '!' )[1] + '.html' : 'pages/gandalf.html'; });

If the window doesn’t currently hold a hash identifier on its url, then we will use the default pages/gandalf.html. You may notice the .split( ‘!’ )[1] in use on our variable, this is so we strip the ! from our string to be usable within our changePage function. OK, so what we do now is remove the function calls from our click event, and add them into the hashchange event. So we end up with this.

$(window).bind( ‘hashchange’, function() { var hash = window.location.hash ? 'pages/' + window.location.hash.split( '!' )[1] + '.html' : 'pages/gandalf.html'; loadPage(hash); currentPage(hash); });

We need to change the # on our click event, so we put this code in here:

$nava.click( function ( event ) { event.preventDefault(); window.location.hash = ‘!’ + $( this ).data( ‘who’ ); });

Lastly, to get everything up and running, we trigger the first hash change event ourselves. This will run through and go to our default Gandalf page, good times.

$(window).trigger( ‘haschange’ );

During my talk at the second Manchester jQuery meetup, I used the .preventDefault() markup in my click event handler.

$('a').click( function(event) { event.preventDefault(); });

Upon inserting this, I was asked what the difference was between using this method and using return false. I knew I had read about this particular use case before, and clearly some of it had stuck as I was still using .preventDefault() but my answer pretty much boiled down the fact that this is my prefered method.

My reasoning was that it made more sense to me on reviewing my code, when I see return false for example, I am automatically assuming that I am trying to escape out of a loop or returning the value false.

Whereas if I see .preventDefault() I assume that I am trying to prevent the default action. However, as I'd been asked the question, I decided to dig a little deeper.

In jQuery, if a developer stops the default behaviour by using return false they are actually getting a little bit more than they bargained for.

Not only does this call have to take place right at the end of the resulting function they are also running both the .preventDefault() and the .stopPropagation() javascript calls.

$('a').click( function(event) { return false; });

is equivalent to

$('a').click( function(event) { event.preventDefault(); event.stopPropagation(); });

To understand what this means, let's look at the W3C definition for these calls:

.preventDefault()

If an event is cancelable, the preventDefault method is used to signify that the event is to be canceled, meaning any default action normally taken by the implementation as a result of the event will not occur. If, during any stage of event flow, the preventDefault method is called the event is canceled. Any default action associated with the event will not occur. Calling this method for a non-cancelable event has no effect. Once preventDefault has been called it will remain in effect throughout the remainder of the event's propagation. This method may be used during any stage of event flow.

.stopPropagation()

The stopPropagation method is used prevent further propagation of an event during event flow. If this method is called by any EventListener the event will cease propagating through the tree. The event will complete dispatch to all listeners on the current EventTarget before event flow stops. This method may be used during any stage of event flow.

Source: http://goo.gl/VBpEp

During the redevelopment of my site, I was looking for a way to bring in my latest three tweets. I also wanted an excuse to try out the new templating methods provided in jQuery. Here are my results:

<script type="text/x-jquery-tmpl" id="tweettweet">   <li>     {{html text}}     <span class="created_at">${time} via {{html source}}</span>   </li> </script> <script> $(document).ready( function() {  var twitterURL = "http://twitter.com/status/       user_timeline/webvines.json?callback=?"   , tweet = {     text : '',     time : '',     source : ''   }   ;  $.getJSON(twitterURL, function(data){     var tweets = [];     $.each(data, function(i, item) {       if (i > 2) return false;       tweet.text = item.text;       tweet.time = relative_time(item.created_at);       tweet.source = item.source;       tweets[i] = tweet;       $('#tweettweet').tmpl( tweets[i] ).appendTo('#tweets');     });   });  });  </script>

A lot of this functionality was taken and updated from Ralph Whitbecks post Pulling twitter updates with JSON and jQuery. I just updated it to suit my needs.

You might notice the statement if(i > 2) return false; in the json callback. This basically allows me to keep trawling through my tweets until three have been returned. This is required because the twitter feed strips out retweets, so if I request five tweets and three of my latest five are retweets they are stripped out. This means I only display two. By including this statement I return three everytime. Nice.

Also, in the template script itself, you can see the tag {{html text}} being used. This is so that any links generated from the tweet are rendered. If we use the ${text} notation then we will render the literal value including <a href... text.

I've not included the html in this example, but it is pretty straight forward. Just make sure you include an unordered list with id tweets.

The templating plugin I've used is Microsofts.

In our second meetup @madlabuk, we’re going to dive straight into the coding for this meetup. I will be doing a live coding session on some cool jQuery navigation techniques. I will be following this up with a screencast or writing it up in a blog post. Source code will be available either way.

There will also be a talk from DJ Adams(@qmacro) involving a short introduction to JavaScript Object Notation (JSON) and its cousin JSONP, in the context of retrieving JSON data with the jQuery AJAX functions. We’ll have a look at a real browser-based app and how it uses AJAX to pull in JSON-formatted data and manipulates it ready for display.

Mix this in with some general chitter chatter, tea, coffee or something stronger and we should be in for a good night.