Jan Brašna | HereBeDragons™

IE:hover {také-pro:IE5;}

Jedná se o doplnění článku IE:hover {nyní:jednodu­šeji;}, tentokrát i s podporou IE 5.0 a 5.5!

Kdo nevěří, ať tam běží – aneb pár dnů laborování přineslo své ovoce. A to takové, že jsem po alchymii s evaly a oddělováním separátních funkcí a ovladačů událostí pro eliminaci anonymní definice funkce (kde IE 5.x kolabovalo na složených závorkách) vše vzdal, a nechal to na původním autorovi ;)

Dobře jsem udělal, když někdo umí, tak umí, za pár minut bylo řešení na světě. Jednoduché, chytré, lišácké. To bych na to mohl koukat do zimy, a nepřišel bych na to…

element {
  background-color: expression(
    this.onmouseover = new Function("this.className += ' hover';"),
    this.onmouseout = new Function("this.className = this.className.replace(' hover', '')")
  );
}

Je tady i upravená ukázka.

Hodně zábavy s implementací!

Středa, 20. 7. 2005 6.31 | Trvalý odkaz | Trackback

25 komentářů

  1. [1] Titlak

    Tak som to vyskusal a je to uplne super. Dik za dobre riesenie.

    20. 7. 2005 8.47

  2. [2] tark

    WOW !! Dík ;)

    20. 7. 2005 10.50

  3. [3] HejTi

    Též děkuji za řešení – o něco podobného jsem se pokoušel loni o prázdninách – dělal jsem to pomocí behavior – fungovalo to, akorát MSIE 6 vždycky vyhodilo hlášku, že stránka obsahuje nebezpečný odkaz, takže jsem to vyhodil jako nepoužitelné řešení. Tohle je ale daleko lepšejší:)

    Rád bych si našel čas na implementaci tohoto řešení do pixyho menu: http://pixy.cz/…csshi­ermenu/ ale pokud mě někdo předběhne, nebudu se zlobit:)

    Jinak jsem to zkoušel a fungovalo mi to v MSIE 5+ – čtyřka bohužel ne, ale to už stejně nevadí.

    20. 7. 2005 10.54

  4. [4] TimJ

    Má někdo možnost vyzkoušet náročnost této fičurky na slabším starším stroji? Stejně většinou IE5 bejvá právě na starejch mašinách…

    20. 7. 2005 10.57

  5. [5] halogan

    Nevim proc, ale na IE6 tady to jaksi nefunguje (ukazka). Nevim, zda to neni nejakym zakazem, ale to asi tezko :/

    20. 7. 2005 21.27

  6. [6] Jan Brašna

    [5] Tak zjišťuj. Mně to jde i na nejnižší nastavení zabezpečení.

    20. 7. 2005 22.41

  7. [7] Jan Brašna

    [4] Na P166, asi 64MB RAM, W98SE, IE 5.5 žádný problém.

    21. 7. 2005 15.35

  8. [8] Zdenous

    Tak tohle je parada. Diky.

    21. 7. 2005 22.27

  9. [9] Jan Bláha

    Díky moc, tohle se mi určitě bude hodit!

    22. 7. 2005 8.36

  10. [10] Shaman

    Bezva, takhle už to má smysl, bez té 5.5 to moc byužití nemělo…

    22. 7. 2005 9.20

  11. [11] Fred

    Kdo by to byl řekl new Function, dobrý.

    22. 7. 2005 12.49

  12. [12] Jan Brašna

    [10] Jasně, ale stejně to Honzo musíš mít vše funkční (flyout/dropdown a podobné) i bez tohoto, tudíž aby se dalo víceúrovňovou navigací dostat i z první úrovně…

    [11] Mi povídej… Jsem do toho zíral snad 5 hodin a zkoušel stašný kejkle, pak jsem se musel smát, když jsem viděl tohle ;)

    22. 7. 2005 15.24

  13. [13] Fred

    Taky jsem stím dělal hrozný hara-kiri a pár drobností tam možná být vůbec nemusí. Ten regulár a ta background-color. Ta new Function mě fakt dostala. Místo background-color může být cokoliv, tím pádem pokud někdo není purista na validnost css může to natvrdo narvat do stylu třeba takhle hover:expressi­on(this.onmou­seover=new Function(„this­.className+=' hover';“),this­.onmouseout=new Function(„this­.className=''“)); jiné prohlížeče než IE neví co to je a tak to přeskočí a funguje to taky.

    22. 7. 2005 16.52

  14. [14] Fred

    PArdon chyba, zkopíroval jsem nahoru nefumční polotovar, má to být takhle hover:expressi­on(this.onmou­seover=new Function(„this­.className=‚ho­ver‘;“),this.on­mouseout=new Function(„this­.className='';“));

    22. 7. 2005 16.54

  15. [15] Jan Brašna

    [13][14] Regulár tam být musí, neboť ty třídu nastavuješ a rušíš, kdežto ten kód výše ji přidává a ubírá (nezapomínej na vícenásobné třídy). Ale s tou vlastností máš pravdu, stejně se jedná o stylopis-nestylopis, tam to nevadí.

    PS: Na vložení kódu tady máme nástrojů, zkus je používat ;)

    22. 7. 2005 20.30

  16. [16] Arkady

    ad [3] to je tim ze pri vetsim zabezpeceni IE jsou soubory .htc nutne potvrdit…jednoducha obezlicka, staci nastavit na webserveru spravne zasilani mime type pro soubory htc: text/x-component pak uz by behaviours v htc souborechto mely fachcit bez vyhazovani varovnych hlaseni

    27. 7. 2005 10.28

  17. [17] Jan Brašna

    [16] Na to jsem upozorňoval již v minulé části, je tomu tak od SP2.

    27. 7. 2005 11.19

  18. [18] Jan Brašna

    Super, tak to zatím funguje i v IE7b1 (neboť zde pochopitelně stále chybí podpora většiny selektorů a pseudotříd).

    29. 7. 2005 2.26

  19. [19] peta

    Expression, jak je napsane, je pomale. Pro UL LI verzi jsem pouzil toto:

    .menu li.main   {font-style:expression(
this.onmouseover=new Function("this.className='main hover'"),
this.onmouseout =new Function("this.className='main'")
);}
.menu li.main.hover ul  {display:block;}
.menu li.main.hover
                {font-style:expression()}
.menu li:hover ul       {display:block;}

    Zajimave na tom je, ze mi to funguje svizne, kdyz se to pri hover anuluje.

    13. 11. 2005 19.02

  20. [20] los.

    Super riešenie, ale ako už napísal peta, takýto expression je príliš pomalý, pretože sa vykonáva napríklad aj pri každom pohnutí myšou nad elementom. Pritom by stačilo, keby sa vykonal iba raz.

    Veľké zrýchlenie sa dá dosiahnuť pridaním prvého a posledného riadku v expression nasledovne:

    element {
  background-color: expression(
        isNaN(this.js)?(this.js=1,
        this.onmouseover=new Function("this.className+=' hover';"),
        this.onmouseout=new Function("this.className=this.className.replace(' hover','');")
        ):false);
  );
}

    31. 12. 2005 16.50

  21. [21] peta

    Chyba, viz LOS… Ten script vyzkousim, prave predelavam editor menu… Ale, co jsem si vsiml, tam se pri kazdem pohybu mysi soucasne udela this.classname+= coz v dusledku znamena, ze nejdriv se udela xxx hover… pak xxx hover hover xxx hover hover hover a nakonec se replacuje treba retezec o 10.000 znacich :)

    17. 1. 2006 14.03

  22. [22] Jan Brašna

    Fajn, určitě dejte vědět, pokud někdo dáte dohromady efektivnější a korektnější řešení.

    17. 1. 2006 17.40

  23. [23] peta

    >>jan To od losa je podle mne hotove. Jsem to asi 2 dny po tom vyzkousel a v poho, funguje to skvele. v podstate misto NAN by mohl pouzit Boolean(), ale to neni podstatne. Jenom to pricitani hoveru si nejsem ted uplne jist, co to presne dela, aby fakt nevznikal retezec prvniclass x x x x x

    25. 1. 2006 9.43

  24. [24] Blog nadšeného kodéra » Hover efekt v IE

    […] Pravděpodobným autorem článku je Klaus Hartl, zajímavé mohou být i komentáře pod článkem Honzy Brašny. […]

    9. 5. 2006 8.54

  25. [25] peta

    ted jsem zrovna resil neco podobne, opet. Potreboval jsem nahradit className. Pouzil jsem regularni vyraz podobny tomuto: reg = new RegExp(„(^“+clas­sN+" )|( „+classN+“ )( „+classN+“$)|(^„+c­lassN+“$)„,“g"); o.className.re­place(reg,'');

    k regularnimu vyrazu: chci nahradit vsude, kde se dana classname vyskytuje, ale nechci prepsat treba dalsi classname, treba: classN = aaa class = „aaa aaa bbbaaa aaabbb bbbaaabbb aaa“

    a ja potrebuji odstranit jen svoje aaa, tj.

    • retezec zacina "aaa " a konci mezerou
    • retezec konci mezerou " aaa"
    • retezec je uprostred " aaa "
    • a retezec je cely class „aaa“

    Nijak to nejde zkratit, aspon jsem nad tim jeste nepremyslel.

    … je to komentar k napadu LOSa a prikazu replace. ten totiz pocita s tim, ze pridava class „hover“ na konec retezce a dalsi 3 pripady uplne ignoruje. Vysledkem muze byt nefunkcnost v pripade, ze je class prazdne, treba. Pak se mu to ta, muze zdvojit.

    4. 8. 2007 18.10

RSS komentářů

Vaše postřehy

FinePrint™: Pokud máš chuť plkat mimo téma spotu nebo se tady navážet do ostatních, máš šanci, že komentář půjde do křemíkového pekla. Účelové nebo anonymní příspěvky budu dle rozmaru a bez vysvětlování likvidovat. Podepiš se; pokud se k napsanému nehlásíš, ani to neodesílej. Diskusi mám rád, ne už tak flame a blbce. Mysli na to při psaní.