Friday, October 17, 2008

The IE6 :hover workaround

Kids, I've found the best and ultimate workaround solution for the hover problem of IE6. Unfortunately my discovery is a little overdue, because this hackers-heaven product, IE6 gets outdated, so consider this announcement an archaeologist's curiosity. Let's get to the point.

:hover pseudo selectors only work on links in IE6. You have to make it work on non-link elements, too. What you do? Your first thought is IE's magic equipment, Mr. Expression. You'll be trying, but won't succeed. But project deadline is coming, so you go to your template and hardcode onmouseovers and onmouseouts in your tag soup. Oh no, you say. Oh no. You cry. Later on you periodically review your code, and your eyes always stop on these onmouseovers and onmouseouts, and you always cry.

Ok, seriously, expression works. As it is shown here. He takes a random css property and gives the javascript onmouseover assignment as a value to it. There's two problems with it. First, it makes the behaviour totally sluggish because the assigment is interpreted i-don't-know-how-many times in every second. And it continuously creates new functions, and it's beeing garbage collected etc. Second, no need to play with the classnames.

Simply put:
a.dropdown-item {
_m: expression(onmouseover = onmouseover || new Function("$(this).down().style.display = 'block'") : '');
_n: expression(onmouseout = onmouseout || new Function("$(this).down().style.display = 'none'") : '');
}
You see? We check if the assigment has already done and hence it will be blazing fast. That's the big idea.

Essentially that's all that I wanted to share with you, my precious fellows. Two more notes: String assigment to the onmouseover and onmouseout properties won't work. You have to create functions explicitely. Lastly, no need for "this." prefix, however this is the nice way, but remember, in hacks there's no nice way.

UPDATE

Fine, an even more beautiful snippet is here.

4 comments:

  1. Hі there juѕt wаnted to give you
    а quick headѕ uρ anԁ let yοu know a fеω оf thе
    imageѕ aren't loading properly. I'm not suгe why
    but I think itѕ a linking iѕsue. I've tried it in two different web browsers and both show the same outcome.

    Also visit my web blog - utility bucket truck
    Also see my page - used bucket trucks for sale

    ReplyDelete
  2. Quality posts is the sеcгet to attrаct
    the νisіtors to pay a visіt the web ρage, that's what this website is providing.

    my webpage - Muscle stimulators

    ReplyDelete
  3. Hi, I think your site might be hаvіng
    broωseг comρatibility iѕѕueѕ.

    When I look аt уοuг blog sіte in
    Chrome, it loοks fіne but ωhеn opening іn Internеt Eхplorer,
    it has some overlаρρing. ӏ just
    wantеd tο givе you a quicκ heaԁs up!

    Other then that, wondеrful blog!

    Μy ωeblog: tens pain relief
    My page :: tens pain Relief

    ReplyDelete
  4. Does your blog have a contact page? I'm having trouble locating it but, I'd like to send you an e-mail.
    I've got some ideas for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it expand over time.

    Stop by my weblog :: viagra uk

    ReplyDelete