Customize Firefox’s Autoscroll Icon On Your Site

October 14th, 2006 by Jerome Dahdah

Customize the Firefox Autoscroll IconI’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

Original Firefox Autoscroll IconFirefox’s autoscroll icon is 28x28px 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.

5 Responses to “Customize Firefox’s Autoscroll Icon On Your Site”

  1. Fredrik Wärnsberg says:

    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?

  2. Jerry says:

    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.

  3. Cory says:

    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

  4. Jerry says:

    Hey Cory, yeah I saw that was posted two days after this one. The credit still goes to Sitepoint, as they found it first. :)

  5. Alexwesp says:

    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!


By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close