javascript

February 1st, 2010

Increase your conversion rates through geolocation

One of the most annoying things I find when filling in my address online is selecting the country. I have to search through a massive list and coming from the UK I have no idea if I need to find “United Kingdom”, “Great Britain”, “England” or some other variant. If I struggle occasionally with this (and I’m a web developer) other users must also find it hard.

Continued…

November 23rd, 2009

Telling a user how to enable flash

When setting up some flash files at work I found some code I wrote which returns context sensitive instructions explaining to the user how to enable flash. I thought it was worth sharing.

There are normally 3 cases why the user cannot view a flash plugin:

  • Flash plugin not installed - user must install the Flash plugin
  • Newer version of the flash plugin is needed - user must upgrade their flash plugin
  • Javascript is disabled - user must enable javascript

I use SWFObject to embed flash. SWFObject is a well written piece of javascript which allows you to add flash in a progressivly enhanced way. It does this by replacing the contents of a HTML element that you set. If something goes wrong, for instance the user does not have flash, the original contents of the the selected HTML container are shown.  However this means that if javascript is disabled, the flash will not run.

There are two cases we should code for:

  • If javascript is disabled,  the user should be told to enable javascript
  • Flash is not installed (or the wrong version),  the user need to be told to install the latest flash player

The code

For the HTML we have this:

<div id="flashDiv">
    <img src="/images/videoImage.jpg" alt="Alternative
        image for video" />

       <p id="noscript">To view this video online please
        enable javascript.</p>

        <p id="noflash" class="hideContent">
         To view this video online please
        <a href="http://get.adobe.com/flashplayer/">install
        the Flash player</a>
    </p>
</div>

We have a DIV with an ID of “flashDiv”. If javascript is enabled and flash is installed swfobject will replace the contents of this with the flash file we want to see, in this case it would be a video. Alternatively if the flash has failed, the original contents of this DIV will show instead. This will include a nice picture showing what the user is missing out on along with two instructions to help them enable flash. The instructions are either to enable javascript or to install flash.

We want only one of these to show at any time. On the bottom paragraph, I have added a class called hideContent. This has the following CSS.

.hideContent {
    display:none;
    visibility:hidden;
}

This class hides any element it is added to, currently the bottom paragraph. We also have some javascript which is run:

var noscript = document.getElementById("noscript");
var noflash = document.getElementById("noflash");

if (noscript) noscript.className = "hideContent";
if (noflash) noflash.className = ""

From this you can see that the javascript will remove the hideContent class from our disabled flash paragraph showing it to the user. The javascript will also add the hideContent class to the disabled javascript paragraph hiding it from view.

Therefore the following will happen:

  • If javascript is disabled, the flash instruction will not show but the enable javascript instruction will
  • If javascript is enabled but SWFObject has failed to add the flash to the DIV, either the Flash plug-in is missing or the wrong version. Therefore we let the javascript run and hide the enable javascript message and show the install Flash message instead

Putting all this code together you get:

<div id="flashDiv">
    <img src="/images/splashImage.jpg"
          alt="Alternative flash image" />

    <p id="noscript">To view this video online please
           enable javascript.</p>
    <p id="noflash" class="hideContent">
        To view this video online please
           <a href="http://get.adobe.com/flashplayer/">
           install the Flash player</a>
    </p>
</div>

<script type="text/javascript">
    var flashvars = {}
    var params = {};
    var attributes = {};

    swfobject.embedSWF("/files/player.swf", "flashDiv",
           512, 312, "9.0.0", "files/expressInstall.swf",
          flashvars, params, attributes);

    var noscript = document.getElementById("noscript");
    var noflash = document.getElementById("noflash");

    if (noscript) noscript.className = "hideContent";
    if (noflash) noflash.className = ""
</script>

You may view a live example of this (with some minor additions) on the British Museum website.

Using this technique the user will receieve specific instructions on how to get flash working on their computer rather than some generic message.

This is using basic javascript but can be quite easily altered to use jQuery and to find class names instead of ID’s, let me know if you would like any more enhancments.

Continued…

Head of teddy bear appearing over the footer