A few weeks back I was looking for a nice simple way of adding tooltips to some buttons on a site – sometimes an image alone doesn’t quite convey what the button does in enough detail.

I found the excellent coda popup bubbles on jQuery for designers, this seemed to do everything I wanted it to, but it meant going through all of my html and adding an additional div with the popup content. That’s fine for me, but other developers are never going to remember to do this and we really want a consistent user interface.

A little bit more looking led to Web Designer Wall (#5 in the list). They have a very simple technique that pulls the Title text from an image and creates the popup out of this. All of dev’s are told to add title text to images so this was almost perfect. I say almost perfect because unlike the code bubbles the hover events queue up. This means that if you run you cursor back and forth over the buttons the popups keep firing for a few seconds/minutes after you stop.

So my final stop was to combine the two. I also incorporated any fixes I saw in the comments section of jQuery for Designers.

You can download the script here.

Or see a demo here.

The image file I use for the tooltips can be downloaded here, and is free for anyone to use.

My client was already including jQuery in their pages so it made sense to rewrite the javascript using jQuery. This also has the added benefit of meaning you no longer have to include the script inside the body tag to get it work in IE7.

While we were testing with users I also spotted a problem with some earlier versions of flash not showing the pictures. The simple but strange solution for this was to use two large images, instead of one small and one large. If you’re not worried about users with old versions of flash you can just use a 100px x 100px image instead of two 650px x 650px images.

You can download the script here.

Or see a demo here.

To use this script you need to edit the peel.js file and put the link and image paths in that you want to use, then put the following in the head of your page:

<script src="/pathtojquery/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/pathtopeel/peel.js" type="text/javascript"></script>

That’s it. Just add those lines and the script does the rest. Obvisously change /pathtojquery/ to the path to jQuery for your site, and change /pathtopeel/to point to where you uploaded the peel.js file.

So with that little disclaimer out of the way, here’s my take on the rather excellent YAML CSS framework, and my first foray into using it to layout a site.

First things first; YAML seems to be very well thought out. It claims to be cross browser compliant in almost every browser that’s still in use by more than one man and his dog, and it fixes most of the major problems web developers run into with the older browsers.

Unlike YUI and some of the other Frameworks you’ll need to download the css files etc. and host them yourself. These can all be downloaded from here.

YAML lets you get off to a flying start without any real work creating css reset files etc. After slicing and dicing a design I’ve been working on for a week I managed to get a site up and running cross-browser on the first attempt. This seems to happen very rarely for me. I’ll admit there were a few tweaks here and there to make it perfect, but overall it just worked.

It’s got a few default styles that are well thought out and I’m already finding myself duplicating them in other projects I work on that don’t use YAML. I’ll cover details of some of these styles and a bit more on how to use the framework in later posts.

It seems that there’s two main reasons why people still need good ol’ IE6 running even though they’ve gone all new fangled and got Vista installed:

1. Some old Intranet programs just refuse to work with ie7 or Firefox. Some don’t even try and fail as soon as they see the browser isn’t ie6, others try and fail miserably because of code targeting ie6 specifically.
2. You’re a developer, and as a large number of your users still use IE6 (mainly because of the reason above) you need to test that your website or application works for them.

The good news is that Microsoft is well aware of the need for Vista users to be able to use IE6, and they’ve made some tools available to the publci for free. all it’ll cost you is a bit of time…

First things first – Download.

The solution is a bit of a sideways step around the problem. Instead of running IE6 on Vista, you run a virtual XP machine on Vista, and then put IE6 on that instead.

So the first thing you need to do is download and install the free Virtual PC software form Microsoft:

http://www.microsoft.com/downloads/details.aspx?FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=en

I’m not going to take you through how to install Virtual PC on your mahcine – you’re on your own for that for now (at some point I’ll write this up)…

Rather than you having to manually create your virtual XP machine yourself (which takes some time) the’ve made a bunch of different test environments available to download:

http://www.microsoft.com/downloads/details.aspx?familyid=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en#filelist

All you need to download for this is the IE6 XP image, but feel free to take a look at some of the others, as if you’re a developer they may well come in useful to you – there’s even an image for IE8.

Second things second – The agreements.

Once the file has been downloaded open it and you’ll get the usual Microsoft prompts warning you about

running files – Choose to run the file (It’s from Microsoft, surely we can trust them – can’t we?!?!!).

Then you’ll be given a warning about the expiry date of the VHD file. Microsoft time limit these images to stop people using them as their main OS. Agree to uncompress the file (click yes).

Now you get the normal License Agreement from Microsoft asking you to sell your soul to the Devil and give up all rights to your first-born child. Again agree

to this – Hell can’t be that bad can it?

You’ll be asked where you want to extract the files to. This is entirely up to you – I use the downloads area of Vista to keep all temporary files, and then once a month or so I go through this folder and get rid of all the rubbish and stuff I’m finished with. But, as I said it’s up to you. Once you’ve chosen the location to extract to there will be a long wait while they’re extracted. Get yourself a cup of tea at this point (or any other hot beverage of your choice).

Some magic with the Wizard.

Once it’s extracted (and you’ve finished your tea) fire up Virtual PC and follow through the steps below:

Click Next on the Welcome screen:

Choose the option to Create a virtual machine:

Give your virtual machine a name – in this case I named mine “IE6 Environment”:

Select Windows XP from the operating systems list:

The Wizard will suggest an amount of Ram to use for your Virtual PC. Unless you have a specific need to change this setting just leave it as it is and click Next:

Finally we get to the option to use the ready-made VHD file we downloaded earlier. Choose “An existing virtual hard disk” from the options and click Next:

Browse to the location of the extracted VHD file, select it, and then click next:

You’ll be shown confirmation of the settings you chose – make sure everything looks okay and click Finish:

Fire it up!

Ok, we’re almost there. You should now be looking at the Virtual PC console window with our newly installed Virtual PC showing in it.

Select the Virtual PC and click Start. You should now see Windows XP start to spring into life. It works just like any other Windows XP machine, so it’ll boot up and go through the normal motions for a few seconds/minutes/hours first (depending on the speed of your pc). Let it run through this as normal.

Take a moment to bask in the glory of running Windows XP inside a window on your lovely Vista machine (don’t spend too long on this).

Last couple of steps

We’re really just dotting the I’s and crossing the T’s now. Once XP has booted it’ll ask you once again to agree to a EULA from Microsoft. As you’ve already sold your soul etc. there’s not really much more they can take so just close the window that appears.

Finally we’re into Windows XP and ready to fire up Internet Explorer 6 and get on with our work.

Double click on the IE6 icon on the desktop and wait the few moments for IE6 to boot. That’s it you can now browse to your hearts content in the antiquated and troubled browser that is IE6.

As a side not it seems Microsoft are really trying to

help Web developers with these images and they’ve included a couple of links on the desktop to help you out. If you’re a developer it may be worth taking a look at them, if you’re not and you just want to use IE6 to get on with your work then ignore them.

Problems?

Whenever I set up virtual machines in our network environment I get page cannot be displayed on any internally hosted sites that rely on local DNS entries. We get around this by entering each of the sites into the Virtual PC hosts file. At some point I’ll write instructions on how to do this…

But for now that’s it. Any comments, corrections, or questions are appreciated…