Tag: TODO: Move

Reminders to myself to move these posts to a more specific part of my website.

Posted on
by

It’s kind of redundant to post a "Get Firefox!" banner to someone already using Firefox, but it’s useful to show them an upgrade banner if they’re on an old version.  It’s also useful to show Firefox users a banner for Spread Firefox.

This can be done easily with PHP or other server-side scripting languages, but sometimes you have to use static HTML files.  That’s where client-side scripting becomes necessary.  Last month I posted some sample code that used document.write, which doesn’t work with XHTML.  (On top of that, the <noscript> blocks I used ended up causing validation errors because of their location!)

I’ve redone everything with DOM scripting, which will work with either HTML 4 or XHTML 1.0.

  1. Put the following in a file called sfxlinks.js:
function replaceFirefoxLink(linkID) {
   if(linkNode=document.getElementById(linkID)) {
      var newLink=document.createElement('a');
      var newImg=document.createElement('img');
      var change=0;
      if ( 0 <= navigator.userAgent.indexOf('Firefox/0') ||
         0 <= navigator.userAgent.indexOf('Firefox/1.0') ) {
         change=1;
         newLink.setAttribute('href','YOUR_UPGRADE_LINK');
         newImg.setAttribute('alt','Upgrade to Firefox 1.5!');
         newImg.setAttribute('title','Upgrade to Firefox 1.5!');
         newImg.setAttribute('src','PATH_TO_BANNER');
      } else if (0 <= navigator.userAgent.indexOf('Firefox')) {
         change=1;
         newLink.setAttribute('href','YOUR_REFERRAL_LINK');
         newImg.setAttribute('alt','Spread Firefox!');
         newImg.setAttribute('title','Spread Firefox!');
         newImg.setAttribute('src','PATH_TO_BANNER');
      }
      if(change) {
         newLink.appendChild(newImg);
         var parentNode=linkNode.parentNode;
         parentNode.replaceChild(newLink,linkNode);
      }
   }
}

  1. Use your regular Spread Firefox affiliate link and add a unique ID — let’s use id="FxLink" as an example — to the <a> tag.

  2. Load the script in your document’s <head> section:
      <script type="text/javascript" src="sfxlinks.js">

  3. Call the function in the body onload event using the ID you chose in step 2:
      <body onload="replaceFirefoxLink('FxLink')">

When the  page loads, the script will check the visitor’s browser to see if it’s an old version of Firefox or a current version of Firefox.  If it’s an old version, it’ll replace your standard button with your upgrade button.  If it’s a current version, it’ll replace it with a Spread Firefox button with your referral link.  Otherwise, it leaves the button alone.

This has a lot of advantages over the old version, including XHTML compatibility, no need for <noscript> blocks, easier validation, and it still degrades gracefully (if JS is unavailable or old, it leaves your normal button in place).

You can see it in action on my website, Flash: Those Who Ride the Lightning.

Originally posted on my Spread Firefox blog.