Autor Zpráva
Witiko
Profil
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
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
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
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
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
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
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
Je tu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
což znamená, že podle Gecka bychom měli jet na "Almost Standards Mode" a na ostatních jádrech ve Quirku.

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
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
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
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
_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
Witiko:
Doctype ale jsou definované od W3G
len na účely validácie.
Chamurappi
Profil
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> 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.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: