HTML & CSS
Article

Customizing the Autoscrolling Icon

By Alex Walker

Here’s one from the ‘you could, though you probably wouldn’t, but it’s nice to know you can department.

Tom was playing around with FireFox yesterday and came to the realization that the auto-scroll icon is actually inserted dynamically into the document’s HTML, but outside the HEAD and BODY — meaning it’s still within the clutches of our evil CSS.

Mwha Ha Ha HA!!

Try clicking your middle mouse button anywhere onscreen in FireFox 1+ to see the results.

Here’s the CSS:

html>img
{
width: 0!important;
height: 28px!important;
padding-left: 28px!important;
background: url(/images/icons/autoscroll2.png);
}

In reality this is a known bug, so can’t really be relied on into the future (though it’s been around for a long time), but if your client is looking for that little bit of extra branding…

  • tonyskyday

    Doesn’t work for me. Firefox 1.0 WinXP.

  • Hixie’s Natural Log has a variation on it here.

  • Might need a hard refresh to clear the cached CSS, tonyskyday. It doesn’t work in all older versions but should in yours. Try Hixie’s where you’re unlikely to have cached CSS.

  • now how dope is this. What A Nice little touch. Good work diggin this up. Not like it’s critical or anything but it is the little things in life that count!

    Sum

  • nice :D works in thunderbird 1.0, too.

  • Dangermouse

    Pretty cool :D

  • pete

    cool! Was being disabled by customizing the “autoscroll” feature with the “All-In-One Gestures” extension, but resetting that to “native Autoscroll” lets this hack work fine :)

  • Well, it is certainly different though I don’t know how well it fairs with usability and accessibility; some might think its spyware or something.

  • j0n

    What an interesting bug. :)

  • Haha this is great :) Nice find!

  • Cool, works in Firefox, but with it, auto-scrolling doesn’t work at all in IE.

  • jgandu, i tested it in IE and it works fine…this CSS only hack shouldn’t really affect IE’s ability at all.

  • Actually, the only thing I did was open this page in both Firefox and IE. In IE it scrolls but it doesn’t auto-scroll for some reason. Could be because of something else on the page. I do get a Javscript error on both browsers.

  • cool but useless (for the next couple of years anyway).

  • grafixgirl

    Lovely – but it doesn’t seem to work in IE .

  • Deffinatly from the ‘you could, though you probably wouldn’t, but’s it’s nice to know you can’ department… My fav. place to hang out!

  • Ryan Wray

    Thanks for sharing that. I was wondering how sitepoint was using a custom auto-scroll icon (and was too lazy to investigate) and know I no. It can be good if used properly, like here. However, the website pointed out earlier (http://ln.hixie.ch/) is an example of inproper use.

    Thanks,

  • Yes, this is an interesting find. Almost as cool as the favicon.

  • Chalk this one up next to javascript mouse follows…

  • Alan{H}

    Thanks, that is too cool for words. It’s like an annoying Javascript that makes you go “wow i want that” but it’s not annoying!

  • pbkill

    Does not work in IE 7 either.

  • dosnt work in firefox 2.0 either

  • Yes, it appears this bug has been finally closed off in Firefox 2.0.

    Ah, it had to happen someday.

  • Hang on, it LIVES!!

    It’s still working in FF 2.0.0.1 here to two different systems.

  • arn

    it didn’t work.– firefox 6, windows vista. :(

  • It’s still working fine in Firefox 2.0.0.6 but we make no guarantees about Firefox 6. ;)

  • I

    Yea, that ROCKS!!

  • Axpen

    Firefox 3 has removed it, in windows at least.

  • Axeia

    Fixed in Firefox 3 for linux as well, shame really :(

Recommended
Sponsors
Get the latest in Front-end, once a week, for free.