June 29, 2011 · Javascript Tutorials ·

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).

February 27, 2011 · Javascript Tutorials · PHP Tutorials ·

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.

January 11, 2011 · Javascript Tutorials ·

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.

August 30, 2010 · Javascript Tutorials ·

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.

July 10, 2010 · Javascript Tutorials ·

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.

July 6, 2010 · Javascript Tutorials ·

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.