Archive for JQuery

Opening a browser in a new window

// February 5th, 2010 // No Comments » // Development, Javascript, JQuery, XHTML

For a long time target=”blank” has been redundant for accessibility problems. However, there are situations when opening a new window is neccessary. One technique I used is attaching a class of “external” to each link, and then usung javascript descibed in my get elements by class name example, attach a “window.open(this.href)” to each one. I now use JQuery, so that code has been superceded with just 2 lines of JQuery code.

Link Relationships

Links are used to locate web resources, so good use of the rel attribute enhance the logic and semantic meaning of these resources. Using the rel attribute for things such as pagination i.e. “next” and “prev” are standard link types, so where does “external” fit into this?

You can define additional link types not described in the specification. If you do you should use a profile to cite the conventions used to define the link types. You do this in the meta data profile attribute of the HEAD element:

1
<head profile="http://www.yoursite.com/profiles/core">

You can either use XML for this, or XHTML. A good XHTML example can be found at gmpg.org and at w2.org. As for an XML example, I can’t find one.

Styles and Accessibility

From an accessibility point, you should differentiate external links by some sort of style or description such as (opens new window). So, in order to do that you might want to add a class of external anyway.

JQuery

The actual code in JQuery is very concise. For each a tag with a rel of external, a new window will be opened:

1
2
3
4
5
$('a[rel="external"]').click(function()
{
	window.open(this.href);
	return false;
});

Google Event Tracking

// November 6th, 2009 // No Comments » // Development, Google Analytics, Javascript, JQuery

I was asked recently if there was any way to track click events on an accordion we have implemented on a site. When first asked I didn’t think this was possible without an awful lot of javascript. However, a colleague mentioned Google event tracking is already available in Google if you have the standard setup. You can attach various events on various elements. The example on the google site is attaching the event to a play button.

Event tracking is so simple to impliment. You don’t even have to set anything up within anaylitics, you simply add the tracking event, and when events happen, this will be recorded. The format for the event is:


_trackEvent(category, action, optional_label, optional_value)

To impliment it using JQuery, I simply added a click event to the element like this:

1
2
3
4
5
6
7
$('#accordion h3 a').click(function()
{
	//get the section title
	var section_title = $(this).text();
	//call pageTracker and track the event
	pageTracker._trackEvent("recipes", "click", section_title);
});

Simple!