Using jQuery to nudge links

richardshepherd — Thu, 19 Mar 2009 07:58:20 +0000

jQuery is so blooming useful! There’s an effect you’re seeing all over the web now, where links nudge over to the right when you mouse over them.

So, here’s a simply tutorial to get jQuery link nudges onto your pages in just 5 minutes!

First we need need to include the jQuery library in the section of your page, which we can do with something like this…

And then we need the actual jQuery code that does all the magic. Again, this is in the of your page.

So what does that do?

First of all is the usual jQuery DOM ready command,

$(document).ready(function(){

which ensures we don’t execute any code until all the DOM elements have been loaded. We then tell jQuery to take all elements and add a function to them – in this case, whenever the user hovers over them.

$(document).ready(function(){

When the user hovers over the link, we then run the following piece of code, which is a standard jQuery animate method:

   $(this).animate({ paddingLeft: '5px' }, 200);
   }, function() {
      $(this).animate({ paddingLeft: 0 }, 200);
   });

$(this) is referring the element we have hovered over. This is great, because it means we can use the class ‘nudge’ on multiple elements on one page – in other words we can have whole menu systems with links that nudge.

We animate the link 5px to the right by changing the padding-left css property (in javascript this is referred to as paddingLeft rather than padding-left. 200 is the time in milliseconds. Obviously you can change these values to whatever you like. You could also add in additional CSS properties to animate!

In the following line we then reverse the effect when the user takes the mouse off the link, reducing paddingLeft back to 0.

It really is that simple. This effect looks best when there’s a few links using it because you get this wonderful cascading effect.

If you want to see a great example of a site that uses the jQuery link nudge effect, check out the footer of Chris Coyiers fantastic CSS Tricks site.

Ranger, out.

How to use jQuery with a JSON Flickr feed to display photos

richardshepherd — Mon, 02 Feb 2009 22:43:29 +0000

So today I needed to display photos from our Flickr Group without using php or asp.net. I have a WordPress widget that does this job nicely, but no PHP was allowed.

Thank goodness for jQuery! jQuery has a handy little function which allows us to load JSON data using an HTTP GET request, and then process the contents as an array. And with some natty CSS to square things up as a grid, I have nine random (ish) photos from our Flickr group displaying in a nice 3×3 grid.

See it in action.

The full commented code is at the bottom of this post, but let’s go through it bit by bit.

What is JSON?

Since we’re talking about Flickr, let’s use they’re definition:

“JSON, or JavaScript Object Notation, is a simple machine-readable data-interchange format, which makes constructing API applications in JavaScript easy (though it can be used from other languages too!). “

Which means what exactly? Well, it’s a lot like any other feed or data – like an RSS feed, for example. A typical Flick JSON response might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

({
"title": "Talk On Travel Pool",
"link": "http://www.flickr.com/groups/talkontravel/pool/",
"description": "Travel and vacation photos from around the world, featured on the Talk On Travel blog. Join us in sharing your favourite destinations, your top hot spots, and the places to avoid. ",
"modified": "2009-02-02T11:10:27Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "View from the hotel",
"link": "http://www.flickr.com/photos/33112458@N08/3081564649/in/pool-998875@N22",
"media": {"m":"http://farm4.static.flickr.com/3037/3081564649_4a6569750c_m.jpg"},
"date_taken": "2008-12-04T04:43:03-08:00",
"description": "

\"http://www.flickr.com/people/33112458@N08/\"> Talk On Travel<\/a> has added a photo to the pool:<\/p>

\"http:// www.flickr.com/photos/33112458@N08/3081564649/\" title=\"View from the hotel\"> \"http://farm4.static.flickr.com/3037/3081564649_4a6569750c_m.jpg\" width=\"240\" height=\"180\" alt=\"View from the hotel\" /><\/a><\/p> ",
"published": "2008-12-04T12:43:03Z",
"author": "nobody@flickr.com (Talk On Travel)",
"author_id": "33112458@N08",
"tags": "spain dolphins tenerife canaries lagomera aqualand playadelasamericas junglepark losgigantos loscristines talkontravel"
}
]
})

Which is not altogether too hard to digest. To see the whole feed from Talk On Travel have a look here.

All we need to do is get that feed in a way our javascript can use, and then use it. Enter, stage left, jQuery…

Create our object and fill it with data

So how can jQuery help us out? With the handy $.getJSON(url, [data], [callback]) command.

It’s simpliest method would be something like:

1	$.getJSON("http://www.example.com/yourjsonfeed.json", functionName);

Which would grab the info from a json feed at www.example.com/yourjsonfeed.json and then execute a function called functionName.

Then, you’d have to create a function like so:

1 2	function functionName(data) { }

In which data is automatically populated with the json feed. Nice, eh?

So now we have our data object, we need to know how to grab stuff out of it. Again, this is pretty easy stuff. We use some dot syntax like:

1	data.item.media.m

Which says… in data, go to (the first) item, then go to the media bit and grab the m bit.

Scroll back to the top of this page, and in our example you’ll see that this would be ‘http://farm4.static.flickr.com/3037/3081564649_4a6569750c_m.jpg’.

You can probably work out then what item.title and item.link would give us. Armed with that, you can get any information you need from this feed. All we have to do now is display it!

Getting this feed onto the screen

Does that make sense so far? Hope so. If you get lost, check out the excellent jQuery documentation – the links for which are at the bottom of this post.

Let’s sew it all together in a really simple function that just cycles through all the images in the feed. By default, Flickr returns 20 images.

As I’ve commented the code, you should be able to work it out from here…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// Our very special jQuery JSON fucntion call to Flickr, gets details
// of the most recent 20 images

$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=
998875@N22〈=en-us&format=json&jsoncallback=?", displayImages);

function displayImages(data) {

// Start putting together the HTML string
var htmlString = "";

// Now start cycling through our array of Flickr photo details
$.each(data.items, function(i,item){

// I only want the ickle square thumbnails
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");

// Here's where we piece together the HTML
htmlString += '

+ item.link + '" target="_blank">';
htmlString += ' + item.title + '" src="' + sourceSquare;
htmlString += '" alt="'; htmlString += item.title + '" />';
htmlString += '

';

});

// Pop our HTML in the #images DIV
$('#images').html(htmlString);

// Close down the JSON function call
}

But those aren’t my photos!?

I know, I know. Have a look at that feed address once more…

http://api.flickr.com/services/feeds/groups_pool.gne?id=998875@N22&lang=en-us&format=json&jsoncallback=?

Spot the 998875@N22 bit? Well that’s the Flickr user ID for Talk On Travel, another blog that I look after. You need to put your own ID in that string.

I recommend using http://idgettr.com/ to find out easily!

Over to you

That’s a simple introduction to JSON and Flickr, and I hope it puts you on the right path.

For more details on JSON and jQuery, and with another example of how to get photos from a Flickr JSON feed, check out http://docs.jquery.com/Ajax/jQuery.getJSON.

To read up on the Flickr JSON object, head over to http://www.flickr.com/services/api/response.json.html.

You can see my code in action at http://www.richardshepherd.com/flickr.html. Check out the source code to see what it’s doing.

Obviously, you can do a lot more with this, but it’s just a basic implementation to get you started.

Good luck!