| Autor | Zpráva | ||
|---|---|---|---|
| joe Profil |
#1 · Zasláno: 2. 3. 2011, 02:56:32 · Upravil/a: joe
Zdravím,
po dlouhém pátrání jsem došel k závěru, že v prohlížečích na Webkitu dostávám špatnou hodnotu - navíc jen někdy - někdy se to střídá, ale jen v případě, že CSS mám definované v externím souboru. Já bych je tam ale chtěl mít a nechtěl bych je dávat i do hlavního souboru, neví někdo co s tím? Ve všech ostatních prohlížečích mi to funguje správně - tak, jak bych očekával. Navíc třeba v Chrome po stisknutí Ctrl+Shift+J a zaměření na element, ze kterého zjišťuji šířku, mi ji označí správně (a ve vlastnostech HTMLElementu ji taky mám správně), v kódu mi to ale vrátí něco jiného = vrátí mi to totiž hodnotu šířky viewportu. Jakmile ale dám CSS do stejného souboru, vše funguje. Problém: Vypisuju nějaký seznam a potřeboval bych zjistit šířku nejdelší položky, abych takovou šířku mohl nastavit jinému elementu. Tohle se mi zdálo jako celkem dobrý způsob, jenže v tom Chrome mi to nefunguje. Nevím proč, ale v mém (rozšířeném) kódu se to někdy načte dobře a někdy ne, nechápu to. Kód celé stránky: <!DOCTYPE html>
<html>
<head>
<!-- V TOMTO SOUBORU neni nic vic, nez to co je uvedeno tady v tagu STYLE
<link rel="stylesheet" href="test.css" type="text/css" media="screen, projection">
-->
<style>
span {
position: relative;
display: inline-block;
}
span dl {
display: inline-block;
position: absolute;
left: 0;
top: 100%;
}
span dl dt {
float: left;
clear: left;
white-space: nowrap;
display: inline-block;
}
</style>
</head>
<body>
<script>
var wrapper = document.createElement('span');
var items = document.createElement('dl')
var values = ['položka', 'delší položka', 'hodně dlouhá položka'];
for(var i in values) {
var item = document.createElement('dt');
item.innerHTML = values[i];
items.appendChild(item);
}
wrapper.appendChild(items);
document.body.appendChild(wrapper);
// WebKit pohori
// jakmile jsou styly v externim souboru, vraci sirku viewportu
// kdyz jsou v tomto souboru (jako ted) vraci spravnou sirku
document.title = items.clientWidth;
</script>
</body>
</html>
|
||
| joe Profil |
#2 · Zasláno: 2. 3. 2011, 20:56:14
Tak jsem to nakonec vyřešil přidáním inline stylu přímo v JS. Je potřeba taky nastavit velikost písma, protože jinak ta vrácená hodnota šířky je zase střídavá, nevím proč, asi se to vrátí dřív, než se to stačí po vložení upravit stylama. Moc se mi to řešení nelíbí, ale funguje... uvítal bych, kdyby šlo zjistit tu šířku až když budou načtené styly u toho elementu, nešlo by to nějak zjistit?
|
||
| Camo Profil |
#3 · Zasláno: 2. 3. 2011, 23:08:16
offsetWidth
|
||
| joe Profil |
#4 · Zasláno: 2. 3. 2011, 23:18:16
Camo:
Zkoušel jsi to, že píšeš tak stručnou odpověď? Všechny hodnoty to vrací stejné - clientWidth = scrollWidth = offsetWidth, ale máš pravdu, mohl jsem to napsat. |
||
| Camo Profil |
#5 · Zasláno: 2. 3. 2011, 23:28:28
Nie neskúšal a ani neviem prečo by som mal? Z toho, čo si napísal to neni vidno...
S týmito metódami je pokiaľ si pamätám problém v súvislosti s quirk modom. A neviem či nebude treba aj dopočítavať nejaký padding alebo použiť matriošku. |
||
| joe Profil |
#6 · Zasláno: 2. 3. 2011, 23:59:56
Vidíš na tom kódu, že by se jednalo o quirk mód? Mám problém jen s prohlížeči na Webkitu, jak jsem to testoval, padding se do toho nezapočítává.
Jak jsem už psal, problém se odstraní tím, že do toho samého souboru se dají i styly. Pokud zůstanou v externím souboru, vrací špatnou šířku. Takže je zřejmě chyba v samotném Webkitu, že zpracovává něco dřív/později než by měl. Zajímavé, že někdy to funguje a někdy ne (skoro po každém stisknutí F5 se ta šířka vrátí jinak - buď dobře nebo špatně) |
||
| Chamurappi Profil |
#7 · Zasláno: 3. 3. 2011, 04:02:22
Reaguji na joa:
Na načtení stylopisu externího stylopisu nemusí stránka čekat, takže v okamžiku, kdy se tvůj skript vykonává, mohou být rozměry jiné, než jaké určuje stylopis. Nemyslím si, že to je chyba prohlížeče, a řekl bych, že stejný problém se za určitých okolností projeví i mimo Chrome. Počkej si na onload.
„for(var i in values)“ Mimochodem, tento druh smyčky není určený pro pole, v řetězci i se ocitnou nejen čísla indexů pole, ale i názvy metod doplněných přes Array.prototype.
|
||
| Camo Profil |
#8 · Zasláno: 3. 3. 2011, 08:34:02
joe:
Kôli tebe mám ovládať všetky doctype naspamäť? Reaguješ nejako divne... |
||
| joe Profil |
#9 · Zasláno: 3. 3. 2011, 12:41:50 · Upravil/a: joe
Camo:
Zdá se mi, že spíš ty reaguješ nějak zvláštně, pořád předhazuješ něco, co není pravda a je to zřetelné hned z prvního příspěvku, kde je všechno, co je potřeba :-) Chamurappi: Přiměl jsi mě se podívat na pořadí načítaných souborů v hlavičce v HTML.... problém vyřešen a já u toho trávil takovou dobu proč to nejde. Měl jsem totiž ty styly vždycky až pod tím JavaScript souborem, pak to funguje. „Počkej si na onload.“ Tak by to sice taky fungovalo, ale tomu se chci právě vyhnout. Protože když měním něco na webu, nejdřív se to zobrazí normálně a pak tak, jak to upravím v JS. Když to udělám hned za prvkem, provede se to hned, že to není ani vidět, a to je to, co chci a s onload neudělám :-) „Mimochodem, tento druh smyčky není určený pro pole“ Díky za upozornění. Možná tam celkově bude víc takových chyb, používám to, co znám a zatím to funguje. (dělám knihovnu pro hezké formuláře, ty všechny co jsem našel mi nevyhovovaly, tak dělám něco svého, možná to pak zveřejním, kdyby měl někdo zájem) EDIT: A ještě to právě umožňuje vytvořit komponentu kdykoli, tak to je taky důvod, proč nechci čekat na onload, protože ani v tom případě by to pak nefungovalo - vlastně teď už to funguje :-) |
||
| Chamurappi Profil |
#10 · Zasláno: 3. 3. 2011, 15:58:34
Reaguji na joa:
„Měl jsem totiž ty styly vždycky až pod tím JavaScript souborem, pak to funguje.“ I když jsou nad ním, tak bych si tipnul, že to může nefungovat. Zkus si uměle přibrzdit načítání externího CSS. „Protože když měním něco na webu, nejdřív se to zobrazí normálně a pak tak, jak to upravím v JS.“ Můžeš to někam schovat (odpozicovat za okraj prohlížeče), než dokončíš úpravy. „právě umožňuje vytvořit komponentu kdykoli, tak to je taky důvod, proč nechci čekat na onload“ Když koukám na uvedený skript, dovolím si podotknout, že zavolání document.body.appendChild v době, kdy není donačtený HTML kód stránky, zruší celou stránku v Explorerech 4 až 7 a selže v osmičce.
„používám to, co znám a zatím to funguje“ Nemusíš při vývoji vůbec narazit na problém, ale pokud má pak skript koexistovat na jedné stránce s jinými (dosud blíže neznámými) skripty, může se takový for ošklivě vymstít.
„možná to pak zveřejním, kdyby měl někdo zájem“ Rád bych se podíval, dělal jsem něco podobného. |
||
| joe Profil |
#11 · Zasláno: 5. 3. 2011, 14:18:17
Chamurappi:
„I když jsou nad ním, tak bych si tipnul, že to může nefungovat. Zkus si uměle přibrzdit načítání externího CSS.“ Nevím jak to přibrzdit, jak píšeš. Je pravda, že to zkouším zatím jen na localhostu, kde se to zpracuje hned, uvidím, jak to bude vypadat v ostrém provozu. „Můžeš to někam schovat“ Schovávat to taky nikam nechci, ale třeba mi nakonec nic jiného nezbyde. Pak by to vypadalo nějak takhle: po načtení by se zobrazily klasické formulářové prvky, na chviličku by zmizely a objevily by se nové. Nemam rád, když se mi něco "hýbe" pod rukama :-) Na složitějších webech by třeba už někdo mohl kliknout na normální select box a on bu mi hned zmizel. „Když koukám na uvedený skript, dovolím si podotknout“ Ok, do body to dávám jen ve výjmečných případech, pokud by si select box vytvářel někdo sám, ale dobrá připomínka, nevěděl jsem o tom, díky. I když ten kód co jsem dával sem, jsem testoval od IE5.5 až IE9 a nikde problém nebyl. „Nemusíš při vývoji vůbec narazit na problém, ale pokud má pak skript koexistovat na jedné stránce s jinými“ To je mi jasné, ale dělám to převážně pro vlastní potřeby, kde s tím zatím žádný problém nemám :-) ale je mi to jasné... „Rád bych se podíval, dělal jsem něco podobného.“ Tak dobrá, až to bude, založím o tom nějaké vlákno. Zase bych nerad, aby se to objevilo na jiných stránkách dříve, než pro které jsem to dělal původně :-) |
||
|
Časová prodleva: 13 let
|
|||
0