Chrome $(window).load() probléma
Sziasztok!
A címben is említett megoldással akadt problémám, ugyanis Chrome alatt sajnos nem működik jól. Arra kéne a függvény, hogy lekérjem egy bizonyos elem szélességét miután betöltődött (és megjelent!) a custom font, mert a vele írt szövegnek a szélességétől függ az elem hossza. A $(window).load() ugye akkor hívódik meg amikor minden letöltődött. Firefox és IE összes alatt jól működik a dolog de Chrome alatt nem mindig. Véletlenszerűen vagy jó vagy nem, de általában inkább nem. Tehát ha olyat írok hogy...
$(window).load(function(){
//Lekérem az elem szélességét
});
akkor Chrome alatt általában rossz eredményt ad, mert azelőtt fut le, mielőtt a kívánt elem felvenné a végleges szélességét, pedig elméletileg meg kéne hogy várja.
Próbáltam ezen kívül számtalan egyéb dolgot is, de egyik se volt tökéletes, mert valamelyik böngészőben probléma volt vele. Tehát az a lényeg hogy olyan megoldás kéne ami IE7+, FF3.6+, és Chrome ready is.
A segítséget előre is köszönöm. Hátha van valakinek egy jó ötlete :)
■ A címben is említett megoldással akadt problémám, ugyanis Chrome alatt sajnos nem működik jól. Arra kéne a függvény, hogy lekérjem egy bizonyos elem szélességét miután betöltődött (és megjelent!) a custom font, mert a vele írt szövegnek a szélességétől függ az elem hossza. A $(window).load() ugye akkor hívódik meg amikor minden letöltődött. Firefox és IE összes alatt jól működik a dolog de Chrome alatt nem mindig. Véletlenszerűen vagy jó vagy nem, de általában inkább nem. Tehát ha olyat írok hogy...
$(window).load(function(){
//Lekérem az elem szélességét
});
akkor Chrome alatt általában rossz eredményt ad, mert azelőtt fut le, mielőtt a kívánt elem felvenné a végleges szélességét, pedig elméletileg meg kéne hogy várja.
Próbáltam ezen kívül számtalan egyéb dolgot is, de egyik se volt tökéletes, mert valamelyik böngészőben probléma volt vele. Tehát az a lényeg hogy olyan megoldás kéne ami IE7+, FF3.6+, és Chrome ready is.
A segítséget előre is köszönöm. Hátha van valakinek egy jó ötlete :)
A kód végére, a </body> elé
Sajnos nekem ez nem működik.
Mi történt ekkor? Nem futott
Nem adott semmilyen hibát.
$?
$? Mert sajnos az nem derült ki. Valamint jó lenne tudni, hogy pontosan mit is vársz el, azaz, mi az, hogy jó, és mi az hogy nem jó. Valamint mit jelent az, hogyMiért változik az elem szélessége?
Igen azt elfelejtettem
Konkrétan egy <a> elemről van szó, aminek a betűtípusa egyedi font. A szélessége nem változik, DE meghatározza a benne levő szöveg szélessége. Ez azt jelenti hogy nem adtam neki fix szélességet, tehát ha például a font-family mondjuk Arial akkor az <a> elemnek van egy szélessége miután az oldal betöltődött. De ha más a font család akkor pedig megint más a szélessége, még ugyan olyan betűméret és stílus mellett is. Nyilván.
Tehát az <a> elem szélességét nem változtatom soha, de mielőtt megjelenne a kívánt betűtípussal a szöveg, a böngésző az alapértelmezettel írja ki a szöveget, és ezért az <a> elem szélessége mindaddig nem végleges amíg nem élnek a fontok. És ez itt a probléma.
Jó megoldásnak tartom azt, hogy mihelyt lehetséges dolgozhassak a megfelelő szélesség értékkel. Tehát az például nem jó megoldás hogy indítok egy setTimeout-ot és mondjuk várok 2-3 másodpercet mert addigra "biztosan" betöltődött minden. Ez nem jó megoldás.
Font
windowonloadeseményétől, azaz ezen nem tudsz javítani. Vagy pár dolgot tehetsz. Például a Firefox 3 másodpercet vár a betűtípus betöltésére, és ha az alatt nem kezd el betöltődni / nem töltődik be a betűtípus, akkor valami beépítettel teszi meg. Minden böngésző másképp viselkedik ezen a téren. Amit tehetsz, hogy awindowonloadeseménye után vársz még 3-5 másodpercet, és csak azután futtatod le a kódodat.Egyébként, miért fontos hogy milyen széles? Nem lehet, hogy van valami más megoldás a problémádra, ami független attól, hogy milyen széles a doboz?
Hát igen. De semmiféle
Egyébként van JQuery-hez .resize() plugin. Van beépített .resize() eseménykezelő is, de az csak a window objektummal működik. A plugin lehetőséget ad minden DOM elem kezelésére. Tehát megoldás lehetne az, hogy az elem átméreteződésekor szerzem be a szélességet. Sajnos ez se jó megoldás mert a plugin egyrészt felülírja a window objektum beépített .resize() eseményét a kompatibilitás megőrzése érdekében, amit én pont nem akarok mert nem szuperál olyan jól mint az eredeti (értsd túl lassú). Másrészt pedig az IE néha olyan gyorsan rajkja ki a fontokat, hogy nincs is átméreteződés, mert már eleve jó az elem szélessége. Ez utóbbira megoldás lehet az, hogy DOM betöltődés után lekérem a szélességet, majd átméreteződéskor újra és újraszámolok vele. De ez megint nem jó, mert a szélesség egy másik elem pozicionálásához kell, amit ha adott esetben kétszer pozicionálok akkor az elég ronda lesz(villogás), és ez is a nem elfogadható megoldások táborát gyarapítja nálam, ahogy az is, hogy "hagyjuk a Chrome-ot a fenébe mert azzal a pár százalékával úgyse mérvadó a böngészőpiacon" :)
26%
Akkor én kicsit le vagyok
Loading...
Ezt a megoldást is próbáltam
nekem is
Igen, én már eleve így
...
Udv
Hát igen. Ez lenne a legjobb
Nos kipróbáltam a Google
JavaScript Guru kerestetik! Help please :D
Próbáljuk meg azt, hogy
Próbáljuk
Ha valaki esetleg használta már ezt a WebFont Loader-t, vagy teljes mértékben tisztában van a két módszer működésbeli különbségével annak hálás lennék ha elmagyarázná hogy nekem miért csak a második módszer működik jól. Előre is köszönöm szépen.
Amire a funkciót használni szeretném
Lényegében egy menü-höz kellenének a szélesség értékek. Itt egy kép a vázáról. Tehát egy sima listáról van szó, ami display: inline tulajdonságú (mármint a <li> elemek), tehát úsztatva vannak szépen egymás mellé az egyes lista elemek. A szélességük attól függ hogy milyen hosszú a bennük található szöveg, ezt próbáltam is illusztrálni a második sorban. A kis háromszögek a linkek/menüelemek alatt az éppen aktív elemet jelzik, vagyis azt az oldalt ahol éppen a felhasználó tartózkodik. A desing miatt így szeretném megoldani az aktuális oldal kiemelését, tehát most tegyük félre a csináljam másképp ötleteket, mert én így szeretném megoldani :) Az a kis háromszög, egy külön <div> elem ami fix szélességű és horizontálisan mindig az aktuális oldal linkje alá van pozicionálva középre. Sokat agyaltam de ezt JavaScript nélkül nem igen lehet megoldani ezért is folyamodtam hozzá. Szóval a lényeg az, hogy ami egyedül ismert az a legelső link kezdetének az x koordinátája, tehát az offset().left tulajdonsága (JQuery-ben), de a szélessége ugyan úgy, ahogy a többi link szélessége és x koordinátája sem ismert a speciális font miatt, amitől függnek ezen értékek. Nekem tehát két dologra van szükségem, az aktív link x koordinátájára és a szélességére hogy az oldal jelölő kis háromszöget megfelelően alá tudjam pozícionálni. De ez csakis azután lehetséges miután a fontok betöltődtek és megjelentek.
...
Elvész a lényeg
A fenti alapján valami
Hát ööö... Nem tudom. Hogy
Ez teljesül
És ez működik akkor is ha a
Eleve ott a kód, nincs benne
Tökéletes megoldás!