Stephen McIntyre » XHTML http://stephenmcintyre.net Young Scottish Web Designer Fri, 25 Nov 2011 00:10:27 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Untold Entertainment Made in jQuery Part 3 – The Project Slider http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-project-slider/ http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-project-slider/#comments Thu, 10 Jun 2010 15:00:46 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=577

Being a showcase for the Flash work of Untold Entertainment, the image slider is used as the main focus of the home page and displays his latest projects. Continuing from the first two tutorials, I’ll now show you how to create this slider with jQuery.

We’ll be treating the slider as a separate element from our Twitter bar before, so no need to use old code here.

With the abundance of jQuery image gallery plugins and scripts it’s safe to say that jQuery makes this sort of thing in particular run a lot more smoothly than with plain JavaScript. This section will be the easiest part of the series.

Let’s dive in.

First have a look at the slider demo.

The Markup

We’ll start with the HTML tags.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="slider">
  <div id="image">
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>
  </div>
  <div id="content">
    <h3>
      <a href=""></a>
    </h3>
    <p>
 
    </p>
  </div>
</div>

#slider: The container element that wraps everything.

#image: This contains the large image and navigation buttons (#prev and #next). The image is actually a background, but more on that later.

#content: Holds elements for the project title (<h3>) and excerpt (<p>). The <a> inside the title creates a link to the page that the project is on.

Setting Up jQuery and the Projects Array

If you’ve followed the previous tutorials, including jQuery is still as straight-forward as it was before. Again, we’ll be drawing it in from the Google Code repository.

I’ve also added an extra empty tag that we can add our own code into.

1
2
3
4

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
 
</script>

JavaScript should go above the main HTML content (at the start of the <body> if your document has it).

Inside the empty script tag, set up our “projects” array like so.

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
32

  var projects = [{
    image: "http://www.untoldentertainment.com/blog/img/projects/bestEd/hedgeYourBets/thumb.jpg",
    title: "Best Ed – Hedge Your Bets!",
    excerpt: "",
    link: "http://www.untoldentertainment.com/blog/2009/09/17/best-ed-hedge-your-bets/"
  },
  {
    image: "http://www.untoldentertainment.com/blog/img/projects/bestEd/crossingDog/thumb.jpg",
    title: "Best Ed – Crossing Dog",
    excerpt: "",
    link: "http://www.untoldentertainment.com/blog/2009/09/17/best-ed-crossing-dog/"
  },
  {
    image: "http://www.untoldentertainment.com/blog/img/projects/bloat/bloat.jpg",
    title: "Bloat.",
    excerpt: "Our company president created Bloat. in roughly twenty-two hours at TOJam 4, a weekend-long game development expo. Bloat. is a true [...]",
    link: "http://www.untoldentertainment.com/blog/2009/05/05/bloat/"
  },
  {
    image: "http://www.untoldentertainment.com/blog/img/projects/AWTY/eyeInTheSky/EyeInTheSky.jpg",
    title: "Eye in the Sky",
    excerpt: "We created this spot-the-differences game for Sinking Ship Entertainment’s Are We There Yet? World Adventure kids’ travel teevee [...]",
    link: "http://www.untoldentertainment.com/blog/2008/11/28/eye-in-the-sky/"
  },
  {
    image: "http://www.untoldentertainment.com/blog/img/projects/AWTY/trainTrack/trainTrack.jpg",
    title: "Train Track!",
    excerpt: "We were approached by Sinking Ship Entertainment to create an eye-spy game for their kids’ travel teevee show Are We There Yet? World [...]",
    link: "http://www.untoldentertainment.com/blog/2008/11/28/train-track/"
  }];
 
  var project_id = 0;

The script uses JSON notation to create an array of objects, each with the same set of attributes: “image”, “title”, “excerpt” and “link”.

We would print these onto the page using PHP, looping through database rows in a WordPress setup. This won’t be covered as it’s irrelevant how the information gets to the page. This set of example project data will work on its own for now.

The project_id variable holds the array key for our current project data object. This means we can change this number (with the navigation buttons) and call a whole new set of data when we want it to load.

Attaching Clicks to the Navigation Buttons

To allow ourselves to reference our HTML elements, we have to wait for them to load before we call our JavaScript to interact with them. For this we can either place the JavaScript after our HTML, or use jQuery’s nice “document ready” check to do this for us, and still keep our JavaScript at the top.

Here I’ll use the jQuery method. Generally it lets us to load all of our JavaScript first, allowing a smoother page load and cuts out some jerky effects.

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

  $(function()
  {
    $('#prev').click(function()
    {
      project_id--;
      if(project_id < 0)
      {
        project_id = projects.length - 1;
      }
      load_project();
      return false;
    });
 
    $('#next').click(function()
    {
      project_id++;
      if(project_id > projects.length - 1)
      {
        project_id = 0;
      }
      load_project();
      return false;
    });
 
    load_project();
  });

In each case, clicking one of the buttons adds or removes one from project_id. If it is less than zero or greater than our maximum index in projects (five) then it is reset to the other side of the scale.

For example, pressing the previous button when you are looking at the first project (ID of zero), the slider skips to the fifth project in the list. Clicking next from here takes you back to the first element, and so on.

load_project()

This is what is called when the page is loaded and when a navigation button is clicked. It takes the project_id and populates the slider with all information attached to that array key inside projects.

I’ll go through this one a bit at a time.

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

  function load_project()
  {
    var project_data = projects[project_id];
 
    $('#image').css('backgroundImage', '');
 
    $('#content h3 a')
      .attr('href', project_data.link)
      .text(project_data.title);
 
    $('#content p').text(project_data.excerpt);
 
    if(project_data.excerpt != "")
    {
      $('#content p').append(' <a href="' + project_data.link + '">keep reading</a>');
    }
 
    $('<img src="' + project_data.image + '" />')
      .load(function(responseText, textStatus, XMLHttpRequest)
      {
        $('#image').css('backgroundImage', 'url("' + project_data.image + '")');
      });
  }

Line 5: Removes any overridden background image styles on “#image” to display the “loading” spinner.

Lines 7-9: Adds an href to the title allowing it to link to an external page, and fills in the title text. These are both taken from the current item in the list of projects (referenced here as project_data).

Lines 11-16: The first line fills in the <p> tag with the excerpt text. If the excerpt is not an empty string, an extra “keep reading” link is also added to the end of the text linking to the project page. This is the same link used for the title.

Lines 18 and 19: jQuery creates a DOM element of an image, with its source linking to the current project’s image URL. We can then use this to track how long it takes to load, as done here with the built-in .load() method.

When the element has loaded (read: the image has been fully downloaded into your browser), it issues a callback to JavaScript. Anything we put inside of this callback will only be run once the requested image is available to be displayed. The main reason here being to switch out the “loading” spinner.

Line 21: Here we edit the background of the “#image” container again, this time changing it to the image for the current project and overriding the spinner.

Adding Style

If you’re familiar with basic CSS, these will be pretty straight-forward.

However, pay particular attention to the :hover pseudo on the navigation buttons. Since we want the buttons to animate when we hover over them and not on its own or on a timer, it’s useful to do this with CSS here instead of JavaScript.

Again, this part goes right at the top before everything else (in the <head> section if your document has one).

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<style type="text/css">
  *{
    margin:0;
    padding:0;
  }
  #slider
  {
    width:466px;
    margin:auto;
    margin-top:100px;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  }
  #image
  {
    background:#fff url('loader.gif') 0 0 no-repeat;
    height:340px;
  }
  #content
  {
    background:#eee;
    height:100px;
  }
  #image a
  {
    margin-top:280px;
    width:50px;
    height:50px;
    text-align:center;
    background:none url('prev.png') 0 0 no-repeat;
    text-decoration:none;
    color:#222;
  }
  a#prev
  {
    background-image:url('prev.gif');
    float:left;
  }
  a#prev:hover
  {
    background-image:url('prev-hover.gif');
  }
  a#next
  {
    background-image:url('next.gif');
    float:right;
  }
  a#next:hover
  {
    background-image:url('next-hover.gif');
  }
</style>

And that’s it. Here is what your final slider will look like.

Now comes the fun part. Next week I’ll be showing you how to make that roll-out tongue on the menu bar, all without a bit of Flash.

Connect with my blog’s news stream to get notified as soon as it’s up.

]]> http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-project-slider/feed/ 0 Untold Entertainment Made in jQuery Part 2 – Styling the Twitter Bar http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-styling-the-twitter-bar/ http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-styling-the-twitter-bar/#comments Fri, 04 Jun 2010 00:50:17 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=556 Carrying on from the first part of creating a Flash-less home page on Untold Entertainment, we add to the tutorial on animating Twitter text with some more usability and style.

We start off by generating links (to URLs and Twitter pages) inside the text, make a couple of buttons to skip the tweets backwards and forwards, then animate the Twitter bird and speech bubble as a background.

Try out the new styled Twitter bar demo.

The New HTML Structure

To add in our new elements, we’ll have to mess about with the layout of our HTML tags.

The container still holds the text as before, but we add in the bird image and navigation buttons inside a div. The holder is there to keep the buttons beside the text, and the outer wrapper collects all of it including the bird image.

1
2
3
4
5
6
7
8
9
10
11
12

<div id="wrapper">
  <div id="holder">
    <div id="tweet_buttons">
      <a id="prev" href="#">&#9668;</a>
      <a id="next" href="#">&#9658;</a>
    </div>
    <div id="container">
 
    </div>
  </div>
  <img id="bird" src="bird.gif" alt="bird" />
</div>

The HTML entities are the forward and backward pointing arrowheads you see. These can be images, but the entities will do for now to make things simpler.

Adding Links to the Text

To find URLs and Twitter usernames, we have to do a check on each word. Here we’re looking for anything starting with “http://” and “@” respectively.

We change our add_text() method from last time with the following lines of code. This should replace the line beginning with var new_text = ....

The first three sections change text inside add_text(). For the full replacement code, use the new function at the end of the tutorial.

1
2
3
4
5
6
7
8
9
10
11
12

var word = updates[update_key][word_key];
 
if(word.substr(0, 1) == '@')
{
  word = '<a href="http://twitter.com/' + word.substr(1) + '">' + word + '</a>';
}
else if(word.substr(0, 7) == 'http://')
{
  word = '<a href="' + word + '">' + word + '</a>';
}
 
var new_text = $('#container').html() + ' <span class="rot' + rand + '">' + word + '</span>';

This wraps any usernames and URLs inside an anchor <a> tag and turns them into clickable links.

Animating the bird

These few lines go after $('#container').html(new_text);.

1
2
3
4
5
6

$('#bird').attr('src', 'bird_shout.gif');
 
$('#bird').oneTime(chirp_time, 'blabel_' + update_key, function()
{
  $('#bird').attr('src', 'bird.gif');
});

The variable chirp_time should be added to our list of Variables at the top of the JavaScript section. Here I’ve set it to 100 as it works well for the GIF animation. And while you’re there add in a delay that we’ll use later.

1
2
3
4
5

...
var length_min = 4;
var length_max = 6;
var chirp_time = 100;
var delay = 2000;

This is what makes the bird’s mouth move, held open by the time we’ve specified in chirp_time as 100 milliseconds.

Animating the Speech Bubble

Look for the “if” statement of if(word_key < updates..., add this line just inside.

1

$('#bubble').css('background-image', 'url("bubble.gif")');

This sets the background to be the non-animated image of a speech bubble.

In the "else" of this statement, look for the first timer event (the first line inside). In here we add the code to make the background animate as the text transitions into a new tweet. It's similar to the line above, but instead links to an animated image.

1

$('#bubble').css('background-image', 'url("bubble_animated.gif")');

Setting Up the Controls

To add JavaScript "onclick" events to our navigational buttons, we call jQuery on page load. This is to allow the elements to be created before we bind events to them.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

$(function()
{
  $('#prev').click(function()
  {
    $('#container').stopTime();
 
    $('#container').html('');
 
    word_key = 0;
 
    update_key--;
 
    if(update_key < 0)
    {
      update_key = updates.length - 1;
    }
 
    $('#bubble').css('background-image', 'url("bubble_animated.gif")');
 
    $('#container').oneTime(delay, 'label_' + word_key, add_text);
 
    return false;
  });
 
  $('#next').click(function()
  {
    $('#container').stopTime();
 
    $('#container').html('');
 
    word_key = 0;
 
    update_key++;
 
    if(update_key > updates.length - 1)
    {
      update_key = 0;
    }
 
    $('#bubble').css('background-image', 'url("bubble_animated.gif")');
 
    $('#container').oneTime(delay, 'label_' + word_key, add_text);
 
    return false;
  });
});

The code should look very familiar to what's inside add_text(). Simply put, the #previous code skips to the previous tweet and #next goes to the one after, so this changes the increment or decrement of the update_key variable.

Updating the Stylesheet

The new styles for these elements are also as follows.

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

#bubble
{
  width:700px;
  height:60px;
  display:inline-block;
  background:url('bubble.gif') 50% 50% no-repeat;
}
#buttons
{
  float:right;
  margin-top:40px;
}
  #buttons a
  {
    color:#999;
    text-decoration:none;
  }
#bird
{
  vertical-align:top;
}

And that's it for now.

Next we'll make the image slider.

(Here's the new code for add_text())

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

function add_text()
{
  var rand = Math.ceil(Math.random() * 4);
 
  var word = updates[update_key][word_key];
 
  if(word.substr(0, 1) == '@')
  {
    word = '<a href="http://twitter.com/' + word.substr(1) + '">' + word + '</a>';
  }
  else if(word.substr(0, 7) == 'http://')
  {
    word = '<a href="' + word + '">' + word + '</a>';
  }
 
  var new_text = $('#container').html() + ' <span class="rot' + rand + '">' + word + '</span>';
 
  $('#container').html(new_text);
 
  $('#bird').attr('src', 'bird_shout.gif');
 
  $('#bird').oneTime(chirp_time, 'blabel_' + update_key, function()
  {
    $('#bird').attr('src', 'bird.gif');
  });
 
  word_key++;
 
  if (word_key < updates[update_key].length)
  {
    $('#bubble').css('background-image', 'url("bubble.jpg")');
 
    set_timer();
  }
  else
  {
    $('#container').oneTime(wait, 'reset', function()
    {
      $('#container').html('');
 
      word_key = 0;
 
      update_key++;
 
      if(update_key > updates.length - 1)
      {
        update_key = 0;
      }
 
      $('#bubble').css('background-image', 'url("bubble_animated.gif")');
 
      $('#container').oneTime(delay, 'label_' + word_key, add_text);
    });
  }
}
]]> http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-styling-the-twitter-bar/feed/ 0 Untold Entertainment Made in jQuery Part 1 – Animating Twitter Text http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-animating-twitter-text/ http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-animating-twitter-text/#comments Thu, 27 May 2010 23:14:55 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=531

Ryan Creighton’s Flash development site Untold Entertainment has a quirky home page with plenty of animation and things to click on (complete with roll-out tongue) and of course is built in Flash. Thing is, I’m against any kind of Flash interface. It’s great for games, but otherwise it’s unnecessary (which includes videos).

With the whole Adobe v Apple debate that’s going on right now (yes, I said I wouldn’t mention it but it applies here ‘kay), it’s safe to say you’d be better placing your chips on the JavaScript and HTML5 end of the table.

The discouraging part is that his website could be done without Flash as most of the scrolling and animating could be done with straight JavaScript, and jQuery will help see things along smoothly.

Today I’ll show you how to animate the text at the top, feeding in from his Twitter feed, complete with jerky timings, slanted text and collecting feed data.

Check out the Untold Twitter bar demo.

Including jQuery, Timer plugin, and Google AJAX Feed API

We’ll start off by including our libraries and plugins. Here I use jQuery, the jQuery Timers plugin, and the Google AJAX Feed API – all sourced from their Google Code hosts.

Admittedly we won’t be using much jQuery here as the code changed quite a bit as it got added to, but it might come in handy in later tutorials. If you know how to change the scripts into plain JavaScript, by all means change those parts over.

1
2
3
4
5
6

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://stikked.googlecode.com/svn/trunk/static/js/jquery.timers.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOURAPIKEY"></script>
<script type="text/javascript">
 
</script>

More information on the API key can be found in my earlier post on Google AJAX Feeds.

This code goes inside the <body> element, right at the top so it loads first. There’s an extra element in there – this is where we’ll add our own JavaScript.

Settings and Variables

To allow us to fine tune the feel of the page later, we’ll set up a list of variables. This bit of code is the first to go inside the empty <script> tag above.

1
2
3
4
5
6
7
8
9

/* Variables - tweak as you like */
 
var username = 'UntoldEnt';
var feed_url = 'http://twitter.com/statuses/user_timeline/21834006.rss';
var entry_fetches = 10;
var interval = 50;
var wait = 6000;
var length_min = 4;
var length_max = 6;

These should be reasonable to understand, and what isn’t obvious will be covered later as the script develops.

Collecting Feed Data

In this example we want to collect the data from Twitter, or more specifically @untoldent’s account. More information on the use of the google object can be found on the same link as above (the Google Feed one).

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

/* Google Feed API stuff */
 
var updates = [];
 
function Initialize()
{
  var feed = new google.feeds.Feed(feed_url);
  feed.setNumEntries(entry_fetches);
  feed.load(function(result)
  {
    if(!result.error)
    {
      for(var i in result.feed.entries)
      {
        var entry = result.feed.entries[i].title.substr(username.length + 2);
 
        if(entry.substr(0, 1) != '@' && entry.substr(0, 2) != 'RT')
        {
          updates.push(entry.split(' '));
        }
      }
    }
 
    set_timer();
  });
}
 
google.load("feeds", "1");
google.setOnLoadCallback(Initialize);

We start off by collecting the RSS feed from the feed_url and check there are no errors like I did before.

The script then loops through each feed element once it has been loaded in and removes replies and retweets. What’s left is added to our array of updates, split word by word into another array inside of it.

When this is done, set_timer() is called to start the actual stuff that makes it look like Untold’s Twitter bar.

Creating Animated Text

Last bit of JavaScript – the fancy part.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

/* Animated Tweet stuff */
 
function clamp(val, min, max)
{
  return Math.max(min, Math.min(max, val));
}
 
var word_key = 0;
var update_key = 0;
 
function set_timer()
{
  var length = clamp(updates[update_key][word_key].length, length_min, length_max);
 
  var timing = length * interval;
 
  $('#container').oneTime(timing, 'label_' + word_key, add_text);
}
 
function add_text()
{
  var rand = Math.ceil(Math.random() * 4);
 
  var new_text = $('#container').html() + ' <span class="rot' + rand + '">' + updates[update_key][word_key] + '</span>';
 
  $('#container').html(new_text);
 
  word_key++;
 
  if (word_key < updates[update_key].length)
  {
    set_timer();
  }
  else
  {
    $('#container').oneTime(wait, 'reset', function()
    {
      $('#container').html('');
 
      word_key = 0;
 
      update_key++;
 
      if (update_key > updates.length - 1)
      {
        update_key = 0;
      }
 
      set_timer();
    });
  }
}

clamp: In other languages, clamp is usually available inside a Math library, but not this one. So I’ve added this to make the code cleaner later.

word_key and update_key: These are indexes for the updates array and the words inside each element. These increment by one as they are used, and then reset to zero when moving to a new element. They’re kept outside the functions so that they can be called from wherever.

set_timer: First calculates a timing based on the length of the word. To avoid certain words appearing too quickly or slowly, the length_min and length_max are used from earlier to add a constrained limit on either side. It is then multiplied by interval – also set earlier – to work out our timer.

The Timers plugin is then used to add a timer to the container element. This will call add_text() after the set time from our previous word length is up.

add_text: Starts by setting a random number. This sets our rotation later, based on four classes in a stylesheet. Each word is contained within a <span> element to treat each rotation separately.

The .html() method inside jQuery allows us to add HTML markup inside of our container. Here we add our new element (the <span> with a new word) onto the existing DOM.

When the word has been added, the index increases by one to access the next word. A timer is then set to add this word to the queue, which then adds it on the same way as before.

If there are no words left (i.e., the tweet has ended), the script stops for a period defined by wait and some variables are reset to prepare for a new word. This includes word_key, update_key (if needed), and resets the HTML inside the container back to being empty.

Again, the timer is reset to prepare for new words to be added in, once the script has come out of its pause.

Rotation Styles

To keep with the quirky feel of Untold’s header, the text in the tweet bar also tilts word-by-word. As we have already set up our span elements with rotation classes, all that’s left is to style them.

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

<style type="text/css">
#container
{
  font-size:1.4em;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.rot1
{
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  rotation: 1deg;
}
.rot2
{
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  rotation: 2deg;
}
.rot3
{
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  rotation: -1deg;
}
.rot4
{
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  rotation: -2deg;
}
</style>

As you can see, these styles use WebKit and Mozilla transforms so they’re not native to all browsers. The rotation attribute is also only available as part of CSS3, so again not all browsers will be using this.

The latest version of Firefox runs it fine, although I found problems with the latest Chrome and Safari strangley, even though they use WebKit. Basically, if the text doesn’t look slanted your browser doesn’t support rotation :)

And that’s it. I’ll be seeing how far I can go with these scripts into a pure Flash-less home page.

Next I’ll be adding to this Twitter bar a bit more and taking it from there.

I’d like to know what you think of this project. Should JavaScript be used as a preference over Flash for interface design? Are there parts of Ryan’s home page that can’t possibly be made in this way?

Let me know in the comments, or rant at me on Twitter.

]]> http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-animating-twitter-text/feed/ 0 Messing with Background-Attachment http://stephenmcintyre.net/blog/messing-with-background-attachment/ http://stephenmcintyre.net/blog/messing-with-background-attachment/#comments Thu, 13 May 2010 21:17:00 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=489

Earlier this week I came across an interesting Tumblr theme by Jarred Bishop. The site played with the background-attachment CSS property to show a unique background for each Tumblr post on his main page (depending on which post image he used) and stays static as you scroll.

I started to play around with some code to replicate this effect and instead came up with some different examples, while still manipulating background-attachment. Hit the jump for some demos.

Before we start coding, check these out!

Like them?

Moving the scroll bar on each box changes the effect in which the background moves inside it. You either get a simple scroller (nothing special), two garage-door-style shutters, or a really nice smooth-in animation that desaturates our parrot.

It’s all down to changing the background-attachment from “scroll” to “fixed”.

Styling the Containers

Here’s an example. This is from the last box in the set – the one that looks like it changes into black and white as you scroll. First we’ll set up the styles. These do most of the work.

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

<style>
  *
  {
    margin:0;
  }
  .container, .container div
  {
    height:300px;
    width:200px;
  }
  .container
  {
    overflow:auto;
    overflow-x:hidden; 
  }
  .container div
  {
    background-repeat:no-repeat;
    background-image:url('parrot.jpg');
  }
  .container div.grey
  {
    background-image:url('parrot-grey.jpg');
  }
  .container div.fixed
  {
    background-attachment:fixed;
  }
</style>

The first part sets all margins to zero (if you have a <body> tag it’s better to use that instead of the * “all” pseudo). This means we don’t get weird spacing issues with the background being in the top-left corner.

We set each container and the <div>s inside of them to have the same height and width, both matching your images. Means they won’t overlap each other with weird sizes.

The container class code gives the right side a scroll bar and removes it from the bottom (we don’t need the bottom one).

The rest should be okay.

Adding the Containers

There’s a tiny bit of HTML to add in.

1
2
3
4

<div class="container">
  <div class="fixed"></div>
  <div class="grey fixed"></div>
</div>

That’s all it takes, your CSS will do the rest.

We give our outer div the “container” class that we set earlier. The inside elements then can be given a “fixed” class to set its background-attachment.

Make sure to give the second one a “grey” class to change its image if you want to. For this you definitely do, but for the shutter-style examples it depends how you want it to look.

So now if you want to play around with the different effects, all you have to do is add or remove the “fixed” class from the HTML above.

Be sure to check the source of the example page to see how I did it. Just bear in mind that there are some styles in there that are purely to demonstrate them inside the grid.

Things like the “bottom” and “right” classes and the “position” attribute in the container class were only created for the example, but feel free to play with them and see what you get.

Tracing back to the start of this post, I’ll definitely be putting something else up based on Jarred’s theme, this being the first bit of insight into how it all works.

]]> http://stephenmcintyre.net/blog/messing-with-background-attachment/feed/ 0 Load WordPress Gravatars on the Fly http://stephenmcintyre.net/blog/load-gravatars-on-the-fly/ http://stephenmcintyre.net/blog/load-gravatars-on-the-fly/#comments Thu, 06 May 2010 23:22:36 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=475 Globally Recognised Avatar (or Gravatar) is a service from the WordPress team that allows you to improve your web presence across blogs and specialist websites. It’s one of those “why didn’t I think of that?” products that are so simple but yet have so much opportunity to be integrated into virtually everything. You can see examples of this from the comments below and in my sidebar.

The problem with Gravatars that I find a lot of people mentioning is that they don’t get to see their Gravatar before they post a comment – like the comments section on Shamus Young’s Wavatar post.

You may not think that’s too big of a deal, or perhaps from a marketing point of view that’s your way of driving comments (nasty people), but allowing them to play about with their image in the form will improve their relationship with your site and increase traffic anyway. Saves people deleting and re-commenting just because their Gravatar didn’t show up right too.

So this week I’ve put together a little script that generates these little Gravatars as you type. It’s even got little Wavatar faces on them that change when you make a new address, so you’ll never get bored!

Here’s the demo.

So for this, we need some kind of an MD5 encryption algorithm, as the Gravatar API needs this to secure its e-mail addresses.

I’ve used a script from webtoolkit that does the job perfectly.

The script’s over 200 lines long and you can find it here. I’ve included it in the script as an external file for easiness.

Setting Up

1
2
3
4
5

<img id="gravatar" src="" width="80" height="80" alt="Gravatar" />
 
<input id="email" type="text" />
 
<script type="text/javascript" src="webtoolkit-md5.js"></script>

Here we have our image, the input box, and the script tag that includes the MD5 script.

The Gravatar’s src will change when you start typing in the input field. It uses only a few lines of JavaScript.

Working JavaScript’s Magic

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
 
var gravatar = document.getElementById('gravatar');
 
var email = document.getElementById('email');
 
email.onkeyup = function(e){
    var key = MD5(email.value);
    gravatar.src = 'http://www.gravatar.com/avatar/'+key+'?s=80&d=wavatar';
};
 
</script>

Lines 3 and 5 fetch references to our image and input box to control them with the rest of our JavaScript.

Line 7 sets an onkeyup handler on the email field that is fired when a key is released.

Line 8 uses the webtoolkit MD5 algorithm and generates a key. We then pass this key into the Gravatar’s source and it shows our image. If it’s all worked out, this is where you should be seeing your own lovely face :)

The quicker the user can interact with your application the better. This script allows you to generate Gravatar’s on the fly as the user types it, giving them results straight away.

For practice, try adding things like event timers to decrease the number of image changes at a time, or set the event to onblur so that it only ever fires when the focus is taken away from the field (good for comment forms).

And also, with their recent addition of Gravatar profiles that contain even more information, maybe – with a little more JavaScript – the email address will be all you ever need to type.

Happy coding.

]]> http://stephenmcintyre.net/blog/load-gravatars-on-the-fly/feed/ 7 How to Display a User’s Visited Web Pages http://stephenmcintyre.net/blog/display-users-visited-pages/ http://stephenmcintyre.net/blog/display-users-visited-pages/#comments Thu, 01 Apr 2010 17:21:19 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=391 Allowing a developer to access a visitor’s browsing history is a huge security risk, that’s why it’s not possible. If you own a website that runs PHP with MySQL and handles sessions then this could be done by tracking IP addresses, user agents and so on to associate a browsing pattern with a particular person. This however can be pretty inaccurate, plus it’s only limited to your own website.

So what are we going to use? Well when you think about it, a user’s browsing history is stored on their computer, client-side. And what else runs client-side that us web developers can make? JavaScript and CSS. These are what we’re going to use.

Firstly, head on over to the visited demo page to view what you’ll be making.

The Page Links

To start off we’ll set up our list of links:

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

<p>
  <a id="btn-all" href="#">All</a> <a id="btn-visited" href="#">Visited</a> <a id="btn-unvisited" href="#">Unvisited</a>
</p>
 
<div id="links">
 
<a href="http://stephenmcintyre.net/">http://stephenmcintyre.net/<br /></a>
<a href="http://stephenmcintyre.net/blog/fragment-anchor-php/">http://stephenmcintyre.net/blog/fragment-anchor-php/<br /></a>
<a href="http://stephenmcintyre.net/blog/kongregate-badge-feed-php/">http://stephenmcintyre.net/blog/kongregate-badge-feed-php/<br /></a>
<a href="http://stephenmcintyre.net/blog/opening-new-windows-with-standards-ompliance/">http://stephenmcintyre.net/blog/opening-new-windows-with-standards-ompliance/<br /></a>
<a href="http://stephenmcintyre.net/blog/guide-to-google-ajax-feed-api/">http://stephenmcintyre.net/blog/guide-to-google-ajax-feed-api/<br /></a>
<a href="http://stephenmcintyre.net/blog/custom-php-session-class/">http://stephenmcintyre.net/blog/custom-php-session-class/<br /></a>
<a href="http://stephenmcintyre.net/blog/let-your-database-do-it/">http://stephenmcintyre.net/blog/let-your-database-do-it/<br /></a>
<a href="http://stephenmcintyre.net/blog/fetch-content-using-php/">http://stephenmcintyre.net/blog/fetch-content-using-php/<br /></a>
<a href="http://stephenmcintyre.net/blog/addthis-api-social-bookmarks/">http://stephenmcintyre.net/blog/addthis-api-social-bookmarks/<br /></a>
<a href="http://stephenmcintyre.net/blog/jquery-parallax-scrolling/">http://stephenmcintyre.net/blog/jquery-parallax-scrolling/<br /></a>
 
</div>

Here we have a list of article links from this website, and above them are some links to control which of the elements we will be showing.

Note the <br/> inside the <a> tags. These make them display properly when some elements are removed. I was going to use an unordered list, but this looked much nicer.

Controlling the Page with JavaScript

Now, to let those top links control our list, we’ll give them some JavaScript.

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#btn-all').click(function(){
    $('#links').removeClass('visited').removeClass('unvisited');
    return false;
  });
  $('#btn-visited').click(function(){
    $('#links').removeClass('unvisited').addClass('visited');
    return false;
  });
  $('#btn-unvisited').click(function(){
    $('#links').removeClass('visited').addClass('unvisited');
    return false;
  });
});
</script>

The top line fetches jQuery from the Google code repository.

Each nested part of the jQuery code in the next <script> tag sets a “click” event for each top link, and removes or adds CSS classes to show each element properly.

Note that the classes only tell the browser which mode we are currently in and do not check whether the pages have actually been visited. With some clever CSS, we can properly display the links for this purpose.

This JavaScript snippet can go anywhere on the page, since this bit of jQuery will only run once the rest of the content has loaded.

Visited and Unvisited Links in CSS

This is the key in separating out our links. Remember to put this code at the top of your page (in the <head> if it has one).

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

<style type="text/css">
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
#btn-all{
color:#333;
}
#btn-unvisited, #links a{
color:#06f;
}
#btn-visited, #links a:visited{
color:#d5d;
}
#links.unvisited a:visited, #links.visited a{
display:none;
}
#links.visited a:visited, #links.unvisited a{
display:inline;
}
</style>

The useful part here is the :visited pseudo selector, which tells your browser to take any elements linking to a page from your history and display them differently.

Take lines 17-19 for example. Clicking “Unvisited” will set the links div element to have an unvisited class. Thanks to the :visited selector and setting the style to display:none, this means that any links that you have visited will not be shown. This is what we want.

Also, if “Visited” has been clicked, all links will be hidden. The style below these lines then resets all visited links so that only those are shown.

Don’t worry if it seems a bit confusing, just paste the source from the visited demo page into an HTML editor and have a play around with it, see where it takes you.

]]> http://stephenmcintyre.net/blog/display-users-visited-pages/feed/ 8 Create Social Bookmarks with the AddThis API http://stephenmcintyre.net/blog/addthis-api-social-bookmarks/ http://stephenmcintyre.net/blog/addthis-api-social-bookmarks/#comments Mon, 08 Mar 2010 21:05:02 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=361 One service that I had used a while back was AddThis social bookmarks. I really liked its ease of use, support for a huge range of social networks and bookmarking sites, and most importantly it had great tools for analytics.

The social bar itself however left more to be desired. It was an eyesore, appearing after every post on my site, and made me cringe at the fact that it relied on JavaScript to function. Luckily, I found an alternative in the form of their API docs.

You can see this for yourself in the social bar below this post. Check out the links as you hover over the images, they’re constructed exactly as I will show you here.

Finding the Link

The trick here is as simple as tweaking a URL.

http://api.addthis.com/oexchange/0.8/offer?url=URL

This is the most basic option of the API. It sends us to a page in which we can choose where we want to share the link. It’s good if you have a simple “Share This” button, but not if we want different links to specific social networks. Plus, we won’t get that analytics data.

In the above example, just replace URL with your page’s location.

http://api.addthis.com/oexchange/0.8/offer?url=http://stephenmcintyre.net

Now we’ll add a title and user name. For this we add another two URL parameters. Just replace URL, title and user name like before.

http://api.addthis.com/oexchange/0.8/offer?url=http://stephenmcintyre.net&title=Stephen+McIntyre&username=StephenMcIntyre

And lastly, where we want to specify where we are going to take the user we need to add forward/SERVICE/ into our link.

http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=http://stephenmcintyre.net&title=Stephen+McIntyre&username=StephenMcIntyre

The link above will take you straight to Facebook, formatting the data to easily post the page up onto your wall.

A Simple Example

So, for a full implementation of this API we can use a list of hyperlinks like in my social bar, and styled how you like them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Twitter</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Facebook</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/digg/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Digg</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/delicious/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Delicious</a>
  </li>
</ul>

For a full list of service tags to use in the SERVICE section of the URL, check out the service codes page on the AddThis docs. You can copy the short codes from each row, there’s loads to choose from.

More information on the sharing endpoints can also be found on there, which will help if you’re looking to dig further into the API.

One Last Thing

So as you can see, the links can get pretty long. If you’re inputting these manually, even a copy-paste job can be tedious, especially if you plan to go about dotting them all over your website.

The ideal situation then would be to generate these automatically, which can be done through PHP with some urlencode magic.

Also, if you’re using WordPress, then fetching the link and title is easy with get_permalink() and $post->post_title respectively.

I’ll be releasing a tool that utilises the AddThis API very soon, and adding some tutorials on here as to how it’s done, including some clever PHP.

Stay posted. :)

]]> http://stephenmcintyre.net/blog/addthis-api-social-bookmarks/feed/ 10 Beginner’s Guide to Google AJAX Feed API http://stephenmcintyre.net/blog/guide-to-google-ajax-feed-api/ http://stephenmcintyre.net/blog/guide-to-google-ajax-feed-api/#comments Mon, 15 Feb 2010 21:49:06 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=328 For those that don’t know, the Google AJAX Feed API is a JavaScript tool that you can use to handle your AJAX requests, and is particularly useful for reading in feed data from external websites. After searching for all kinds of plug-ins and tools, I landed on Google’s answer, and found exactly what I needed – a JavaScript-only feed parsing script.

This tutorial will provide you with a very basic script to start using this great tool and covers what you need to get started.

First off, check out the Feed API demo that you will be creating.

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

<ul id="container"></ul>
 
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
var undefined;
var items = {};
var container = document.getElementById("container");
function Initialize(){
	var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/41298392.rss");
	feed.setNumEntries(5);
	feed.load(function(result){
		if(!result.error){
			items = result.feed.entries;
		}
	});
}
google.load("feeds", "1");
google.setOnLoadCallback(Initialize);
setInterval(function(){
	if(items[0] != undefined){
		var ipop = items.pop();
		var text = '<li>' + ipop.title + '</li>';
		container.innerHTML += text;
	}
},1000);
</script>

If it seems overwhelming, don’t worry. I’ll go over it bit by bit, it’s really easy to pick up.

Initialize

This is a custom method that takes in some data using the code from the first <script> tag.

The first line inside of this function declaration stores feed data into the feed object. Setting the parameter in the Feed method call will change what RSS data you use.

Line two sets how many items you want it to display, and the final section tells the script what to do once the data has been loaded into the variable. In this case, we want it to check that there are no errors and store our list of entries into the items variable.

load and setOnLoadCallback

The load method tells the Google API that we want to use the Feed functions, so we give it the parameters “feed” and “1″. The “1″ part is only used for collecting version numbers and isn’t too important.

setOnLoadCallback calls our Initialize method from earlier and processes it.

The fancy setInterval stuff

This section is just for eye candy and isn’t actually essential to using the API. It’s used to make the feed items display a second after each other in a list.

To start off we check if the item can be used, by checking if it isn’t undefined. We then remove an item from our list of items with pop and store this into ipop. The title attribute of this is then used as the text for the list item and added to our container list.

Finishing up

There we go, hopefully as simple as I said it would be.

Just remember that before you use this script, you should sign up for an API key and replace YOUR_API_KEY in the script tag with the key you’re given.

What I really like about this script is that it’s all handled (on our end at least) by one HTML document, and Google’s speedy servers handle the rest of it for us.

This is not a service to be abused however, as it has huge possibilities and there are millions of ways that applications could be built using it. With the issue of bandwidth and server load costs affecting a lot of amateur developers with big ideas, this is one less thing to worry about.

Note

The code above may only work if you have a properly formatted HTML document (i.e., all the header, doctype and body stuff). If you do have problems, try copying the code from the demo’s page source.

]]> http://stephenmcintyre.net/blog/guide-to-google-ajax-feed-api/feed/ 13 Using jQuery To Create Parallax Scrolling Backgrounds http://stephenmcintyre.net/blog/jquery-parallax-scrolling/ http://stephenmcintyre.net/blog/jquery-parallax-scrolling/#comments Mon, 08 Feb 2010 22:43:00 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=309 Just a quick demonstration today on using JavaScript and CSS techniques to create scrolling backgrounds. Here we layer backgrounds on top of each other and change their horizontal position to move them past the viewing area. It also uses different multipliers to move the closer objects quicker, and create a parallax effect.

After you’ve checked out the parallax scrolling demo you can head back here to see how it’s written up.

I used jQuery for rapid prototyping, but naturally you can use regular JavaScript if you know the tricks to do so.

The Styles

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

#landscape, #grass, #verge, #window{
width:460px;
height:332px;
background-repeat:repeat-x;
background-position:0px 100%;
}
#landscape{
background-image:url('landscape.jpg');
}
#grass{
background-image:url('grass.png');
}
#verge{
background-image:url('verge.png');
}
#window{
background-image:url('window.png');
}

The first section sets height, width, background position and background repeat of the <div> elements that hold our backgrounds.

The other ID-specific sections set the background image you want to use for each part.

All CSS can be tweaked to suit your own project or how you see fit.

The Structure

1
2
3
4
5
6
7

<div id="landscape">
	<div id="grass">
        <div id="verge">
            <div id="window"></div>
        </div>
    </div>
</div>

All just divs inside divs here. Now, the interesting part.

The Scripts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	var xAdd = 0;
	var scrollInterval = setInterval(function(){
		xAdd++;
		if(xAdd >= 920){
			xAdd = 0;
		}
		$('#landscape').css('background-position',xAdd + 'px 100%');
		$('#grass').css('background-position',(xAdd * 2) + 'px 100%');
		$('#verge').css('background-position',(xAdd * 3) + 'px 100%');
	},10);
});
</script>

First line imports our jQuery file and does the usual running of it in the next script tag.

We then set xAdd = 0 – this will act as a counter to add to each background’s x-position and move the backgrounds horizontally behind the window.

Use the scrollInterval variable and setInterval method to set a function that calls every 10ms here. It’s a type of timer that will increment our xAdd every time it is called (10ms).

The if statement is a sort of garbage collector, resetting our number to 0 if it’s more than or equal to 920 (the maximum width of our images). It won’t break if you remove it, but it stops the number becoming unnecessarily high. Always good to keep these things in mind while you code.

The following three lines with the $ signs at the beginning allow jQuery to select our three div elements with the backgrounds in them. It then uses the .css() method to change their background position and creates the scrolling effect you see, since this is called every time the interval is run. There are also some multipliers on the xAdd variable in each one as mentioned earlier to speed up the closest objects.

So yeah, have fun with it. Just a little idea I had. Perhaps you can make better use of it than a simulation of a train journey daydream.

I dunno, surprise me. Let’s see what can be made of parallax scrolling in web pages. Interested to try this in a page header…

]]> http://stephenmcintyre.net/blog/jquery-parallax-scrolling/feed/ 23 Open Windows in HTML with Standards Compliance http://stephenmcintyre.net/blog/opening-new-windows-with-standards-ompliance/ http://stephenmcintyre.net/blog/opening-new-windows-with-standards-ompliance/#comments Mon, 01 Feb 2010 21:43:17 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=299 When opening new windows from your web page that link to external files, a common practice is to open them in a new window as not to deter the user from your site.

One method to do this in the past was to use target="_blank" that tells the browser to open the link’s href attribute in a new window. This, however, is deprecated in the Strict Doctype of W3C web standards so we should be trying to avoid using it whenever we can, and in this post I’ll show you exactly how it’s done.

Instead of using the target attribute, we can use rel to define the <a> tags in our HTML that we want to open in a new page. Since these are usually external pages, we will use the external keyword.

Raw JavaScript Example

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

Open a <a href="new-window.html" rel="external">New Window</a> with W3C valid syntax
 
<script type="text/javascript">
 
var links = document.getElementsByTagName( 'a' );
 
for( var i = 0 ; i < links.length ; i++ ){
 
	var rels = links[i].rel.split(' ');
 
	for( var j = 0 ; j < rels.length ; j++ ){
 
		if( rels[j] == 'external' ){
 
			links[i].onclick = function(){
 
				window.open( this.href, '' );
 
				return false;
 
			};
		}
	}
}
 
</script>

Line 1: This is where we give the link a rel attribute
Lines 5-13: The script collects all <a> tags and loops through them, splitting up each space separated term and checking if they equal “external”
Lines 15-17: Sets the onclick attribute of the link to allow window.open to run and open a new window when the user clicks, containing the href value.
Line 19: Returns false to override the link’s default function, stopping it from opening a page of its own in the same window.

This can be run on any page that you have set your external links on and acts as a nicer, search-bot and standards friendly alternative.

jQuery Version

If your page is already using jQuery there is an even easier way to implement the code from above.

jQuery Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Open a <a href="new-window.html" rel="external">New Window</a> with W3C valid syntax
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
 
$( 'a[rel~=external]' ).click( function(){
 
	window.open( this.href, '' );
 
	return false;
 
} );
 
</script>

Much simpler.

I won’t go through the code on the jQuery example, but if you use the library, you should understand the selectors and methods I’ve used above.

The clever part is on line 7, where the selector finds all <a> tags with a rel attribute containing the “external” keyword, even within a space-separated list of words.

]]> http://stephenmcintyre.net/blog/opening-new-windows-with-standards-ompliance/feed/ 2