On BuiltByBuffalo‘s Proposal Planner, we use a much-revered slider thingy that we’ve had a lot of compliments on. We recently received an email asking for a little tutorial on how to put this all together. The main brief is actually pretty esoteric, and you probably won’t be working with designers of the calibre of Jason Reynolds, but this should show you how to put such a thing together.

First off, you need 3 elements. I’ve gone for divs because they’re fairly non-descript and semantically pretty viable for use here. I’ve gone for the following structure:

<div id="scale" class="m1" rel="6">
  <div id="full">
    <div id="marker"></div>
  </div>
</div>


The rel on this div refers to the maximum number of positions on the slider. Unless you shamelessly steal all my source images, you might need to change this! The class refers to a CSS class that denotes the width of the guage element (#full), defined thus:

#scale.m1 #full {
  width: 43px;
}


Because the marker element (#marker) is floated right, it will always stay to the right side of the guage div, so there’s no need for any more CSS than this.

Now that we have our layout and have defined our images (I won’t insult you by teaching you how to set a background image. If you really don’t know that, the declarations are in the source!), we need a method of getting between them. In the actual planner, we do a bunch of ajax-y stuff between stages that’s not relevant here, so here’s a simple breakdown. We’ve got 2 links, next and previous. We, therefore, need 2 event methods to handle input.

In our Marker class, the initialize method deals with identifying the container, marker and guage elements so that we don’t need to keep traversing the DOM to get them. It also sets the current state of the marker and gleans the capacity from the rel attribute (even though it shouldn’t really – you can hardcode it if you want!). We then have our next and previous methods, which just check that their respective states are valid (we don’t want the marker trying to go to 0 or 7, so we stop it from happening).

The method do_morph is where all the legwork is done. We construct the class to Fx.Morph to (mootools requires the whole CSS declaration, not just the element) then define some other options for the morph (namely the duration and a method to run when it’s completed). The completed function calculates the background position needed on the marker image so that we display the correct state.

I’m not great at explaining things, but hopefully that’s done a little to make it clearer for the person who asked for this post, and easy to steal for the people who are that way inclined!

Enjoy the demo:

Oh crap, I accidentally deleted the demo. I’ll put it back when I’ve got some time. In the mean-time; check out the real thing

I finally got the strength to give IE6 even less attention than I usually do, off the back of a post from Roger Johansson. Because of this, I also feel confident that it’s acceptable to use techniques available to more advanced browsers. The idea that all websites should look the same in all browsers is unrealistic and inappropriate, so this has opened up a whole new world of CSS that I can now freely use, and I’ve found it really fun. For example, in older browsers, all my category and archive links in my “sidebar” will be white, but new-browser-users will be rewarded with easier differentiation between link colours with the following gem:


#menu > li li:nth-child(2n) a {
color:#656565;
}


And to tidy up the last paragraph margins and get rid of the unattractive superfluous margin, I can now use this and be safe in the knowledge that people who care about this sort of thing will be able to see/appreciate it:


#menu div.content p:last-child {
margin-bottom: 0;
}


I don’t know how some people can dislike CSS. It’s such an awesome way of working.

Enthusiasm fuelling this post brought to you by grape juice and vodka.

Microsoft are constantly wasting my time. I am a Mac fanboy, this is no secret, but I am going to make no mention of Windows users here today.

Are you a web developer/designer? If so, then Microsoft waste your time, probably on a daily basis, too and it’s going to get worse. When I heard about IE8′s impending release, there was the same heart-sinking feeling as when IE7 was first installed on one of my VMs and I realised that not enough had changed. We were promised better standards compliance, and whilst that was delivered, it wasn’t even close to enough. After having installed IE8 beta 2, it’s just disappointing. IE8 devs still clearly can’t add up, as elements that are laid out perfectly in Firefox 3, Safari and Opera are falling all over the place in IE8.

Now, I don’t profess to being able to write my own web browser. If I could, that’s probably what I’d be doing. I don’t develop web browsers for the same reason I don’t fly spaceships or present kids TV – I can’t do those things. So why is it that Microsoft employ this team of people who clearly have little interest in making a web browser that actually works? My guess is that they don’t care about their users (surprised?) or they don’t care about the developers working on their platform (again, surprised?).

For this reason, from today I am not going to be indulging them or their inferior software for my personal projects. I won’t open or test my sites in Microsoft browsers, and subsequently I won’t make any attempt to fix anything for those browsers. Instead, what I will do is give IE users a one-time, tiny notice that I don’t support Microsoft and politely suggest they try an alternative browser. I will also offer a style-less, javascript-less version of everything I do for people whose experience is completely hampered by Microsoft’s inadequacy.

Hopefully, any developer who reads this will adopt the same mentality for their sites and in a perfect world, users will start seeing how little their experience is taken into account by the software giant. It’s all about numbers, baby!

Someone has to start the ball rolling, and why would users when the internet looks fine to them?!

I personally don’t believe that technology and techniques that benefit both the user and the developer should be shunned just because the lion-share of users are still relying on older technology. PNG gives far better quality images, usually at a greatly reduced file size. It seems like a no-brainer. Except for the fact that IE6 doesn’t support transparency in PNGs.

There is an IE6 PNG fix on TwinHelix that I can only get to do half the job, which is really irritating. The technique makes the image render with transparency, but makes it expand to a somtimes arbitrary size with the dreaded red cross in the corner. Another problem with this is that it doesn’t allow you do position the image. I’m currently using a relatively verbose alternative, which essentially involves you emulating an img tag, but allows you to position your element. Hopefully some will find this helpful as I was racking my brains for something like this on my last project.

…