Category: jquery

« Previous Entries

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 […]

Triangle Javascript Users Group

My friend Matt Henry and I are going to try to get a Javascript users group started in Durham so we can meet other users (and probably do a bit of jQuery evangelizing). If you’re interested, visit the Triangle Javascript Users Group page, and join us at the Federal in downtown Durham on May 6.

Selectors in jQuery

Just a note to self: Quick Tip - Optimizing DOM Traversal. Avoid bare classname selectors like $(’.foo’) when possible; qualify them with an element type or, ideally, the ID of a parent element: $(’div.foo’) or $(’#bar .foo’).

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 […]

Determine the order of two DOM elements

Inspired by this from PHP, I wanted a utility function to determine whether a given element came before or after another element in the DOM.
 
(function($){
$.order = function($a,$b) {
 
$a = $a.eq(0);
$b = $b.eq(0);
var c = ‘order-test’;
 
$a.addClass(c);
 
[…]

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 […]

« Previous Entries