Een progress bar met scrolling status

[Pronk]

Ik ben op zoek naar een progress bar voor in een HTML pagina, die aan kan geven hoeveel procent iemand gescrolled heeft in een HTML document.

Dit is voor een enquete die op een (lange) pagina weergegeven staat.

Ik heb mezelf helemaal rot gezocht via google naar een tutorial om zoiets te bouwen. Ik kan helaas niets vinden. Nu vraag ik me af of het uberhoubt mogelijk is om zoiets te bouwen.

Kan iemand me vertellen of het mogelijk is om zoiets te bouwen. Zoja, heeft iemand misschien
een linkje naar een tuturial.

[Verwijderd]

het kan

voor IE: document.body.scrollTop;
voor fx: window.pageYOffset;

[ Voor 2% gewijzigd door Verwijderd op 05-08-2005 12:27 . Reden: x->y ]

[Pronk]

Verwijderd schreef op vrijdag 05 augustus 2005 @ 12:27:
het kan

voor IE: document.body.scrollTop;
voor fx: window.pageYOffset;

Oke, hier kan ik voor zover ik het nu kan zien, de pagina naar een bepaalde posite laten scrollen.
Kan ik hiermee ook ophalen hoeveel ik al ben gescrolled? (liefst met percentage)

[André]

Pronk schreef op vrijdag 05 augustus 2005 @ 12:59:
[...]

Oke, hier kan ik voor zover ik het nu kan zien, de pagina naar een bepaalde posite laten scrollen.
Kan ik hiermee ook ophalen hoeveel ik al ben gescrolled? (liefst met percentage)

Ja, je kunt zo ook gewoon uitlezen. En dan kun je simpel berekenen aan de hand van de pagina hoogte hoeveel procent je al gescrolled hebt.

[Pronk]

Aha, das nu voor elkaar. Maar nu loop ik tegen het volgende probleem, ik kan er in principe wel voor zorgen dat het allemaal om de seconde geupdate wordt, maar hoe zorg ik er voor dat het continu geupdate wordt op het scherm, zonder dat ik steeds moet refreshen?

EDIT: Heeft iemand anders misschien een linke naar een goede tutorial. Dan hoef ik hier niet steeds te vragen. Ik google me rot, maar gebruik waarschijnlijk geen goede zoektermen ofzo.

[ Voor 31% gewijzigd door Pronk op 05-08-2005 14:18 ]

[ALF]

met javascript een function maken oid en dan dat laten update via een timeout. volgens mij kan het wel.

[Verwijderd]

Absoluut geen idee of het bestaat, maar het zou mooier / efficienter zijn als je een scroll-event kon gebruiken voor het updaten van je scrollbar, in plaats van een timeout.

[Verwijderd]

bestaat, maar die reageert niet op een scrollwheel: onscoll=function(){/* vul wat in */}

[André]

Ik kan vanavond wel even een voorbeeldje in elkaar zetten, als het dan nog niet gelukt is

[RM-rf]

ALF schreef op vrijdag 05 augustus 2005 @ 14:28:
met javascript een function maken oid en dan dat laten update via een timeout. volgens mij kan het wel.

het mooiste zou inderdaad onscroll zijn, maar juist het gegeven dat die niet reageert op een scrollwheel (in msie), maakt dat nogal lastig om toe te passen ....

als alternatief zou ik eerder dan setInterval() kiezen, dan setTimeout()

[André]

Zoiets?

http://www.nobellaan.nl/got/test.html

[AtleX]

Heel leuk, totdat je scrolled. Dan schiet de CPU usage omhoog naar 100% en blijft daar staan totdat je de tab of het venster sluit .

[Pronk]

André schreef op vrijdag 05 augustus 2005 @ 20:27:
Zoiets?

http://www.nobellaan.nl/got/test.html

Geweldig, dat is voor een groot gedeelte wat ik bedoelde.
Maar het is nu (zelfs voor mij ) heel simpel om het naar mijn eigen wensen aan te passen.

Ik zal mijn uiteindelijke resultaat hier nog even posten!

Bedankt!

[André]

AtleX schreef op vrijdag 05 augustus 2005 @ 20:31:
Heel leuk, totdat je scrolled. Dan schiet de CPU usage omhoog naar 100% en blijft daar staan totdat je de tab of het venster sluit .

Je kunt de timeout wel wat verlagen, naar 500ms ofzo

Edit:
Overigens werkt hij nu ook in XHTML1.0 strict, daar moet je met document.documentElement werken.

[ Voor 16% gewijzigd door André op 05-08-2005 21:17 ]

[André]

En nog weer een aanpassing: de 100% CPU waar Atlex het over heeft kwam doordat er met het onscroll event steeds de functie checkscroll werd aangeroepen waardoor er steeds meer threads kwamen door de setTimeout. Dat is nu verholpen. Je ziet nu dat bij de muiswiel de animatie op 30ms loopt en bij anders scrollen heb je een bijna real-time animatie.

[ Voor 20% gewijzigd door André op 05-08-2005 21:31 ]

[Pronk]

Ik ben er zelf lekker mee aan de slag gegaan en heb nog een aantal probleempjes.

Ik heb ten eerste de balk 90 pixels breed gemaakt. Als ik nu tegen de 100% gescrolled ben in Internet Explorer dan word de hele balk breder dan 90 pixels. Daarom heb ik er nu een javascript
regel tussen geplaatst die de berekening verandert als Internet Explorer de browser is.

Ik heb het nu getest op 4 browsers: Internet Explorer, FireFox, Netscape en Opera. Alleen in Opera werkt het nog niet.

Verder staat er nu een tekst boven: "Voortgang enquête:".


Heeft iemand een idee hoe ik het Internet Explorer probleem op een andere (betere) manier kan oplossen? Heeft misschien ook iemand een idee hoe ik het werkend krijg in Opera?

Mijn knutselwerkje staat hier:
http://home.wanadoo.nl/pronk_peter/test.htm

[ Voor 3% gewijzigd door Pronk op 10-08-2005 09:41 ]

[Blue-eagle]

Pronk schreef op woensdag 10 augustus 2005 @ 09:39:
Ik heb ten eerste de balk 90 pixels breed gemaakt. Als ik nu tegen de 100% gescrolled ben in Internet Explorer dan word de hele balk breder dan 90 pixels. Daarom heb ik er nu een javascript
regel tussen geplaatst die de berekening verandert als Internet Explorer de browser is.

Had het ook niet gewerkt als je simpelweg de statusbar div in de style "overflow: hidden;" had gezet? Alle content wordt dan gewoon afgekapt Scheelt misschien wat javascript.

[Pronk]

Blue-eagle schreef op woensdag 10 augustus 2005 @ 11:44:
[...]
Had het ook niet gewerkt als je simpelweg de statusbar div in de style "overflow: hidden;" had gezet? Alle content wordt dan gewoon afgekapt Scheelt misschien wat javascript.

Ehm nee, dat heb ik geprobeerd, maar het probleem is dan dat de balk te vroeg op 100% staat. Dus nog voordat er helemaal naar beneden gescrolled is.

[Pronk]

Even een schopje, is er helemaal niemand die me hiermee kan helpen?

[André]

Ik zie het probleem niet, bij mij is de balk net zo lang als nodig is zeg maar

[Verwijderd]

Bij mij is ie ook pas op 100 % als de scrollbalk echt onderaan staat hoor, klopt als een bus hier,
gaaf ding by the way.

[ Voor 1% gewijzigd door Verwijderd op 12-08-2005 10:24 . Reden: kan weer niet typen... ]

[Garyu]

Verwijderd schreef op vrijdag 12 augustus 2005 @ 10:23:
Bij mij is ie ook pas op 100 % als de scrollbalk echt onderaan staat hoor, klopt als een bus hier,
gaaf ding by the way.

Precies, ziet er erg netjes uit (en werkt ook gewoon hier)

[Pronk]

André schreef op vrijdag 12 augustus 2005 @ 10:17:
Ik zie het probleem niet, bij mij is de balk net zo lang als nodig is zeg maar

Ja, oke het Internet Explorer probleem is opgelost met een stukje javascript, maar ik vraag me af of dit op deze manier het netste is.

Maar het ding werkt dus ook nog niet goed in de Opera browser. (v8.02) Dat vind ik nu even het vervelendste. Kan iemand me daar mee helpen?

[Vinzzz243]

is die flikkering er ook nog uit te halen in IE?

[ILUsion]

Verwijderd schreef op vrijdag 12 augustus 2005 @ 10:23:
Bij mij is ie ook pas op 100 % als de scrollbalk echt onderaan staat hoor, klopt als een bus hier,
gaaf ding by the way.

Werkt hier ook perfect in Firefox
* ILUsion denkt: über1337-ding, geweldig idee

[Vinzzz243]

Heb nog even getest op mac.
IE5.2 MAC doet heeeeele vage dingen hele blok scrollt mee met scrollbar (en sneller dan je scrollt)
Safari vult wel, maar veel te veel, en loopt dus rechts uit beeld.
Netscape en FF doen het wel goed.

[Pronk]

Vinzzz schreef op vrijdag 12 augustus 2005 @ 12:19:
Heb nog even getest op mac.
IE5.2 MAC doet heeeeele vage dingen hele blok scrollt mee met scrollbar (en sneller dan je scrollt)
Safari vult wel, maar veel te veel, en loopt dus rechts uit beeld.
Netscape en FF doen het wel goed.

Het Safari probleem heb ik inmiddels opgelost. Op dezelfde manier zoals ik het voor IE (windows) heb opgelost.

Ik heb alleen nog steeds een probleem met Opera (windows) en IE (MAC). Nog iemand die zin heeft om mij daar mee te helpen?

[Vecodo]

stoer ding !

alleen die flikkering is wel schijt irritant

[Paling1]

roy2001 schreef op donderdag 18 augustus 2005 @ 16:29:
stoer ding !

alleen die flikkering is wel schijt irritant

Als je die flikkering in IE hebt, dan moet je de optie 'vloeiend schuiven gebruiken' bij de 'internet-opties' in het menu 'Extra' even uitzetten, daarna werkt ie een stuk mooier... (vloeiender )

In Firefox werkt het trouwens uit de kunst! (Daar heb ik de smooth scrolling trouwens aan staan....)