Customize Firefox’s Autoscroll Icon On Your Site
October 14th, 2006
I’ve discovered a little trick that lets you change the icon that appears when you autoscroll in Firefox. Surprise your website visitors with this gimmick.
Middle-clicking on a page in Firefox activates autoscroll mode. Most of you probably know it so I won’t explain it in depth, just try it out. We’re all accustomed to the regular autoscroll icon so much that it’s nothing special anymore. But with a little CSS trickery, we can grab some attention and perhaps a few grins. ;)
First off, credit where credit is due, I stumbled upon this accidentally while browsing the Sitepoint website. Before I continue there is something I need to point out, and I can’t stress this out enough:
Please remember to use this responsibly.
Changes such as these interfere with Firefox’s user interface, and it’s important that you don’t harm usability. If done carelessly, this can have implications that start with being a mere annoyance to users and can go as far as people not wanting to visit your site anymore. So, if you decide to use this anyway, try to keep your modifications as close to the original icon as possible. Also, this is taking advantage of a known bug in Firefox, so there’s no guarantee it’ll work forever.
Alright then, let’s get on to the magic.
Create a PNG icon
Firefox’s autoscroll icon is 28×28px large. I haven’t tried other sizes, but it’s a good idea to stick with what users are used to. Create a PNG image with your icon, advisably based on the original icon, with transparency and all. If you try autoscrolling here on position: absolute, you will see that I’ve created an icon that looks very similar to the original, it feels like the original and transports the same message of “scrolling” as does the original. And out of pure ego, I’ve included my parasight logo. ;)
CSS Implementation
Now that we’ve got our icon, we need CSS to trick Firefox into using it. Here’s the code for your stylesheet:
html>img {
width: 0!important;
height: 28px!important;
padding-left: 28px!important;
background: url(/url_to_your_image/autoscroll.png);
}
And that’s pretty much it. For those of you interested in the technical explanation for this trick, read on. To everyone else, have fun, and remember to use it responsibly. We don’t want to create another <blink> tag!
So how does this work?
Well, the “html>img” makes use of the child selector. This means it will only influence an <img /> element that is directly beneath the <html> element. Firefox happens to place the autoscroll icon right here, before your document’s <body> even begins. So CSS is controlling the icon, but ignoring the rest of your site. The original autoscroll image is forced to 0px width, making it invisible. Padding the same size as the icon is added, and a background image is applied, perfecting the illusion.
Feedback
Implemented this on your site? Concerns regarding usability? Leave a comment, I’d like to hear from you!
Issues
2006-10-15: Apparently, this only works for Firefox on Windows. Doesn’t work in OSX. Any word on Linux?
2006-10-16: Hah! Just tested myself, and it DOES appear to work in Firefox under OSX.
2006-10-16: Firefox originally has three states for the autoscroll icon: vertical, horizontal, and both. Please keep in mind that this overrides all three of them, so horizontal scrolling will incorrectly display the vertical scroll icon. This has no effect on the function itself, other than user friendliness.
parasight.de
October 16th, 2006 at 10:33 am
I’m interested in what effects this will have on Opera.
Oh, and why set the height to 28px? Wouldnt it be smarter to set the height to 0 and then add som top padding, just like the width?
October 16th, 2006 at 10:55 am
Hi Frederik,
After a few tests I think I can safely say this has no effects on Opera. Tested in Opera 7.52 and Opera 8.02 on Windows XP and Opera 9.02 under both Windows XP and OSX, and it continues to use its own icon.
In regards to setting the height to 0, I don’t quite understand what difference it would make. I would like to consider your suggestion, so perhaps you could elaborate a bit more on that point.
October 17th, 2006 at 1:31 am
I was just reading about this yesterday at http://digg.com Dunno if someone else is claiming an original concept. But here is the link to the article. http://glench.com/projects/test/firefoxbug.html
October 17th, 2006 at 10:20 am
Hey Cory, yeah I saw that was posted two days after this one. The credit still goes to Sitepoint, as they found it first. :)
February 11th, 2007 at 2:23 am
Hello, my name is Alex, i’m a newbie here. I really do like your resource and really interested in things you discuss here, also would like to enter your community, hope it is possible:-) Cya around, best regards, Alex!