Een progress bar met scrolling status

Pagina: 1
Acties:

  • Pronk
  • Registratie: Februari 2002
  • Laatst online: 18-02 13:31
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.

Ja lekker!


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
  • Registratie: Februari 2002
  • Laatst online: 18-02 13:31
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)

Ja lekker!


  • André
  • Registratie: Maart 2002
  • Laatst online: 28-04 11:43

André

Analytics dude

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
  • Registratie: Februari 2002
  • Laatst online: 18-02 13:31
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 ]

Ja lekker!


  • ALF
  • Registratie: Juni 2002
  • Laatst online: 24-04 16:39

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é
  • Registratie: Maart 2002
  • Laatst online: 28-04 11:43

André

Analytics dude

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

  • RM-rf
  • Registratie: September 2000
  • Laatst online: 01-05 09:19

RM-rf

1 2 3 4 5 7 6 8 9

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()

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen


  • André
  • Registratie: Maart 2002
  • Laatst online: 28-04 11:43

André

Analytics dude


  • AtleX
  • Registratie: Maart 2003
  • Niet online

AtleX

Tyrannosaurus Lex 🦖

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 :P.

Sole survivor of the Chicxulub asteroid impact.


  • Pronk
  • Registratie: Februari 2002
  • Laatst online: 18-02 13:31
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!

Ja lekker!


  • André
  • Registratie: Maart 2002
  • Laatst online: 28-04 11:43

André

Analytics dude

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 :P.
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é
  • Registratie: Maart 2002
  • Laatst online: 28-04 11:43

André

Analytics dude

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
  • Registratie: Februari 2002
  • Laatst online: 18-02 13:31
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 ]

Ja lekker!


  • Blue-eagle
  • Registratie: September 2000
  • Niet online
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
  • Registratie: Februari 2002
  • Laatst online: 18-02 13:31
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.

Ja lekker!


  • Pronk
  • Registratie: Februari 2002
  • Laatst online: 18-02 13:31
Even een schopje, is er helemaal niemand die me hiermee kan helpen?

Ja lekker!


  • André
  • Registratie: Maart 2002
  • Laatst online: 28-04 11:43

André

Analytics dude

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
  • Registratie: Mei 2003
  • Laatst online: 30-04 15:25

Garyu

WW

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) :+

It's Difficult to Make Predictions - Especially About the Future


  • Pronk
  • Registratie: Februari 2002
  • Laatst online: 18-02 13:31
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?

Ja lekker!


  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025
is die flikkering er ook nog uit te halen in IE?

  • ILUsion
  • Registratie: Augustus 2003
  • Laatst online: 08-11-2025
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 _/-\o_

  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025
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
  • Registratie: Februari 2002
  • Laatst online: 18-02 13:31
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?

Ja lekker!


  • Vecodo
  • Registratie: Februari 2003
  • Laatst online: 30-01 10:09
stoer ding !

alleen die flikkering is wel schijt irritant

  • Paling1
  • Registratie: Juni 2001
  • Niet online

Paling1

R 8.5

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 8)7 )

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