Category: howto

Track user clicks on certain links

We recently added a new feature to dailystrength.org, and there was much debate about whether users would use it as we intended. To find out, I wrote a clicktrack ditty that sends some data to the server when a link is clicked. It was somewhat inspired by a post I wrote a while ago about […]

Fix for slow-loading Google ads

Google’s AdSense ads, and lots of others, are added to pages using Javascript, and if that Javascript appears early in the page’s HTML, it can seriously slow down the rendering of the rest of the page. That’s because browsers generally refuse to do any further rendering of the page until they have a requested Javascript […]

Fix uneven line lengths in headlines

I used to work in newspapers, and we were diligent about fixing “bad breaks” in headlines. Nothing looks worse than a headline that’s far longer on one line than on another. Desktop publishing software has some intelligence about these bad breaks, but the web, not so much. A little jQuery can clean up the bad […]

Cycle through list elements with jQuery

I’ve written several versions of this functionality, and each time I revisit it, it gets simpler and I feel silly for how complicated I made it before. The thing to remember when you’re working with jQuery is to always leverage the DOM. Christian Montoya has a good writeup about how he came to the same […]

Track outbound clicks with Google Analytics and jQuery

Sometimes, you may want to know what outbound links a user is clicking on — say, if you’re linking to an affiliate’s site and want to be able to count the clicks you’re sending. Google Analytics offers this bit of code to accomplish this:
 
<a href="http://www.example.com"
onClick="javascript: pageTracker._trackPageview(’/outgoing/example.com’);">
 
and says:
Google Analytics provides an easy way to track clicks […]

Unobtrusive, cross-browser method to add icons to links

There are lots of examples of using CSS to add filetype icons to links, but they all rely on advanced CSS selectors, which Internet Explorer 6 doesn’t support.
If you’re looking for a cross-browser method of adding filetype icons to links, you have a couple of choices: you can add a class name to all […]

Update page using JSON data

updateWithJSON is a jQuery plugin that updates elements on your page based on key/value pairs in a JSON object. Usage:
$.updateWithJSON(jsonData)
Here’s a demo, and here’s how it works:

iterate over each property/value combination in the JSON object
look for an element in the DOM that matches the property name

first, look for an element with a matching id attribute
if […]

jqModal example for site exit surveys

A couple of months ago, a client wanted us to add a survey to one of their microsites to gauge user response. The idea was that if the user clicked a link to a page outside the microsite, then they’d see an in-browser popup window asking them to take a survey. Clicking yes would take […]