Using jQuery and XML to Populate a Drop-Down Box

Building on the post Reading XML with jQuery, I have modified the success function to parse the XML data and load it into a drop-down box. You can get the demo files from Reading XML with jQuery here. Once you download and unzip the demo files, open the index.html in your favorite editor. Then remove all the HTML between the body tag and also all the jQuery in the success function. I also changed the page title to “Using jQuery and XML to Populate a Drop-Down Box Demo.”

Source Demo Reading XML with jQuery Source

Continue reading “Using jQuery and XML to Populate a Drop-Down Box”

Reading XML with jQuery

Welcome to my first of many articles for Think2Loud! Today I thought I’d start with something simple that will lead into several other topics. So here we go, head first into reading XML with jQuery.

The first step is making sure you have jQuery included on your page.

Second, you should check the XML file you are going to read and make sure it’s free of errors. If you are unfamiliar with XML synatax, check out the W3School’s rules on XML syntax. The file I’m using for this example is just a listing of some Web sites I enjoy.

Finally, you just need to tell jQuery to read the file and print out the contents. Start by adding the document.ready function to the page.



Continue reading “Reading XML with jQuery”

Build an Unsupported Browser Warning with jQuery

Over at CSS-tricks there’s an article about blocking Internet Explorer 6. If the IE 6 Blocker Script is a little too extreme for you, check out what I use on client web sites.

Trying to get someone to upgrade, without being overly aggravating, can be tough. This script accomplishes this by adding a warning box across the top of the site with an option to hide the message. The script uses cookies, so if someone hides the warning it will not come back until they restart their browser. This way, even with an unsupported browser, they can remove the warning and use your site as they wish.

Source Demo (Firefox is also unsupported for the Demo)

Initial Setup

To get started you need to include jQuery and the badBrowser script in the header. The script does the browser detection. This allows for screening of multiple browsers if you like. I just set it up for IE 6 and below.

So whats in the badBrowser.js file?

The first thing you will see is the badBrowser function. This function checks for the browsers that you want to show the warning on. It uses jQuery’s built-in utilities for browser checking. The function returns true if it’s an unsupported browser and returns false if it’s not.

function badBrowser(){
	if($.browser.msie && parseInt($.browser.version) <= 6)
             {return true;}
	return false;

Next we have our functions to Get and Set our cookie. The Set function creates a cookie with the name and value of what you pass it. The Get function returns the value of a cookie based on the name you pass into the function. If there is no cookie with that name, it returns an empty string. I am not going to go into the finer details of these functions, but if you'd like to read more about JavaScript cookies check out:

The Set Function:

function setBadBrowser(c_name,value,expiredays)
	var exdate=new Date();
	document.cookie=c_name+ "=" + escape(value) +
        ((expiredays==null) ? "" : ";expires=" +

The Get Function:

function getBadBrowser(c_name)
if (document.cookie.length>0){
   c_start=document.cookie.indexOf(c_name + "=");
   if (c_start!=-1){
    c_start=c_start + c_name.length+1;
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
return "";

Now with our helper functions all set up we can do some real work. We're going to have an if statement that calls the browser check and also checks to see if our cookie has been set.

if(badBrowser() && getBadBrowser('browserWarning')!='seen' ){


Inside the if statement we are going to pre-pend our warning box to the top of our page and set some CSS for it.

You are using an unsupported browser. Please switch to FireFox, Opera, Safari or Internet Explorer 7. Thanks!   [close]
") .css({ backgroundColor: '#fcfdde', 'width': '100%', 'border-top': 'solid 1px #000', 'border-bottom': 'solid 1px #000', 'text-align': 'center', padding:'5px 0px 5px 0px' }) .prependTo("body");

Just one step left. We need to set up our onClick function for our close button. So with the jQuery click function we tell our button to Set our cookie and then hide the warning box.

	return false;

That pretty much covers the whole setup. Feel free to modify this in any way you see fit.

Source Demo (Firefox is also unsupported for the Demo)

Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.

So you have a nice site or blog with lots of links to other places. Wouldn’t it be nice to use the power built into Google Analytics to track those links, without having to add the necessary JavaScript to every link? Here is a very easy way: Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery.

1. Download jQuery and install Goolge Analytics.

Go to and get the latest version. Then add the script include into the header of your site.

Now go to Google Analytics. Set up an account and follow the directions to get tracking running. Go ahead, do it now, I’ll wait. You should now have some script on your site that looks like:

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "'

var pageTracker = _gat._getTracker("YOUR ACCOUNT NUMBER HERE"); pageTracker._trackPageview();

2. Add the jQuery to start tracking links.

In the head section of your page, you will need to add a few lines of JavaScript. You will need to setup the jQuery .ready function and add the code to that.



Next use a jQuery selector to select all a tags on the page with a rel=”external”. To do this, pass jQuery the a tag element with the attribute selector option.


with this we add a click function to our jQuery object.



With the last part we put in the function call to the Google Analytics code and we pass it the href that our a tag is pointing to.

pageTracker._trackPageview('/outgoing/'+ $(this).attr('href'));

This code makes the call to Google Analytics and passes a page path of “/outgoing/” and the url of where the click was headed. In your Google Analytics under content, you will see pages that start with “/outgoing/”. These are clicks that took people off your site. See below for how it looks in Google Analytics.

Function Override for AS3?

Alright, so here is the problem: I work with several designers with varying abilities who all tinker with Flash. With making the switch to AS3, I am trying to package more stuff into classes for them to reuse. One of the classes I just created is a simple image loader that rotates the images using TweenMax.

Where I work it’s hard to get everyone on the same page, so it is nice to have some classes written that they can pull from. It certainly makes my life easier when they ask for help because everything is broken. Now I have this great class that is sometimes pulled into an FLA on the TimeLine. By default, the gallery  rotates the image after 4 seconds. What if someone wanted to completely change the rotation or fire other events when the first photo tweens in?

To solve this issue, here is what I did: I am not sure that this is the best way, so if you have a better way, please send it to me. Once my class was finished, I decided I needed to expose part of it to the TimeLine. I created a private variable that was of type Function. Then I used “get” and “set” functions to change that variable.

variable setup:

private var _galleryTweenFunction : Function = defaultImageRotation();

then I added the “get” and “set” functions to my class:

public function set galleryTweenFunction ( newFunction:Function){
_galleryTweenFunction = newFunction;

public function get galleryTweenFunction (){
return _galleryTweenFunction;

My class is set to call galleryTweenFunction when it’s time to rotate the images. It passes two MovieClips to the function, one being the photo to fade in and the other the photo to fade out. So now the function can be changed by someone on the TimeLine without having to edit the class.

Changing the function on the TimeLine looks something like this using TweenMax:

var myGallery:gallery = new gallery();
myGallery.galleryTweenFunction = function(fadeIn:MovieClip,fadeOut:MovieClip){,2,{alpha:1});,2,{alpha:0});

I also have a get and set for another function that is used to run events when the first photo begins–it transitions in. The class calls this function when the first photo is loaded and ready for animation. It passes the MovieClip the photo is in. So then someone can also just override this function.

myGallery.showFirstImage = function(FirstImage:MovieCliip){

This worked great for me. I hope it can help you out as well.

A List of Tweening Classes for Flash

There are a lot of great options for tweening in Flash. My current favorite is TweenMax and it’s little brother TweenLite.

Since we are getting ready to finally make the switch to ActionScript 3 at work, it is nice to have a version that is written for both AS3 and AS2. This will hopefully allow for fewer issues as we make the transition to AS3.

  • TweenLite and TweenMax are written by GreenSock. TweenMax is the one that I have been using lately. I also really like the ease of use and the tiny file size of TweenLite. These are ActionScript 2 & 3 ready. (Just make sure you download the right one.)
  • Fuse Kit from is a great setup for tweening. I have used this many times and like working with it. The only issue is that it is ActionScript 2 only.
  • Tweener: I have not yet used this. However, some of my friends have used it and love it. I am hoping to test it out very soon. This one is also good for ActionScript 2 & 3.

If you are not already using one of these, I would highly recommend you check them out. If you have something you like better, please drop me a line so I can check it out.

Adding Twitter to Your Web Site with JavaScript

Today at work we needed to pull our Twitter feed into our site. Not wanting to have to deal with the Twitter feed in back-end code, we decided to try out some already-written JavaScript setups for doing what we needed.

After testing out a few different ones, we finally settled on twitter.js written by Remy Sharp.

Twitter.js seems to have the most flexibility and had the options we were looking for. It also seems to load a lot more consistently than the others (although I think that is more of a network issue at work). Below is a list of all the ones we tried–they were all great. If you are looking to add your Tweets to you web site, below are some great places to start.

  • Twitter.js by Remy Sharp. Features a simple, clean setup that is easy to use and has a lot of options that can be set.
  • Tweet! by seaofclouds. This is a Jquery plugin and seemed to work very well. It didn’t do exactly what we were looking for, but since this is a Jquery plugin, it was hard to pass up.
  • addTweets This is great if you just lwant to add Tweets to you site with no work. You enter your Twitter info and addTweets generates all the code for you. You have up to 10 Tweets on your page with just a copy and a paste.