| Autor | Zpráva | ||
|---|---|---|---|
| Witiko Profil |
#1 · Zasláno: 27. 10. 2010, 00:43:44 · Upravil/a: Witiko
Vycházím z tématu "scroll value"
Z důvodu zjednodušení mě napadlo (v souvislosti s napomáháním ve výše zmíněném topicu) napsat si knihovnu, která by zprostředkovávala prostý objekt, který by měl následující atributy: Screen.clientDimensions - [viewport Width, viewport Height] Screen.contentDimensions - [page Width, page Height] Screen.scrolledContent - [scrolled Width, scrolled Height] Výsledek:
var body = document.body || document.getElementsByTagName("body")[0],
html = document.documentElement || document.getElementsByTagName("html")[0],
getClosest = function(key, valueOne, valueTwo) {
var abs = [Math.abs(key - valueOne), Math.abs(key - valueTwo)];
return arguments[abs.indexOf(Math.min.apply(Math, abs)) + 1];
},
getFarthest = function(key, valueOne, valueTwo) {
var abs = [Math.abs(key - valueOne), Math.abs(key - valueTwo)];
return arguments[abs.indexOf(Math.max.apply(Math, abs)) + 1];
};
Screen.clientDimensions = [
getClosest(screen.availWidth, html.clientWidth, body.clientWidth),
getClosest(screen.availHeight, html.clientHeight, body.clientHeight)
];
Screen.contentDimensions = [
getFarthest(screen.availWidth, html.scrollWidth, body.scrollWidth),
getFarthest(screen.availHeight, html.scrollHeight, body.scrollHeight)
];
Screen.scrolledContent = [
html.scrollLeft > 0?html.scrollLeft:body.scrollLeft,
html.scrollTop > 0?html.scrollTop:body.scrollTop
];
Screen.addListener("scroll", function(){
Screen.scrolledContent[0] = html.scrollLeft > 0?html.scrollLeft:body.scrollLeft;
Screen.scrolledContent[1] = html.scrollTop > 0?html.scrollTop:body.scrollTop;
});
Screen.addListener("resize", function(){
Screen.clientDimensions[0] = getClosest(screen.availWidth, html.clientWidth, body.clientWidth);
Screen.clientDimensions[1] = getClosest(screen.availHeight, html.clientHeight, body.clientHeight);
Screen.contentDimensions[0] = getFarthest(screen.availWidth, html.scrollWidth, body.scrollWidth);
Screen.contentDimensions[1] = getFarthest(screen.availHeight, html.scrollHeight, body.scrollHeight);
Screen.scrolledContent[0] = html.scrollLeft > 0?html.scrollLeft:body.scrollLeft;
Screen.scrolledContent[1] = html.scrollTop > 0?html.scrollTop:body.scrollTop;
});
Ukázka aktuální implementace Pokud jste kód přečetli, nejspíš vás uhodily do očí funkce getClosest a getFarthest, které přijímají tři argumenty. První klíč a dvě čísla, z nichž je navráceno to bližší / vzdálenější klíči. Určitě vám přijde podivuhodné, proč takto testuji vzdálenost document.documentElement.clientWidth a document.body.clientWidth od screen.availWidth. Odpověď je nasnadě. Budu se nyní citovat z výše zmíněného topicu: Zkuste si např. v Chrome tady na diskuzi porovnat document.documentElement.clientHeight a document.body.clientHeight. První navrací velikost výřezu, druhý velikost celého obsahu. A nyní zkuste to samého udělat u prázdné html testovací stránky s nějakým libovolným textem / obsahem. Situace se prohodí. Podobný fenomén lze zaznamenat i u scroll / offset Width / Height. Nejspíš to bude mít cosi do činění s tím, jak je použito CSS, to jsem pitvat ještě nestačil. Pokud by někdo věděl důvod, bylo by určitě poučné si to poslechnout. Doufám, že tentokrát někdo, kdo ví, která bije, zareaguje a dokáže objasnit záhadné prohazování hodnot, případně nastínit správné řešení. Tento script funguje, ale přijde mi, že neustálé porovnávání tří atributů je jako jít s kanónem na vrabce - tzn. že by při získávání hodnot mělo existovat řešení při kterém by nemuselo být třeba volat funkce žádné. |
||
| Witiko Profil |
#2 · Zasláno: 27. 10. 2010, 22:54:59 · Upravil/a: Witiko
Vidím tu odpovědi a sám odpovídám na mnohem hloupější dotazy celý den. Znamenají nulové odpovědi, že je problém nezajímavý, nebo to, že nikdo nezná odpověď? :)
|
||
| Davex Profil |
#3 · Zasláno: 27. 10. 2010, 23:29:53
Nejsem si jistý (a proto jsem to sem nepsal), ale jestli ono náhodou nemůže záležet na vykreslovacím režimu prohlížeče.
|
||
| Witiko Profil |
#4 · Zasláno: 27. 10. 2010, 23:39:08
To je zajímavý postřeh. Existuje způsob, jakým vykreslovací režim z javascriptu zjistit? Přesto však si myslím, že musí existovat i prostší řešení, nezdá se mi, že by script na zjištění rozměrů viewportu, dokumentu a odscrollovaného obsahu musel být jíný pro rozdílné módy.
Jinak jak tohle fórum, tak prázdný dokument se kterým jsem testoval jsou v quirk módu. |
||
| Davex Profil |
#5 · Zasláno: 27. 10. 2010, 23:42:27
Režim se dá zjistit z
document.compatMode a toto fórum mi jede ve standardním režimu. Prázdná stránka bez doctype by měla být v quirku.
|
||
| Witiko Profil |
#6 · Zasláno: 28. 10. 2010, 00:09:07 · Upravil/a: Witiko
Mate mě !DOCTYPE, ten tu není nastavený standardní, přesto document.compatMode tvrdí, že stránka není v quirks módu.
[#4] Přesto však si myslím, že musí existovat i prostší řešení, nezdá se mi, že by script na zjištění rozměrů viewportu, dokumentu a odscrollovaného obsahu musel být jíný pro rozdílné módy. |
||
| Davex Profil |
#7 · Zasláno: 28. 10. 2010, 13:02:58 · Upravil/a: Davex
Witiko:
„Mate mě !DOCTYPE, ten tu není nastavený standardní“ V ostré verzi i v sandboxu je doctype přepínající do standardního režimu - viz Mozilla Developer Center: Mozilla's DOCTYPE sniffing (je to anglicky). Nevím, zda existuje jednodušší řešení, ale například jQuery se s tím vypořádává nějak takto: var doc = document.documentElement, body = document.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
…
if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ) {
top += Math.max( docElem.scrollTop, body.scrollTop );
left += Math.max( docElem.scrollLeft, body.scrollLeft );
} |
||
| Witiko Profil |
#8 · Zasláno: 28. 10. 2010, 16:15:37 · Upravil/a: Witiko
Je tu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Jinak jak vidím, tak ani jQuery si nebere příliš servítky. Ačkoliv velká část jQuery kódu je děsivá prasárna a spousta věcí co jsem koukal je napsáno děsivě neefektivně, nedělejme si iluze. :) Nejspíš se podívám se ještě k jiným FrameWorkům, jak to řeší, problém je v tom, že jsem ještě nikde neviděl můj přístup k problematice (tzn. zprostředkovávání zobrazeného výřezu, celého dokumentu a odscrollovaného obsahu), ale mohou tam být užitečná vodítka. |
||
| Davex Profil |
#9 · Zasláno: 28. 10. 2010, 16:25:42
Witiko:
„a na ostatních jádrech ve Quirku“ Pročpak? Vyzkoušej si s tímto doctype test režimu v jiných prohlížečích. |
||
| Witiko Profil |
#10 · Zasláno: 28. 10. 2010, 16:36:15 · Upravil/a: Witiko
Tohle je strašlivý bordel :D
Neznamená náhodou tahle část: 4.01 Transitional, že má jít o Quirks in contrary to 4.01 Strict, což má být mód ctící Standardy? Zdá se mi to, nebo je problematika definice vykreslovacích režimů stejně jako spousta jiných věcí spojených s W3G znatelně zmatenější, než by mohla a měla být? :) |
||
| _es Profil |
#11 · Zasláno: 28. 10. 2010, 16:53:05
Witiko:
W3C žiadne vykresľovacie režimy nedefinuje. Existencia viacerých vykresľovacích režimov a ich prepínanie pomocou doctype je správanie úplne mimo štandardov W3C pre HTML4.
|
||
| Witiko Profil |
#12 · Zasláno: 28. 10. 2010, 17:10:19
_es:
Doctype ale jsou definované od W3G - viz.: http://www.w3.org/TR/html4/loose.dtd, http://www.w3.org/TR/html4/strict.dtd . |
||
| _es Profil |
#13 · Zasláno: 28. 10. 2010, 17:37:03
Witiko:
„Doctype ale jsou definované od W3G“ len na účely validácie. |
||
| Chamurappi Profil |
#14 · Zasláno: 29. 10. 2010, 05:02:35
Reaguji na Witika:
„Neznamená náhodou tahle část: 4.01 Transitional, že má jít o Quirks in contrary to 4.01 Strict, což má být mód ctící Standardy?“ Deklarace <!doctype> s HTML 4.01 Transitional může přepínat do (skoro)standardního režimu, pokud je v ní uvedena adresa DTD.
Přepínání režimů je výtvorem výrobců prohlížečů, potřebovali nějak rozlišit stránky, které netouží po zpětné kompatibilitě, od zbytku, a jelikož většina webů v té době nedeklarovala nic, nebo HTML 4 bez adresy, přepínače režimů jsou podle toho vymodelovány. Lepší by bylo, kdyby existoval jen jeden režim (což si člověk uvědomí zejména při tvorbě stylů či skriptů, které mají běžet ve všech režimech — musí válčit s dvojnásobkem prohlížečů), ale to by W3C před dvanácti lety muselo více dbát na zpětnou kompatibilitu. Bohužel se přepínač režimů trošku kryje s mýtem, že <!doctype> má podle specifikací říkat prohlížeči něco veledůležitého.
„Nejspíš to bude mít cosi do činění s tím, jak je použito CSS, to jsem pitvat ještě nestačil.“ Někdy může mít <body> a/nebo <html> nastavenou stoprocentní (min-)height, což zřejmě také může ovlivnit měřená čísla.
|
||
|
Časová prodleva: 14 let
|
|||
0