Anyone that’s used Google Analytics to track cross-domain requests has probably run up against the fact that Analytics adds some really ugly GET variables to the end of your URLs when you click on links. Not only are they ugly, but they also can stop things like WP Super Cache from caching your pages. We also found that the query string appended by Google Analytics was causing server errors when appended to the URLs of some of our hosted apps.

There is a little-publicized feature in Analytics, though, that lets you change the query string into a hash string. Therefore, instead of having some long, ugly string that can mess things up (and, to be honest, long, confusing query strings can sometimes scare users); you get a long, ugly hash appended to the URL, instead (which has no effect on the way the page is rendered, and, therefore, doesn’t mess up nearly as many things). (more…)

Today, I discovered an issue that I have probably encountered in the past; but it’s been so long I forgot about it. I had some JavaScript set up to select a radio button based on text input, and then update the text based on the selected radio button (it’s a TinyMCE plugin that inserts a shortcode into the WordPress visual editor). Throughout all of the testing I performed, everything worked just fine. Today, though, someone else was testing the interface and could not get the text or the radio button to update properly.

After a bit of testing and messing around with the interface, I finally discovered that my JavaScript wasn’t recognizing the existence of the radio button on the form. After a bit more testing, I realized that’s because only one radio button existed; and JavaScript doesn’t treat radio buttons as arrays when there’s only one instance. When I had been testing before, I had multiple radio buttons, so everything worked; but now there was only one button, so it fell over. (more…)

The process of adding a new button to the WordPress visual editor is fairly simple; as long as you understand how to develop a new TinyMCE plugin (which is a somewhat involved and laborious process that I will probably cover at another time).

One thing I discovered yesterday, though, is that one line of code makes the difference between the Visual Editor using a custom, static image as the button and the Visual Editor using a span that you can stylize with CSS (to fit better with the native Visual Editor appearance). (more…)

As you probably know by now, Google hosts most of the major JavaScript libraries on its own content distribution/delivery network (CDN) for everyone to use. However, WordPress actually comes bundled with many of the same JavaScript libraries. So, what are you to do when you want to use Google’s copy? Sure, you could simply include the call to the Google JavaScript library of your choice in your theme files, but that would cause the library to load twice in many cases (potentially causing conflicts all over the place).

The way to handle this, quite simply, is to tell WordPress not to use its local copy of the library; but to use Google’s copy instead. To do so, you simply “deregister” the WordPress copy (for these examples, I will be showing how to use Google’s jQuery library), then register (and potentially enqueue) the Google copy. (more…)

All over the Web, you’ll find tutorials explaining how to use the setTimeout() method in JavaScript to set up a timer and using clearTimeout() to cancel that timer. Unfortunately, it’s a little more difficult to find information about pausing and resuming those timers.

You could, of course, cancel the timer and start it all over again; which is probably fine if you’re using timers of short durations. However, if you’ve got a 30 second timer or something, you probably don’t want it to start all over again if someone pauses it at the 29-second mark.

There is a way to pause and resume those timers, though. In order to do so, you need to set a variable to capture the timestamp when the timer begins. Then, when you pause the timer, you need to figure out how much time has passed between the start of the timer and now. Once you resume the timer, you’ll simply pass the amount of time that was left to the new timer. (more…)

If you’re anything like me, you have traditionally used javascript alert boxes to try to identify and diagnose bugs in your javascript code. There are two major issues with this process, though.

1. It’s extremely inconvenient for your users if you’re trying to debug a live application.
2. It can be a real problem if you end up in some sort of long/infinite loop and end up outputting multiple alert boxes.

There is a better way, though, and it basically works in Internet Explorer (version 8), Firefox (with the Firebug extension installed), Chrome, Safari and Opera. This is nothing new, by any strecth of the imagination, but it still seems to be a bit of a well-kept secret for a lot of developers. (more…)

One of the new features coming in HTML5 is placeholder text for form inputs. The concept of placeholder text has been around for quite a while, and is fantastic for usability. Basically, placeholder text is text that appears inside of a form input when the page loads, but disappears when the user places the cursor in that form input.

Because HTML5 is still only partially supported, it’s still necessary to use javascript (you could conceivably use CSS to achieve most of the functions of placeholder, but most of the browsers that don’t support the HTML5 placeholder attribute also don’t support the necessary CSS to achieve this anyway). Within this article, I’m going to show you a few different options to add support for placeholder in all browsers. (more…)

Google Analytics has included the ability to track AJAX requests for quite a while, but I don’t know how much awareness there is of this particular feature. Personally, I just discovered it the other day. I was looking at my Analytics data for a particular page on which I heavily use AJAX to replace all of the body content based on form selections. At that point, it occurred to me that, while I was getting good information about the numbers and types of people visiting the page, I wasn’t getting any segmented data based on the information they were requesting. (more…)

I’m sure most jQuery users are familiar with the various methods used to attach event handlers (such as “onclick”, “onchange”, etc.) to elements that already exist on the page, but many probably aren’t aware that you can have jQuery automatically add those event handlers to any future elements, too. (more…)

Although jQuery can be extremely simple to use once you get the hang of it, there are so many functions and methods that it can be overwhelming and confusing at times.

One issue I had over the last week or so was figuring out how to simply traverse the DOM tree. Using jQuery selectors, it’s a breeze to do so; but what do you do when you’re working on a specific jQuery object and you want to go up or down the DOM tree? (more…)