Scrollposition in % ausgeben

[Juri]

Hallo,
ich entwickle gerade eine Website mithilfe von HTML, CSS und Javascript.

Ich möchte jetzt auf dieser Seite die Scrollposition als Prozentangabe auf der Seite anzeigen, so das sie am Anfang auf 00% steht und je weiter man nach links scrollt, desto höher zählt sie, bis 100%.

Der bisher einzige Code, der mir hilfreich erschien war dieser hier:

function getScrollXY() {  
	var scrOfX = 0, scrOfY = 0;  
  
	if( typeof( window.pageYOffset ) == 'number' ) {  
		//Netscape compliant  
		scrOfY = window.pageYOffset;  
		scrOfX = window.pageXOffset;  
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {  
		//DOM compliant  
		scrOfY = document.body.scrollTop;  
		scrOfX = document.body.scrollLeft;  
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {  
		//IE6 standards compliant mode  
		scrOfY = document.documentElement.scrollTop;  
		scrOfX = document.documentElement.scrollLeft;  
	}  
	return [ scrOfX, scrOfY ];  
}

von Quelle

Nur leider bin ich in Javascript noch nicht sehr bewandert und ich weiß nicht, wie ich den Code in meiner Website einbinde, damit das was dort ermittelt wird auch ausgegeben wird (am besten in %) oder was ich daran noch ändern muss oder.

Was habt ihr für Ideen, um die Scrollposition auf der HTML Seite anzeigen zu lassen?

lg
Juri

[Encoder]

Nur leider bin ich in Javascript noch nicht sehr bewandert

Du hast grad ein Paradebeispiel für die Motivation, das zu ändern :-)
Für den %-Wert müsstest du halt das Ergebnis dieser Funktion noch durch die Breite des Fensters teilen. Bzw. erst mal schauen was diese Werte überhaupt liefern, die kannst du dir ja erst mal einzeln ausgeben lassen.
Fürs Ausgeben schaust du dir am besten hier unter "document" die Methode write() an. Oder um Text auszutauschen den Objektbaum (DOM), mit dem Methogen getElementById, innerHtml und die Beispiele dazu.

Wird dann irgendwoe so aussehen (alles aus dem Kopf, kann also bisschen abweichen)
document.getElementById("dieIDdieDuVergebenHast").innerHtml = scrollPosition / Fensterbreite;

[Juri]

Dankeschön, das hat mich schon mal weiter gebracht!

Ich hab es jetzt geschafft, den wert in Prozent auszugeben, aber leider nur als Popup wenn man auf einen Link Klickt.

Mein Code sieht gerade so aus:

	<div class="prozent">  
	  
	<script type="text/javascript">  
function getScrollXY()  
{  
	var scrOfX = 0, scrOfY = 0;  
	if( typeof( window.pageYOffset ) == 'number' ) {  
		scrOfY = window.pageYOffset; scrOfX = window.pageXOffset;  
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {  
		scrOfY = document.body.scrollTop; scrOfX = document.body.scrollLeft;  
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {  
		scrOfY = document.documentElement.scrollTop; scrOfX = document.documentElement.scrollLeft;  
	}  
	window.alert ( "Horizontal scrolling = " + scrOfX/30859*100 + " %" );  
}  
  
	document.write( "Horizontal scrolling = " + scrOfX/30859*100 + " %" );  
	  
</script>  
  
   <a href="javascript:getScrollXY();">get the scrolling offsets</a>  
  
</div>

Nur wenn ich jetzt auf den Link am ende Klicke kommt das Popup. Die Funktion "document.write" macht nichts. Bzw. so wie sie jetzt gerade ist macht sie nichts, wenn ich nur Text ausgebe oder "document.URL" ausgeben lasse macht sie das.
Warum wird die Variable "ScrOfX" nicht mit document.write ausgegeben?

Und dann ist da noch eine Sache, die Prozentangabe funktioniert jetzt zwar, hat aber ca. 10 Nachkommastellen. Wie kann ich die Abrunden, das ich nur noch ganze Zahlen bekomme?

lg
Juri

[Juri]

Also mit dem runden hab ich das jetzt auch noch hin bekommen. Außerdem hab ich ein paar überflüssige Code Teile gelöscht.
Aber die Ausgabe funktioniert noch immer nicht.

Jetzt sieht er so aus:

<script type="text/javascript">  
function getScrollXY()  
{  
	var scrOfX = 0;  
	if( typeof( window.pageYOffset ) == 'number' ) {  
		scrOfX = window.pageXOffset;  
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {  
		scrOfX = document.body.scrollLeft;  
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {  
		scrOfX = document.documentElement.scrollLeft;  
	}  
	var gerundet = Math.round(scrOfX/30859*100);  
	window.alert ( "Horizontal scrolling = " + gerundet + " %" );  
}  
  
	document.write( "Horizontal scrolling = " + gerundet + " %" );  
	  
</script>  
  
   <a href="javascript:getScrollXY();">get the scrolling offsets</a>

[Juri]

So, ich hab es nun doch alleine hin bekommen. Hätte ich mir nicht wirklich zugetraut, immerhin hab ich mir heute Nachmittag das erste mal einen Javascript-Code angesehen.

Hier noch für alle die mal mit einem Ähnlichem Problem auf diese Seite stoßen:

Gelöst hab ich das nach dem Beispiel für das Zählen der aufenthaltsdauer http://de.selfhtml.org/javascript/beispiele/aufenthaltsdauer.htm@title=http://de.selfhtml.org/javascript/beispiele/aufenthaltsdauer.htm

Also vorallem dieser Zeile zum schreiben:
document.write ( "Horizontal scrolling = " + gerundet + " %" );
die anderen änderungen sind nur, damit es auch immer aktualisiert wird.

Im "Head" steht das Script:

    <script type="text/javascript">  
	  
function getScrollXY()  
{  
	var scrOfX = 0;  
	if( typeof( window.pageYOffset ) == 'number' ) {  
		scrOfX = window.pageXOffset;  
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {  
		scrOfX = document.body.scrollLeft;  
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {  
		scrOfX = document.documentElement.scrollLeft;  
	}  
	var gerundet = Math.round(scrOfX/30859*100);  
	  
	 window.document.Anzeige.Zeit.value = gerundet;  
	window.setTimeout("getScrollXY()", 10);  
}  
  
	document.write ( "Horizontal scrolling = " + gerundet + " %" );  
	  
	document.getElementById("proz").innerHtml = gerundet;  
		  
</script>  

Im "Body Tag steht das:
<body onload="window.setTimeout('getScrollXY()', 10)">

und an der stelle wo das angezeigt werden soll hab ich das stehen:

   <form name="Anzeige" action="">  
<input type="text" size="7" name="Zeit" value="00">  
</form>

jetzt muss ich mir nur noch gedanken um das richtige gestalten machen.

Juri

[Juri]

Nachtrag:
Wenn man noch andere Javascript Codes hat darf man das
" onload="window.setTimeout('getScrollXY()', 10)" " nicht in den Body-Tag schreiben, weil sonst (zumindest bei mir) die anderen Javascripte nicht ausgeführt werden.
Bei mir hat es dann aber gereicht, eifnach die Zeile " onload="window.setTimeout('getScrollXY()', 10)" " unter die letzte Zeile von dem zuletzt auszuführenden Javacode zu schreiben.

Und nochmal Danke an Encoder, so kleine Tipps, nach was man suchen muss reichen ja meist schon aus. Finde ich sogar besser, als wenn ich eine fertige Lösung bekommen hätte, weil dann wäre ich jetzt so schlau wie vorher.
Deine zweite Antwort hatte ich leider übersehen, aber darauf, das ich eine ID vergeben muss etc. hattest du ja schon im ersten Post verwiesen und ich hatte es nur erst später kapiert.

[Encoder]

Warum wird die Variable "ScrOfX" nicht mit document.write ausgegeben?

Sie wird es dann, wenn du den Code irgendwo im HTML der Seite stehen hast, also im <body> Teil. Allerdings nur einmalig, weil das Script nur dann auseführt wird, wenn der Browser gerade diese Stelle im HTML ansieht. Von daher war das nicht wirklich der super Tip, eher ne Ergänzung.

Damit du Text beliebig ändern kannst, solltest du dir ein Stück HTML bauen, dem eine ID geben z.B. <p id="meinVariablerText"></p> und dann ein Konstrukt wie
getElementById("meinVariablerText").innerHtml = meineProtenzzahl;
verwenden, um den Inhalt dieses <p> zu ändern.
Beispiele dazu findest du in Google. Umfangreicher, genauer und schneller als ich es könnte ;-)