Following on from the previous post, I thought it’d be nice to have the handle move on a mouse wheel. Looking around for mouse wheel integration, it seems that it’s only a short amount of code to update Prototype to use the mouse wheel. Why it’s not in the core code I don’t know, as it seems rather handy. The mouse wheel code is listed at the Prototype Event Extension article over at Ajaxian.
Yesterday I was looking at the Scriptaculous library, in particular the slider bar. I had used it once before with some success, using a graphic for the track and gripper. But that’s was boring! What I wanted was to see the bar fill up with colour when it was slid. Something like this:
I hadn’t seen anything like this around (not saying it hasn’t been done, just that I hadn’t seen it!), so after a bit of playing I found out it was actually very easy to create. And this is how I did it…
Here’s a nice, clean, and simply way to swap an image on a click of a link. You might use this if you have one large image a series of thumbnails, and when you click on the thumbnail you want to swap the large image.
Surely this is easy, right? Just set the height property in your css. Well, yes and no. That’s all well and good if you know what height the elements are going to be, but quite often you might be pulling information out of a database in to the elements and you don’t know how big that information is going to be. You can’t use the overflow because that’s not the designer’s concept. No; they want three boxes on screen that all have the same height so they’re all nice and ordered and symmetrical.