zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Artikel lesen in Prozent anzeigen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.02.2016, 17:00
Benutzerbild von ned.design
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2010
Ort: Niedersachsen
Beiträge: 42
ned.design befindet sich auf einem aufstrebenden Ast
Frage Artikel lesen in Prozent anzeigen

Hallo,

ich brauche Eure Hilfe, ich habe es vor kurzen Mal ein Seite gesehen und auf dieser Seite wurde mir angezeigt, wie weit ich den Artikel gelesen habe in Prozent, kann mir jemand sagen, wie ich das realisieren kann.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.02.2016, 23:09
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Dafür brauchst du Javascript, daher wäre die Frage in dem Bereich besser aufgehoben.

Grob umrissen brauchst du:
- Eine Funktion die dir die Differenz vom sichtbaren Bereich des Artikels bis zum Ende liefert
- Einen Scroll-Event-Listener der deine Funktion ausführt und deine Anzeige aktualisiert (debounce nicht vergessen, sonst bremst du das Scrollen aus)

Für die Funktion brauchst du die Höhe des Viewport, die Scrollposition und Offset und Höhe des Elementes welches deinen Artikel beinhaltet. Wenn du die Scrollposition + Viewporthöhe mit dem Offset vergleichst, weißt du wann der Artikel in den sichtbaren Bereich kommt. Vergleichst du Scrollposition + Viewporthöhe mit Offset + Artikelhöhe weißt du wann das Ende des Artikel sichtbar ist bzw. wie weit der Zustand noch entfernt ist.

Die Umrechnung in Prozent bekommst du hin, oder?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.02.2016, 01:34
Benutzerbild von ned.design
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2010
Ort: Niedersachsen
Beiträge: 42
ned.design befindet sich auf einem aufstrebenden Ast
Standard

Zugegeben, ich bin JS- Unerfahren. Hier nochmal meine genaue Vorstellung: How To Survive The TitanFall BETA | Stream - Made For Reading als Balken im oberen Bereich.
Mit Zitat antworten
  #4 (permalink)  
Alt 14.02.2016, 16:49
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Naja, deine Frage habe ich beantwortet, du weißt wie du das realisieren kannst. Wenn du sowas umsetzen möchtest, dann kommst nicht ums Lernen von Javascript herum.

Eigentlich servieren wir hier ungerne fertigen Code, da mich das Thema neugierig gemacht hat, habe ich so ein Skript mal schnell heruntergeschrieben:
Code:
function Progress(article, progress) {
	function throttle(fn, threshold) {
		threshold = threshold || 250;
		var last,
			timeout;

		return function() {
			var context = this,
				now = Date.now(),
				args = arguments;

			if (last && now < last + threshold) {
				clearTimeout(timeout);
				timeout = setTimeout(function() {
					last = now;
					fn.apply(context, args);
				}, threshold);
			} else {
				last = now;
				fn.apply(context, args);
			}
		};
	}

	function getPercentageProgress(article) {
		var boundary = document.documentElement.scrollTop + document.documentElement.clientHeight - article.offsetTop,
			readProgress = Math.min(Math.max(boundary, 0), article.offsetHeight),
			percentage = 100 / article.offsetHeight * readProgress;
		return Math.round(percentage);
	}

	function updateReadProgress() {
		var percentage = getPercentageProgress(article);
		progress.style.width = percentage + '%';
	}

	window.addEventListener('scroll', throttle(updateReadProgress));
}

new Progress(document.querySelector('article'), document.querySelector('.progress'));
Throttle oder ähnliches bieten die meisten Frameworks schon fertig an, das muss man also eventuell gar nicht selbst schreiben. Der Rest sind nur ein paar Zeilen, die du hoffentlich nachvollziehen kannst, sonst frag gerne nach.

Hier gibt es das Beispiel noch mal zum Anschauen.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.02.2016, 18:23
Benutzerbild von ned.design
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2010
Ort: Niedersachsen
Beiträge: 42
ned.design befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
Danke! Hast du dir bei JSFiddle, dass Resultat angesehen, bei mir wird kein Balken angezeigt!
Mit Zitat antworten
  #6 (permalink)  
Alt 15.02.2016, 23:56
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Natürlich, allerdings habe ich nur im Firefox geschaut. Das bekommst du aber sicher Cross-Browser hin.

Ok, es ist nicht gleich offensichtlich warum das in den Webkit-Browsern nicht funktioniert. Die haben es leider seit Jahren nicht geschafft den alten document.documentElement.scrollTop-Bug zu beheben.

Hier die aktualisiert Vorschau.

Geändert von inta (16.02.2016 um 10:15 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 23.02.2016, 22:12
Benutzerbild von ned.design
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2010
Ort: Niedersachsen
Beiträge: 42
ned.design befindet sich auf einem aufstrebenden Ast
Standard

Genau, dass was ich mir vorgestellt habe, danke!
Mit Zitat antworten
  #8 (permalink)  
Alt 23.02.2016, 22:19
Benutzerbild von ned.design
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2010
Ort: Niedersachsen
Beiträge: 42
ned.design befindet sich auf einem aufstrebenden Ast
Frage

Zitat:
Zitat von inta Beitrag anzeigen
Der Rest sind nur ein paar Zeilen, die du hoffentlich nachvollziehen kannst, sonst frag gerne nach.
Hiermit frage ich nach, kannst du mir die restlichen Zeilen erklären?

Was ist ein Throttle?
Mit Zitat antworten
  #9 (permalink)  
Alt 23.02.2016, 23:24
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von ned.design Beitrag anzeigen
Hiermit frage ich nach, kannst du mir die restlichen Zeilen erklären?

Was ist ein Throttle?
Eine Drossel.
Das heißt in dem Kontext das eine Funktion zu einem späteren Zeitpunkt aufgerufen wird.

Da das scroll Event sehr häufig ausgelöst wird, würde die Funktion zum aktualisieren der Anzeige sehr oft aufgerufen. Das ist unnötig und deshalb wird die Funktion derart gedrosselt, dass diese nur viermal pro Sekunde aufgerufen wird.
Das passiert mit Hilfe einer Funktion, die beim Aufruf von throttle erzeugt wird.

Hilft das?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.02.2016, 23:46
Benutzerbild von ned.design
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2010
Ort: Niedersachsen
Beiträge: 42
ned.design befindet sich auf einem aufstrebenden Ast
Standard

Verständlich, ja! Nur würde ich mir gerne den Code erklären lassen!
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
javascript, scroll

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Var_Dump problem PHP-Freak Serveradministration und serverseitige Scripte 6 04.09.2013 13:29
CMS - Artikel eines Autors ändern laborix Offtopic 9 29.10.2012 23:31
Artikel: "Barrierefreie Webseiten gestalten" kadees (X)HTML 3 15.01.2012 23:05
In Detailansicht leere Felder anzeigen lassen oder nicht? xenia (X)HTML 3 22.07.2011 11:51
Webseiten sind keine Gemälde | Artikel im PHP-Magazin ulle Ressourcen 0 28.07.2005 10:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:03 Uhr.