The code below shows how you can redirect users of Internet Explorer to a different page when they enter your site. Two key points (and pros and cons) to bear in mind:

1. This is a JavaScript solution
2. It works irrespective of your page content (meta-refresh is more buggy in this respect)

If you research this problem, you'll find a lot of forum responses saying 'you don't want to do that' (which REALLY annoys me...they wouldn't ask if they didn't want to!) and a lot of suggestions that simply don't work or are too buggy. And of course you'll also get lots of people suggesting the standard meta-refresh technique.

My problem was as follows: When you load this blog via the blog homepage, it runs a perl script to pull the content out of my database and passes a few variables along the way, making the URL look a bit messy. So a year or so ago I decided to but the blog in a 100% iframe and load it from there. This works fine in Firefox and everything works as normal, but in IE, it won't show anything on the page until the iframe is fully loaded - meaning loading times can be up to a minute.


Diagram showing the redirect system for this blog

This is obviously a major issue, so to get round it, I decided it was best to send IE users to the perl script directly, but leave others with the slightly nicer iframe system. Any permalink / individual story will use its proper url and all page titles are migrated back to the source frame, meaning the system is relatively problem-free on non-IE browsers.

So, here's my foolproof* way of redirecting IE users only - just bung this code within your tag and you're in business:

 <script type="text/javascript">
  if(navigator.userAgent.indexOf('MSIE') > -1){
  window.location = "REDIRECT_URL_HERE"}
 </script>
 

*I haven't tested it fully, but everything I've thrown at it works fine.

Oh and one more thing - in the second sentence of this post I used the phrase "bear in mind", which I rarely do. I usually refrain from writing it as I can never work out whether it is "bear" or "bare" - but I finally looked it up...let's hope I remember the answer!

That's An Idea: Bear / Bare in Mind
 

I decided to tinker around with StreetView and make my own client, with a number of tools not available on the official site. I've developed a system that chooses a random location in the south of Edinburgh and allows you to explore it.

Although I made this a few weeks ago, it's taken me a while to write it up. I've testing out a new system for projects where some of the more technical details are hidden until you click to expand. Sorry for the delay, but hope it works!

The following code highlights a few excerpts from the StreetView client above, but certainly isn't comprehensive - for that, just check out the source code. First off, you need to declare your variables: var panoClient; var map; var panorama; var currentYaw = 180; var currentPitch = 0; var timer; var marker; var guyIcon; var mapCentre = "55, -3";   Next up, we need to create a basic StreetView client and panorama to display and parse the data [note the ¶ symbol shows an unintentional line break]: panoClient = new GStreetviewClient(); panoClient.getNearestPanorama(mapCentre, showPanoData);   panorama = new GStreetviewPanorama ¶ (document.getElementById("pano"));   Then the panaroma div needs to be sent a location, yaw, pitch and zoom - in this case, the last three variables are given 'current' values so data can be gathered from the user's selection: panorama.setLocationAndPOV(new GLatLng ¶ (mapCentre), {yaw: currentYaw, pitch: ¶ currentPitch, zoom: currentZoom});   The ability for the client to smoothly rotate the map is gained from only two small functions, one to set the parameter changes and one to set the timer changes. These values can be tinkered with to change the speed and movement of the rotation. function spiralslow() { currentYaw += 0.75; panorama.panTo({yaw:currentYaw, pitch:currentPitch}); }   function spinslow() { clearInterval(timer); timer = window.setInterval (spiralslow, 50); }   In order to stop the rotation at any point, a simple stop function is created that resets the timer to zero: function stop() { clearInterval(timer); }   Finally, you can set up the marker icon to look like the little StreetView man used on the Google Maps site. Other sites may well have missed out the .shadow and .shadowSize lines, but without these the marker will be given an extra shadow - the PNG file for this marker has a shadow in it, so you need to set the default shadow to 0 to end up with it looking right: guyIcon = new GIcon(G_DEFAULT_ICON); guyIcon.image = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man_arrow-0.png"; guyIcon.transparent = "http://maps.google.com/intl/¶ en_us/mapfiles/cb/man-pick.png"; guyIcon.shadow = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man-pick.png"; guyIcon.shadowSize = new GSize(0.0, 0.0); guyIcon.imageMap = [26,13, 30,14, 32,28, 27,28, 28,36,¶ 18,35, 18,27, 16,26, 16,20, 16,14, 19,13, 22,8]; guyIcon.iconSize = new GSize(49, 52); guyIcon.iconAnchor = new GPoint(25, 35); guyIcon.infoWindowAnchor = new GPoint(25, 5);   So that's some of the key functions in this StreetView client - take a look at the source code if you want to find out more. The above code presumes some knowledge about embedding Google Maps, but it's all relatively simple stuff that can be picked up in numerous online tutorials.

- The StreetView Icon doesn't show view direction - Each random view is calculated in JavaScript, within a bounding box - The Panorama function helps find the nearest StreetView - Google Maps Blog: StreetView Panaromas - Google Maps API: Street View Objects - Solving StreetView Issues in IE

 

Showing and hiding table rows onClick can be a really useful feature for a webpage - it allows a small amount of data to be displayed on the page by default whilst the page can instantly be expanded by the user. This process can be repeated allowing each section of a webpage to be expanded with the user's discretion - see my About Page for an example of the system in action.

Sure, this can be a useful feature - but it's nice to jazz it up a bit with some image work. As you can see using the link above, one way is to have image rollovers on the clickable sections. This not only looks good, but alerts the user that the image has a function. So we need two sepearate JavaScript files to power this system - I'll link to them below.

So, firstly we need to link to these JavaScript files in the <head> of our HTML document:

 <SCRIPT LANGUAGE=JavaScript SRC="JSFX_FadingRollovers.js"
  TYPE="text/javascript"></SCRIPT>

 <SCRIPT LANGUAGE=JavaScript SRC="showHide.js"
 TYPE="text/javascript"></SCRIPT>
 

Secondly, we need to set up two CSS classes to style the document:

 <style type="text/css">
  .bodylinks {text-decoration: none; color:#333232;
              font-family:Verdana; font-size:13px;}
  .versiondata {padding: 15px;}
 </style>
 

Now in order to get the clickable sections looking nice, design images to use making sure they have a 1px border around the top and sides of the image. Design a rollover image in the same way, and make your clickable table row dimensions the same as these images (in the example at the bottom, I've used image dimensions of 400x34).

Once the images are saved, you need to set up the rollover behaviour, again putting the code in the <head> of our HTML document - The first term in quotes is an ID for the rollover (in this case, img1 and img2) and the next term in the location and name of the rollover image:

 <SCRIPT LANGUAGE="JavaScript"> 
  FadeInStep=10; FadeOutStep=5;
  JSFX.Rollover("img1", "1_over.jpg");
  JSFX.Rollover("img2", "2_over.jpg");
 </script>
 

We now need to make a background image for the data cells of the table - it only needs to be 1px high and the width of your table (in this case, 400px). Make sure it has a one pixel border at each side (matching your image border) and a light background colour making up the rest of the image. You also need to make a 1px square GIF matching your border colour - this is used to make the bottom border line of your clickable images. In this way, we can guarantee there is always a 1px border around everything, whether it's being shown or hidden. In my example, the background image is called 'version_data.jpg' and the border file is called 'dark_line.gif'.

Now we have everything ready to go, we just need to code the table itself, calling up both out JavaScript classes. Set up a table as normal, making its width match that of your images. The set up the first clickable table row referencing the show/hide script:

 <tr id="trOne" onClick="FuncShowHideOne()">
 

Then set up your table cell, referencing your clickable image and the rollover ID set up earlier, finishing by closing your table row:

 <td background="1.jpg" height="34">
  <a href="#null" onMouseOver="JSFX.fadeIn('img1')"
   onMouseOut="JSFX.fadeOut('img1')">
  <img src="1.jpg" width="400" height="34"
   name="img1" class="imgFader" border="0"/></a>
  </td></tr>
 

Finally, you need to set up the row that can shown and hidden. In this example, the row will start off hidden, but to show it by default just remove the bit of style code:

 <tr id="hideShowOne" style="display:none">
  <td class="bodylinks"
  background="version_data.jpg">
  <img src="dark_line.gif" width="400" height="1"/>
  <div class="versiondata">DATA</div></td></tr>
 

So, that should be it. I admit it looks a bit complicated on here, but once you've mastered the system, it's really simple to replicate and gives great results. I've attached a ZIP file below with all the necessary scripts, files etc so you should be able to edit mine directly if you so wish - just open the index.html file and away you go! And just to finish off, here's the working version that all the code above was for:



All files for ShowHide system (ZIP)

 

I thought it was about time for a new mini-project so I got to work on an easy-to-use quiz applet. The idea was to set a quiz out on one page, but use JavaScript to bring each question in one at-a-time, rolling in and replacing the previous. The JavaScript / Ajax would carry and process the form data, bringing the result back at the end of the questions.

JQuery handled the form data and a separate JS file was used to animated the text movement. What results should be a nice and easy-to-use quiz, but see for yourself by playing along below:



It can't be too hard when it's multiple choice - see if you can be crowned a quiz expert! I'll hopefully adapt this idea a bit when I have time, would be nice to have a results breakdown at the end (and the answers!) so that would be the next step...
 

I was recently checking out an article of new AJAX services as I've not done much work in that area before. The list was interesting but most things offered relatively small increases in functionality for the work I do, not giving me as much incentive to change my ways as I'd hoped.

There were, however, a number of great photographic design ideas at varying levels of completion. Some of the best were still 'in construction' with just teasing demos showing off their potential. One such tool was JCrop, a service that allows images to be cropped in real-time directly on a webpage, with various aesthetically-pleasing functionality. The only problem was that the API was only partially completed and only for the more basic functions.



However, I played around with the service and have come up with a nice demo of my own - who needs APIs, eh? The concept was to hide a hidden message beyond a character string that would animate the message if the string was entered correctly.

Obviously, I'm not vindicating its use for genuinely secure information, but as a fun tool it might just work. So, I hit upon the idea of having my mobile phone number revealed if you enter some information that only my friends / clients are likely to know.

All you have to do is enter my two home-towns and my phone number will be displayed, one digit at a time:



I've customised the use of this service, moving away from any cropping purpose, to just use the animation and highlight functions, set to an image map and link id values, assigned to the correct animation and location.

The background image can be changed very easily as well, meaning each coded message could look different. I'm considering expanding the idea as a service (similar to Photowords), but we'll see if I have time!

JCrop from Deep Liquid
20 Excellent AJAX Effects You Should Know
Q Gallery (beta) - Thumbnail Scroller
 

I've been pretty busy of late and decided it was time for a nice, (relatively) simple and good-looking app. My plan was to make a service using little thumbnail pictures and mouseover effects but i wasn't quite sure where it would end up.

Well, it ended up with PhotoWords and I'm pretty pleased with it :) You type in a phrase (max 25 characters although it's best if you have exactly 25), put your name and the person who it's for and press go!



Then you get the finished message - the photos change as does the cryptic pattern needed to read the message (see the centre square), so it should look fresh every time you use it.

Every time you create a message, the permalink is shown below the PhotoWord, so be sure to send it on and make this our most popular app to date...

PhotoWords - Photo Messaging App
PhotoWords - Create New
 

I've looked at making a nice, Flash-free image switcher before and have had some success but thought I'd adapt it a bit for a new set of pictures.

My previous image switcher efforts used a menu system, but this time I'd like to use 'forward' and 'back buttons, meaning creating an image map for each photo. I've also opted to use an iFrame this time, guaranteeing all the files are in the right place!



I think it works pretty well and is a code-light app, so nice and easy to replicate!
 

A client recently came to me with a project to make a set of offline-only webpages that could be taken around the country on a memory stick, taking a service to people with no internet connection. This wouldn't have been too difficult except that they wanted a form-based service that would run offline without the need to install any software.

In other words, I had to create a form system that was processed without using a cgi-bin / perl scripts. The logical solution was using Javascript to handle the form data.

Below is a basic example of this system, passing one variable across two webpages. In this case, the data is preceeded by a '?' in the URL string. Start by putting the following code in the page you are passing the data to:

 <FORM NAME="form">
  <INPUT TYPE="hidden" NAME="pass" SIZE="35">
 </FORM>

Then, simply add this javascript code where you want the variable printed into the docuement. In this case, I've put the data inside a result tag:

 <SCRIPT LANGUAGE="javascript">
  var locate = window.location
  document.form.pass.value = locate
  var text = document.form.pass.value
  function delineate(str){
  theleft = str.indexOf("?") + 1;
  return(str.substring(theleft));
  }
  document.write("<result>"
  +delineate(text) +"</result>");
 </SCRIPT>

And there you have it. In this simple example, you pass the data after a '?'. Say your data is "56.887" and the page you are passing it to is called "results.html", then link it to "results.html?56.887" to send the data. Of course, this technique can be expanded considerably to send more than one form field, but thought it best to explain it simply!
 

I think a draggable box to resize a map is a really useful feature and is common in GIS software. I've seen this functionality on a couple of online maps before, so thought I'd have a go at implementing it myself.

I've adapted some JavaScript code I found online and designed a couple of button to control the zoom. So this feature doesn't conflict with standard controls, you click the zoom button to enable drag zooming - and click the button again to get back to default control options:



I'll explain in more detail how it's done soon, but for now you'll just have to hazard a guess! :)
 

Due to the christmas break, the blog may well have a week or two off so I thought I'd leave on a Christmassy note! So here's a wee christmas message from Beats! Design:

The following example is quite self-explanatory, just click the labels to get a zoomed in image at full resolution:
 

 

After exploring techniques for showing multiple-layer images on the web, it occurred to me that this technique could be applied to add content to an image by zooming into higher detail areas.

The following example is quite self-explanatory, just click the labels to get a zoomed in image at full resolution:
 

 

Well after discussing the possibilities of multi-layer photographs using JavaScript and HTML, I felt the system could be quite effective with a bit of fine-tuning.

The following an image taken from Nelson's Monument in Edinburgh and 5 layers are included and are toggled using the little key in the top right hand corner. The same applies for the image below, which is of the coastal view from Culross, Fife but this uses a blog key toggle as an alternative. I may use this system in the future as it is nice and simple and doesn't require any plugins, such as Flash (although does require a JavaScript-enabled browser - but they're pretty common!).

The letters in the key refer to: (c) colour image, (s) sepia image, (b) black and white image, (a) artistic image, (i) inverted image.
 

 

 

After many, many hours of fine-tuning, I've created a nice little system for displaying multiple photographic layers withing one image. This is great when you have multiple versions of one image (say a colour and b&w copy) and want to be able to easily flick between layers.
 
This uses a relatively simple piece of JavaScript as well as HTML image maps, but the reason it took so long to perfect was because of problems using this script across different internet browsers. Instead of setting the multiple layers to invisible div tags, they have to have the setting 'display:none'. This allows the layers to be pre-loaded without the HTML displaying a blank space where the image should be. Secondly, a lot of issues were encountered when using multple instances of the same script on one page, but again these issues have been resolved.
 
The first example shows a black & white image and a colour image of Napier University's Craighouse campus:
 

 
The second example shows a different image of the same campus, but this time using four layers with different tints applied in Photoshop. This allows the effects of various photographic filters to be reviewed:
 
 

 
The final example shows a slightly more intuitive use of this code, using a little bit of image design to alter a night time photo by adding 'lighting' to an image. Clicking the lamp will turn on the lights and increase the image brightness:
 

 
At the moment, I'm going to leave this example without script details. It took so long to perfect that I can't face explaining all the code right now, but feel free to view the page source to have a wee look at the process. I'll update this post with detailed instructions in the next few days!
 

As you may have noticed, Google have recently added a terrain map layer to their mapping applications. In order to add this layer to embedded mapping and also to have it as a layer option (like on maps.google.co.uk), a few changes need to be implemented.



To start with, you need to make sure your javascript link has the most recent version set. This is the same string that contains your google map key. Just before 'key=' you should see 'v=' - this needs to be set to 'v=2.x' to allow all new code in version 2 as it progresses, including the addition of a terrain layer:

 <script src="http://maps.google.com/maps?
  file=api&amp;v=2.x&amp;key=YOURKEYHERE" 
  type="text/javascript">
 </script>
 

Next, when you set up your map, include the following lines of code. These set up the new terrain layer, the layer button and add the old 'hydrid' layer as an option of the 'satellite' button:

 map.addMapType(G_PHYSICAL_MAP);
 var hierarchy = new GHierarchicalMapTypeControl();
 hierarchy.addRelationship(G_SATELLITE_MAP, 
 G_HYBRID_MAP, 
 null, true); map.addControl(hierarchy);\n";
 map.setCenter(new GLatLng(LAT, LONG), ZOOMLEVEL,
 G_PHYSICAL_MAP);
 

We've added the terrain layer on our UK Webcam Map - It loads as the default map layer...take a look and see what you think!
 

One of the greatest omissions from the Google Maps API / Documentation is the ability to draw circles onto maps.

Despite talk of a GPolyCircle, so far nothing has appeared. So in the meantime, use the following script example to get a nice circle drawn onto your google map, simply by selecting the location of its center and it's diameter in kilometres. Styles can also be changed, to alter the width and colour of the line.

In the following map, a number of circle examples are shown, varying in colour (green, red, blue), purpose (simple circles and targets) and thickness:



This script is quite simple, but care needs to be taken to set it up correctly. All the code should go in the function load() section of the Google Maps JavaScript on you page (see this page's source for an idea).

 function mapCircle(lat,lng,radius)
   {
    var points = [];
      x = lat;
      y = lng;
      r = radius;
      r2 = radius*(1.74);
       for (var i = 0; i < 600; i++) {
        x1 = x+r*Math.cos(2*Math.PI*i/599);
        y1 = y+r2*Math.sin(2*Math.PI*i/599);
        points.push(new GLatLng(x1,y1));
       }
     return points;
    }
 

This should be followed immediately by the code to create the line of the circle. This code should be repeated for every circle you want to display:

 var diameter = 6; //circle diameter in kms
 var radius = diameter/220; //ignore
 map.addOverlay(new GPolyline(

 //mapCircle(lat, long, ignore,), colour, width, ignore;
 mapCircle(55.9557,-3.1884,radius), "#666699",2.8,0.8));
 

That's pretty much it. However, to make sure the lines draw correctly in IE, be sure to replace your <html> tag with the following:

 <html xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:v="urn:schemas-microsoft-com:vml">
 

 

This is a little JavaScript tutorial exmplaining a simple technique to allow image rollovers with a fade effect. This works by creating two images, the main image (see 'IMAGE' in script) and a rollover image (see 'IMAGE_OVER in script).

The script then fades between these images using a dark colour fader:



You can download the image rollover script here.

Either save this and link to it on your ftp server, or replace SOURCE with
http://www.beatsdesign.co.uk/Scripts/JSFX_FadingRollovers.js

The first code block below should go into the <head> section of your html document. In this instance, we are only applying this to one image, so this needs to be given a NAME (when using multiple images, just make different names for each). Then replace 'IMAGE_OVER' with your rollover image source:

 <script language=JavaScript SRC="SOURCE" type="text/
  javascript">
 </script>
  <script language="JavaScript">
   FadeInStep=10;
   FadeOutStep=5;
   JSFX.Rollover("NAME", "IMAGE_OVER");
  </script>
 

Then, create a table within the <body> section of your html document. The important concept here is that the main image ('IMAGE') must be the background of the table cell it is in - and therefore the cable cell has to be the same size of the image.

The script below shows a table set up with one cell. For multiple images, repeat <tr> (new row) and <td> (new column) tags where necessary.

Make sure the 'NAME' is the same as for the rollover image set up earlier:

 <table cellspacing="0" cellpadding="0" border="0">
  <tr>
   <td background="Images/IMAGE">
    <A HREF="TARGET" target="_bottom"         
     onMouseOver="JSFX.fadeIn('NAME')" 
     onMouseOut="JSFX.fadeOut('NAME')">
    <img name="NAME" class="imgFader"
      src="IMAGE" height="HEIGHT" 
      width="WIDTH" border="0">
    </A>
   </td>
  </tr>
 </table>

That's it! Please remember to replace all the references in the above code ('NAME', 'IMAGE', 'IMAGE_OVER', 'SOURCE') with the relevant data, as described above.