Timebot is an automated system that checks to see if someone is onsite by looking for their mobile phone or bluetooth enabled device. Timebot is easy and quick to configure, and saves a users time out to Google Calendar for easy management and sharing.

Take a look now – any feedback is greatly appreciated.

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.

Just recently I had to style an asp datagrid that another developer had created. Now almost all of our default styles for this site use simple image buttons for actions but the datagrid automatically pumps out the Edit, Cancel, and Delete buttons as plain text. Unfortunately Microsoft have given very little control to designers/developers over what is pumped out onto the page, so it’s pretty much a link, or an input button as standard.

I had a brief look for a way around this and found lots of people with similar problems but no perfect way round this problem.

The simplest way I found around the problem is to put an image tag into the text attribute. E.g.:

<asp:EditCommandColumn HeaderText=”Actions” ButtonType=”LinkButton” UpdateText=”<img src=’../images/buttons/small/updatesmall.png’ alt=’Update’ />” CancelText=”<img src=’../images/buttons/small/cancelsmall.png’ alt=’Cancel’ />” EditText=”<img src=’../images/buttons/small/editsmall.png’ alt=’Edit’ />“></asp:EditCommandColumn>

This does work but it doesn’t have any hover effects on mouse over,  nor does it allow you to use css sprites to keep load times down. In this case it also meant that I’d have to create seperate images for every action.

So what I did instead was the following; I added an itemStyleCssClass attribute to the EditCommandColumn with my button style on it, then I put span’s into the text for Edit, Cancel, and Update that have a specific class for each button type:

<asp:EditCommandColumn HeaderText=”Actions” ItemStyle-CssClass=”grey_small_circle” ButtonType=”LinkButton” UpdateText=”<span class=’tick’>Update</span>” CancelText=”<span class=’cancel’>Cancel</span>” EditText=”<span class=’edit’>Edit</span>“></asp:EditCommandColumn>

Then I added the following CSS:

/*Create buttons and add hover effect */

.grey_small_circle a{background:url(/admin/images/buttons/medium/grey_small_circle.png) no-repeat 0 0;display:block;line-height:30px;margin-top:1px;outline:none;width:31px}
.grey_small_circle a:hover,a:hover.grey_small_circle{background-position:0 -30px;color:#00affc;text-decoration:none}

/* Add the image inside */

.grey_small_circle span{background:transparent url(/images/icons/medium/all.png) no-repeat -288px -252px;display:block;height:30px;text-indent:-9000px;width:32px}

.grey_small_circle span.edit{background-position:-242px -201px}
.grey_small_circle span.redcross{background-position:-13px -252px}
.grey_small_circle span.remove{background-position:-427px -357px}

This css adds the grey circle in the background of the buttons (see the screenshot) and makes the hover work using the sliding doors technique.

I then use css sprites for putting an action image onto each button (using the class we assigned to the span), this technique speeds up load times and stops the unstyled pauses when a user hovers over a button. The last lines of the css attach a sheet of sprites  (in this case the excellent PI Diagona icons from pinvoke) and moves them depending on which button needs to be displayed.

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.

Today I ran into a strange bug that saw me and another developer pulling our hair out, and reverting back to older and older code trying to work out when we introduced the bug.

The problem is this: we have a drag and drop desktop page that does an ajax call when a module is moved (it’s based on Jquery and Ajaxpro). It all worked fine a few days ago, and it worked fine on our test server that runs IIS, but in the local development environment (Visual Studio 2008 using its local web server) it runs really slow in Firefox3. Other browsers seem fine – we tested with Chrome, and IE7 with no problems.

After I managed to narrow down that the problem doesn’t occur once we publish the current code to an IIS box I started to do a little Google fu…

The problem was actually simple -  It looks like this is a problem with Firefox’s IPv6 setting. To fix it type About:config into the address bar in Firefox, Agree to the warning message, and then navigate to the net.dns.DisableIPv6 setting. Double click this setting to set it to true, and close the tab. That’s it! The problem should now be fixed.

Credit where credit is due – I found the fix here through my Google fu.

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…

selector {
min-height:500px;
height:auto !important;
height:500px;
}

This takes advantage of two IE6 bugs:

1. IE6 ignores the !important and sets the height using the last line.
2. IE6 treats height like it should treat min-height and lets child objects cause the parent to expand.

I found this helpful solution here.

The basic principle is pretty simple.

• Make the body 100% tall no matter what.
• Give it a negative bottom margin the size of your footer.
• Move you footer up into the space left by the bottom margin

There’s a few other steps to make it work cross-browser (ie6+) but that’s basically it.

I found the solution here.

This is an odd problem. You have a perfectly normal search box with a go button next to it – a classic layout some might say. The problem is that the go button seems to sit about half-way up the side of the search box. Now, having tried to fix css/html problems cross-browser before, I was fully expecting to spend a few hours looking for solutions trying them in FF, IE etc. and then mixing and matching my perfect solution… In this case I was stopped short… Very short in fact. The fix is simple as adding a position:absolute to the button. Problem solved. See here for where I found the fix.