Autor Zpráva
kubatt
Profil
Čaute, jde nějak zjistit, kde je scrollbal? Jako abych mohl zjistit, zda je na konci dokumentu, nebo ne, díky.
Když tak prosím napište kód, díky :)
Chamurappi
Profil
Reaguji na kubatta:
Ano. Doplň do svého dotazu interpunkci (čárky ve větách, tečky na konci vět) a velká písmena na začátky vět a řeknu ti jak.
kubatt
Profil
Lepší? :-D blbne mi net ,tak nevím jestli to budu furt moc opravovat :-D
Chamurappi
Profil
Reaguji na kubatta:
Před čárkami se nedělá mezera, za čárkami a otazníkem ano. Za „čaute“ a před „díky“ také patří čárka.
kubatt
Profil
a teď :)
kubatt
Profil
a teď :)
kubatt
Profil
promiň blbne net proto to je dvakrát :(
Chamurappi
Profil
Reaguji na kubatta:
Mnohem lepší. Takhle pěkně piš i budoucí otázky.

jde nějak zjistit, kde je scrollbal?
Z vlastnosti scrollTop na rolujícím elementu (třeba document.body nebo document.documentElement, jde-li o <body> nebo <html>) můžeš vyčíst vzdálenost viditelné plochy odshora (tedy počet pixelů, které jsou schované) a ze scrollHeight celkovou výšku rolujícího vnitřku. Když od té celkové výšky odečteš výšku zobrazované plochy (hledej offsetHeight, clientHeight) a výsledek bude cca shodný se scrollTop, je narolováno na konec stránky.
kubatt
Profil
:-D myslel sem, že za mojí snahu mi aspoň napíšeš celí ten script a ne teorii :-D
Ale díky :-D
Witiko
Profil
Buď rád, že ti na Ano / Ne otázku neodpověděl jednoduše jenom Ano. :)
kubatt
Profil
Witiko:
whot?
blaaablaaa
Profil
kubatt:
Chamurappi ti napsal postup, jak toho docilit, tak zkus googlit a neco napsat. A pokud to nebude fungovat, zkopirujes sem sve dilo a radi ti pomuzeme najit chyby.
kubatt
Profil
:-D já vím ja sem Chamurappimu taky vděčný zato co mi napsal ale ymslel sem že mi pomůže trochu více za ty muka co sem musel prožívat :-D
karel_
Profil *
kubatte, chybí Ti tam zase spousta čárek :)
kubatt
Profil
karel:
Si trapnýýýý!Laskavě se starej o sve věci a nechovej se jako malé děcko!
shaggy
Profil
kubatt:
Si trápnyyy! Láskavo všetkým poďakuj za ich ochotu a nesprávaj sa ako malé, nevychované decko!
panther
Profil
kubatt:
ale ymslel sem že mi pomůže trochu více za ty muka co sem musel prožívat
snaž se taky trochu ty. Ukaž nám, co jsi s Chamurappiho pomocí vytvořil.

Si trapnýýýý!
a tobě není trapné tu chtít od ostatních řešení bez vlastní snahy?
kubatt
Profil
karel:
Witiko
Profil
kubatt

I kdyby už ti někdo v záchvatu dobrosrdečnosti nebo z náboženského zápalu chtěl napsat celý kód, jak proboha může, když jediné na co se ptáš je
Čaute, jde nějak zjistit, kde je scrollbal?

Nikdo neví, na co to potřebuješ, kam to chceš zakomponovat a v neposlední řadě co je scrollbal. Proto ti Chamurapi [#8] vypsal všeobecně platné vlastnosti, ve kterých je uloženo číslo v pixelech označující odscrollování odshora, velikost obsahu a výřezu prohlížeče apod.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Language" content="cs">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
    <script type="text/javascript">
      var clientDimensions, contentDimensions, scrolledContent, body, html;

      window.onload = function() {
        body = document.body || document.getElementsByTagName("body")[0];
        html = document.documentElement || document.getElementsByTagName("html")[0];
        clientDimensions = [
          html.clientWidth > 0 && html.clientWidth < body.clientWidth?html.clientWidth:body.clientWidth,
          html.clientHeight > 0 && html.clientHeight < body.clientHeight?html.clientHeight:body.clientHeight
        ]
        contentDimensions = [
          html.scrollWidth > body.scrollWidth?html.scrollWidth:body.scrollWidth,
          html.scrollHeight > body.scrollHeight?html.scrollHeight:body.scrollHeight
        ];
        scrolledContent = [
          html.scrollLeft > 0?html.scrollLeft:body.scrollLeft,
          html.scrollTop > 0?html.scrollTop:body.scrollTop
        ];
      }
      
      window.onscroll = function() {
        scrolledContent[0] = html.scrollLeft > 0?html.scrollLeft:body.scrollLeft;
        scrolledContent[1] = html.scrollTop > 0?html.scrollTop:body.scrollTop;
      }
      
      window.onresize = function() {
        clientDimensions[0] = html.clientWidth > 0 && html.clientWidth < body.clientWidth?html.clientWidth:body.clientWidth;
        clientDimensions[1] = html.clientHeight > 0 && html.clientHeight < body.clientHeight?html.clientHeight:body.clientHeight;
        contentDimensions[0] = html.scrollWidth > body.scrollWidth?html.scrollWidth:body.scrollWidth;
        contentDimensions[1] = html.scrollHeight > body.scrollHeight?html.scrollHeight:body.scrollHeight;
        scrolledContent[0] = html.scrollLeft > 0?html.scrollLeft:body.scrollLeft;
        scrolledContent[1] = html.scrollTop > 0?html.scrollTop:body.scrollTop;
      }
      
      function informace() {
        var text = "Šířka a výška stránky: " + contentDimensions[0] + "*" + contentDimensions[1] + "px\n";
        text += "Šířka a výška výřezu, který vidím: " + clientDimensions[0] + "*" + clientDimensions[1] + "px\n";
        text += "Mám odscrollováno: " + scrolledContent[0] + "px doprava, " + scrolledContent[1] + "px dolů\n";
        text += "K pravému konci stránky mi zbývá: " + (contentDimensions[0] - clientDimensions[0] - scrolledContent[0]) + "px\n";
        text += "K patě stránky mi zbývá: " + (contentDimensions[1] - clientDimensions[1] - scrolledContent[1]) + "px";
        alert(text);
      }
    </script>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, velit non condimentum dapibus, leo magna faucibus tortor, eu fermentum lacus eros non sem. Curabitur posuere rutrum est sagittis lacinia. Proin ac augue non orci scelerisque rhoncus at at felis. Aenean volutpat lacus a mi tristique ac egestas elit vulputate. Aenean dolor dolor, mollis eu imperdiet vitae, condimentum venenatis nibh. Curabitur placerat feugiat lacinia. Donec sapien mi, porta et aliquam id, venenatis sed velit. Praesent nunc nisl, rhoncus eget blandit sed, rhoncus eget libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eget fringilla sem. In sit amet tristique est. Donec commodo nisi et quam dictum ultricies sollicitudin est semper. Pellentesque ullamcorper aliquet orci hendrerit ultrices. Vivamus aliquam elementum velit, quis ultrices erat consectetur id.<br><br>
    Nulla facilisi. Ut semper odio nec elit dictum accumsan. Nullam luctus gravida turpis eu consectetur. In hac habitasse platea dictumst. Duis eu sem ipsum. Fusce hendrerit, mi at gravida aliquet, diam felis iaculis lectus, a imperdiet velit orci at augue. In hac habitasse platea dictumst. Morbi lacus tortor, tristique eu consectetur id, euismod ac metus. In commodo nulla ut enim venenatis ac porta erat feugiat. Fusce in lacus massa, et accumsan nunc. Suspendisse faucibus tellus tortor, ac placerat nulla. Maecenas tempor semper ipsum, tristique elementum sem convallis eget. In sed nibh vitae lacus blandit tempor. Ut sit amet mauris mi, in tempor mi. Proin fringilla gravida sapien, a aliquet orci mattis varius. Phasellus eget mi non sapien gravida convallis nec ullamcorper libero. Cras aliquet velit vel massa scelerisque imperdiet. Ut sit amet augue nisl. Pellentesque condimentum aliquam elementum. Ma uris dignissim sem vel arcu egestas ut viverra arcu convallis.<br><br>
    Fusce quis elit non dui eleifend laoreet sit amet vitae orci. Sed aliquet felis vel ligula malesuada rutrum dignissim tellus mattis. Ut dolor mi, mollis a sodales nec, tempus sagittis tellus. Ut sit amet nisi sapien, non viverra ligula. Cras volutpat urna ac quam vulputate consectetur. Vivamus nec facilisis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sit amet mattis tellus. Nunc felis nisl, posuere scelerisque semper ac, consectetur sit amet risus. Aliquam pellentesque porta quam, eu sollicitudin dui pretium in. Duis tincidunt, orci nec auctor molestie, massa quam rhoncus nisl, vel hendrerit mauris nisi et risus. Aliquam sit amet dolor libero.<br><br>
    <a href="javascript:informace();">Klik</a><br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, velit non condimentum dapibus, leo magna faucibus tortor, eu fermentum lacus eros non sem. Curabitur posuere rutrum est sagittis lacinia. Proin ac augue non orci scelerisque rhoncus at at felis. Aenean volutpat lacus a mi tristique ac egestas elit vulputate. Aenean dolor dolor, mollis eu imperdiet vitae, condimentum venenatis nibh. Curabitur placerat feugiat lacinia. Donec sapien mi, porta et aliquam id, venenatis sed velit. Praesent nunc nisl, rhoncus eget blandit sed, rhoncus eget libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eget fringilla sem. In sit amet tristique est. Donec commodo nisi et quam dictum ultricies sollicitudin est semper. Pellentesque ullamcorper aliquet orci hendrerit ultrices. Vivamus aliquam elementum velit, quis ultrices erat consectetur id.<br><br>
    Nulla facilisi. Ut semper odio nec elit dictum accumsan. Nullam luctus gravida turpis eu consectetur. In hac habitasse platea dictumst. Duis eu sem ipsum. Fusce hendrerit, mi at gravida aliquet, diam felis iaculis lectus, a imperdiet velit orci at augue. In hac habitasse platea dictumst. Morbi lacus tortor, tristique eu consectetur id, euismod ac metus. In commodo nulla ut enim venenatis ac porta erat feugiat. Fusce in lacus massa, et accumsan nunc. Suspendisse faucibus tellus tortor, ac placerat nulla. Maecenas tempor semper ipsum, tristique elementum sem convallis eget. In sed nibh vitae lacus blandit tempor. Ut sit amet mauris mi, in tempor mi. Proin fringilla gravida sapien, a aliquet orci mattis varius. Phasellus eget mi non sapien gravida convallis nec ullamcorper libero. Cras aliquet velit vel massa scelerisque imperdiet. Ut sit amet augue nisl. Pellentesque condimentum aliquam elementum. Ma uris dignissim sem vel arcu egestas ut viverra arcu convallis.<br><br>
    Fusce quis elit non dui eleifend laoreet sit amet vitae orci. Sed aliquet felis vel ligula malesuada rutrum dignissim tellus mattis. Ut dolor mi, mollis a sodales nec, tempus sagittis tellus. Ut sit amet nisi sapien, non viverra ligula. Cras volutpat urna ac quam vulputate consectetur. Vivamus nec facilisis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sit amet mattis tellus. Nunc felis nisl, posuere scelerisque semper ac, consectetur sit amet risus. Aliquam pellentesque porta quam, eu sollicitudin dui pretium in. Duis tincidunt, orci nec auctor molestie, massa quam rhoncus nisl, vel hendrerit mauris nisi et risus. Aliquam sit amet dolor libero.<br><br>
  </body>
</html>


P.S.: Omlouvám se za obšírnost implementace, nicméně jsem objevil zajímavý paradox. 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 html testovací stránky, kterou posílám v tomto příspěvku. 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. Jinak to je důvod, proč je definice těch polí (možná) trochu delší, než by musela.

Mno a když už jsem se rozepsal, ještě by mě zajímalo, co je programátorsky čistší řešení. Jestli při update pomocí onresize a onscroll eventu tvořit stále nové instance Array:
pole = [
  nová_hodnota_1,
  nová_hodnota_2
]

Nebo pouze updatovat hodnoty v současném (viz. kód nahoře)?
Witiko
Profil
Teď jsem zjistil, že můj script je špatný, protože např. v Opeře pokud je obsah menší, než výřez prohlížeče, tak se chybně uloží hodnoty proměnných clientDimensions a contentDimensions naopak. Kvzteku, bylo by nutné testovat, která z hodnot je bližší screen.availWidth / Height, což je prasárna a zbytečná deklarace / volání funkce navíc. Kdyby někdo nalezl nějakou logiku mezi tím, co navrací document.documentElement.clientWidth / Height a document.body.clientWidth / Height (viz. můj popis problematiky v [#19]), aby nebylo nutné tyto hodnoty neustále porovnávat, byl by kód čistší.

Any suggestions, gentlemen? I'm all ears.
Witiko
Profil
Nemůžu si pomoct, ale musím téma obnovit, jelikož otázka v postu [#19] v P.S.: dodatku a postu [#20] zůstala bez zájmu, ačkoliv se podle mého jedná o zajímavý problém.

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:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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