Scroll-Position merken bei mobile Browser (iPhone)

#Sascha · 14. Sep. 2014

Hallo,

ich möchte das die Scrollposition nach einem Reload der Seite erhalten bleibt und die Seite nicht immer zum Anfang zurückscrollt.
Dazu habe ich den folgenden JavaScript-Code verwendet. Im Firefox Browser auf dem PC funktioniert es. Im Google Chrome Browser auf dem iPhone allerdings nicht.
Aber wieso nicht!? Wo liegt das Problem?

Code:

var interval2 = window.setInterval("refreshPage()", 10000);

function refreshPage () {
	window.location.reload(true);
}

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for (var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

window.onload = function() {
	var yScroll = readCookie("scrollPos");
	if (yScroll) {
		scrollTo(0, yScroll);
	}
	window.onscroll = function() {
		var yScroll;
		if (self.pageYOffset) {
			yScroll = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
			yScroll = document.documentElement.scrollTop;
		} else if (document.body) { // all other Explorers
			yScroll = document.body.scrollTop;
		}
		createCookie("scrollPos", yScroll, 14)
	}
}

j-l-n · 14. Sep. 2014

Ich habe jetzt nur mal kurz über den Code geschaut und ihn auch nicht getestet, aber eigentlich sollte er schon funktionieren. Anscheinend gibt es in Chrome aber Probleme, wenn man während die Seite noch geladen wird Scrollaktionen durchführt. javascript - strange beaviour of Chrome at window.scrollTo() - Stack Overflow

PS: setTimeout sollte man keinen String, sondern eine Funktionsreferenz übergeben: setInterval(refreshPage, 10000);

- - - Aktualisiert - - -

Übrigens ist es absolut benutzerunfreundlich, eine Seite alle 10 Sekunden ohne Aktion neu zu laden. Wenn man neue Inhalte nachträglich nachladen möchte, verwendet man dazu AJAX...

#Sascha · 14. Sep. 2014

Danke für den Link! Genau das war das Problem.
Der Code sieht jetzt so aus und diesmal funktioniert es:

Code:

var interval2 = window.setInterval(refreshPage, 10000);
var interval3 = window.setTimeout(onLoad, 50);

function refreshPage () {
	window.location.reload(true);
}

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for (var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function onLoad () {
	var yScroll = readCookie("scrollPos");
	if (yScroll) {
		scrollTo(0, yScroll);
	}
	window.onscroll = function() {
		var yScroll;
		if (self.pageYOffset) {
			yScroll = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
			yScroll = document.documentElement.scrollTop;
		} else if (document.body) { // all other Explorers
			yScroll = document.body.scrollTop;
		}
		createCookie("scrollPos", yScroll, 14)
	}
}

PS: setTimeout sollte man keinen String, sondern eine Funktionsreferenz übergeben: setInterval(refreshPage, 10000);

Danke auch für diesen Hinweis, hab´s geändert.

Übrigens ist es absolut benutzerunfreundlich, eine Seite alle 10 Sekunden ohne Aktion neu zu laden. Wenn man neue Inhalte nachträglich nachladen möchte, verwendet man dazu AJAX...

Das stimmt, gefällt mir so auch nicht wirklich gut. Aber um es mit AJAX umzusetzen, fehlen mir leider die nötigen Programmierkenntnisse.

j-l-n · 15. Sep. 2014

#Sascha schrieb:
Das stimmt, gefällt mir so auch nicht wirklich gut. Aber um es mit AJAX umzusetzen, fehlen mir leider die nötigen Programmierkenntnisse.

Ich täte hierfür jQuery verwenden; das vereinfacht das Ganze ziemlich stark: .load() | jQuery API Documentation

#Sascha · 15. Sep. 2014

Also wenn ich z.B. folgende html-Datei habe:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>titel</title>
	<link rel="stylesheet" type="text/css" href="css.css">
	<script type="text/javascript" src="refresh.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>

<body>
	<div class="titel"><div class="titeltext">titel</div><hr class="trennlinie" /></div>
	<div class="titeltext">titel</div>
	<hr class="trennlinie" />
    
	<div class="kategorie">kategorie1</div>
	<a href="?wert1" id="btn1" class="myButton_aktiv" style="width:184px;">btn1</a><br />
	<a href="?wert2" id="btn2" class="myButton" style="width:184px;">btn2</a><br />
    
	<div class="kategorie">kategorie2</div>
	<a href="?wert3" id="btn3" class="myButton" style="width:184px;">btn3</a><br />
	<a href="?wert4" id="btn4" class="myButton" style="width:184px;">btn4</a><br /><br />
</body>

</html>

Und eine status.txt Datei mit diesem Inhalt:

Code:

btn1Status=1;
btn2Status=0;
btn3Status=0;
btn4Status=0;

Wie kann ich jetzt die "status.txt" z.B. alle 1000ms auslesen um die aktuellen Werte abzufragen und je nach Wert die jeweiligen Klassen-Namen class="myButton" dynamisch ändern?

Wenn z.B. in der txt-Datei "btn1Status=1;" steht, soll der Link in der html-Datei so aussehen:

HTML:

<a href="?wert1" id="btn1" class="myButton_aktiv" style="width:184px;">btn1</a>

Und wenn in der txt-Datei "btn1Status=0;" steht, dann soll der Link so aussehen:

HTML:

<a href="?wert1" id="btn1" class="myButton" style="width:184px;">btn1</a>

Die css-Datei sieht übrigens so aus:

Code:

.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
	background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
	background-color:#79bbff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
	margin:5px 0px 5px 0px;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8cc6ff), color-stop(1, #378de5));
	background:-moz-linear-gradient(top, #8cc6ff 5%, #378de5 100%);
	background:-webkit-linear-gradient(top, #8cc6ff 5%, #378de5 100%);
	background:-o-linear-gradient(top, #8cc6ff 5%, #378de5 100%);
	background:-ms-linear-gradient(top, #8cc6ff 5%, #378de5 100%);
	background:linear-gradient(to bottom, #8cc6ff 5%, #378de5 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#8cc6ff',GradientType=0);
	background-color:#378de5;
}
.myButton:active {
	position:relative;
	top:1px;
}
.myButton_aktiv {
	-moz-box-shadow:inset 0px 1px 0px 0px #a4e271;
	-webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809));
	background:-moz-linear-gradient(top, #89c403 5%, #77a809 100%);
	background:-webkit-linear-gradient(top, #89c403 5%, #77a809 100%);
	background:-o-linear-gradient(top, #89c403 5%, #77a809 100%);
	background:-ms-linear-gradient(top, #89c403 5%, #77a809 100%);
	background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809',GradientType=0);
	background-color:#89c403;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
	margin:5px 0px 5px 0px;
}
.myButton_aktiv:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #99d904), color-stop(1, #77a809));
	background:-moz-linear-gradient(top, #99d904 5%, #77a809 100%);
	background:-webkit-linear-gradient(top, #99d904 5%, #77a809 100%);
	background:-o-linear-gradient(top, #99d904 5%, #77a809 100%);
	background:-ms-linear-gradient(top, #99d904 5%, #77a809 100%);
	background:linear-gradient(to bottom, #99d904 5%, #77a809 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#99d904', endColorstr='#77a809',GradientType=0);
	background-color:#77a809;
}
.myButton_aktiv:active {
	position:relative;
	top:1px;
}
.myButton_deaktiviert {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	display:inline-block;
	cursor:default;
	color:#b0b0b0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	margin:5px 0px 5px 0px;
}
body {
	background-color:#000000;
	margin:0px 0px 0px 0px;
	text-align:center;
	margin:0px;
	padding:0px;
}
.titel {
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:71px;
	background:#000000;
	z-index:auto;
}
.titeltext {
	color:#cccccc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:28px;
	margin:10px 0px 3px 0px;
}
.trennlinie {
	border:none;
	height:3px;
	background-color:#69a1ff;
	margin:0px 0px 20px 0px;
}
.kategorie {
	color:#cccccc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	letter-spacing:2px;
	margin:20px 0px 5px 0px;
}

kkapsner · 17. Sep. 2014

Die letzten drei Beiträge mussten erst freigeschaltet werden...
Wenn ein Beitrag nicht sofort erscheint, das nächste Mal bitte einfach ein bisschen warten.

Zum Thema: über https://api.jquery.com/jQuery.get/ kannst du Daten über eine URL asynchron laden. Den String, den du dann bekommst, musst du dann parsen und dann entsprechend agieren. window.setInterval() kennst du ja schon.

mikdoe · 17. Sep. 2014

kkapsner schrieb:
Die letzten drei Beiträge mussten erst freigeschaltet werden...

Zwei davon (einmal mit und einmal ohne CSS) hab ich gelöscht, weil sie durch diese blöde Freischalterei doppelt/unvollst. waren.

#Sascha · 19. Sep. 2014

ich bekomme es nicht hin...

Da mir viele nötige Grundkenntnisse in JavaScript/Ajax fehlen, bin ich mit der Aufgabe überfordert.

Wäre jemand so nett und könnte mir meine Datei anpassen, bitte..

?

mikdoe · 19. Sep. 2014

Wo hängt's denn, Sascha? Oder willst du es nur fertig kriegen ohne Lerneffekt?

#Sascha · 19. Sep. 2014

...Oder willst du es nur fertig kriegen ohne Lerneffekt?

Ja bitte, das würde mir sehr helfen! Ein fertiger Code schließt nicht unbedingt den Lerneffekt aus.

Ich habe es versucht und bin relativ schnell an meine Grenzen gestoßen.
Ich schaffe es nicht einmal die Datei richtig auszulesen, geschweige den die darin enthaltenen Informationen zu verarbeiten und die Buttons entsprechend zu gestalten.
Dafür bräuchte ich ein Jahr und wäre dann vermutlich immer noch nicht am Ziel.

mikdoe · 20. Sep. 2014

Du willst jetzt Code haben für ein Teil, dass alle paar Sekunden eine Datei vom Server holt und entsprechend nach Inhalt CSS Klassen ändert, richtig? Kann denn dafür jQuery verwendet werden?

#Sascha · 20. Sep. 2014

Ja, je nachdem was in der txt steht, sollen sich beim entsprechenden Button die Werte für href, class und der Buttontext ändern.
Wenn z.B. in der txt steht "btn1Status=1;" dann soll btn1 so aussehen:

Code:

<a href="?ausschalten" id="btn1" class="myButton_aktiv" style="width:184px;">ausschalten</a>

Bei "btn1Status=0;" so:

Code:

<a href="?einschalten" id="btn1" class="myButton" style="width:184px;">einschalten</a>

Und bei "btn1Status=00;" so (ohne href):

Code:

<div id="btn1" class="myButton_deaktiviert" style="width:184px;">einschalten</div>

"btn1Status=Wert;" ist jetzt nur ein Beispiel. Die Bezeichnung könnte auch "ButtonLichtStatus=Wert;" o.ä. heißen.

Kann denn dafür jQuery verwendet werden?

Wenn es nötig ist ja. Ich muss dann ja nur die jQuery.js einbinden oder? Also das im head-Bereich eintragen:

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>

kkapsner · 21. Sep. 2014

Kannst du denn das Format der status.txt ändern? JSON wäre da viel praktischer (und gescheite Werte wären da auch nett - sonst weiß man ja nach drei Wochen nicht mehr, was genau "00" bedeutet... ich würde das ja als "bin mal aufm Klo" deuten

).

#Sascha · 21. Sep. 2014

Die Formatierung lässt sich auch ändern, wenn es fürs Einlesen einfacher ist, könnte die txt auch so aussehen:

Code:

{
"btn1Status": 1,
"btn2Status": 0,
"btn3Status": 0,
"btn4Status": 0
}

...und gescheite Werte wären da auch nett - sonst weiß man ja nach drei Wochen nicht mehr, was genau "00" bedeutet...

Ich wollte die Werte kurz halten, deswegen "1" für "an" und "0" für "aus". "00" hat sich dann so auf die schnelle ergeben, könnte auch eine "2" o.ä. sein. Selbsterklärend wäre es aber immer noch nicht. Dazu müsste man z.B. "disabled" schreiben, was aber mehr Zeichen erfordert.

...ich würde das ja als "bin mal aufm Klo" deuten ).

miniA4kuser · 21. Sep. 2014

Und was hindert dich daran mehr Zeichen zu verwenden? In ein paar Wochen weißt du eher was disabled bedeutet, wie was 00 oder 2 bedeutet.

kkapsner · 21. Sep. 2014

#Sascha schrieb:
wenn es fürs Einlesen einfacher ist

Ja, ist viel einfacher. Dann kannst du den eingebauten JSON-Parser verwenden und musst dir nicht selbst einen schreiben.

#Sascha schrieb:
was aber mehr Zeichen erfordert

Du machst dir wirklich über 6 Bytes mehr Gedanken?

#Sascha · 22. Sep. 2014

Also gut, überredet :icon7:.
Dann werde ich es zu "on", "off" und "disabled" ändern.

XML als Format wäre übrigens auch möglich. Falls es noch mehr Vorteile bietet.
Bräuchte man für beide Formate jQuery oder lassen sich diese Formate auch ohne leicht benutzen?

kkapsner · 23. Sep. 2014

Beide kann man in modernen Browsern auch ohne jQuery leicht benutzen. Ich persönlich finde JSON praktischer.

Wobei ich AJAX nicht ohne Framework machen würde.

Scroll-Position merken bei mobile Browser (iPhone)

#Sascha

New member

j-l-n

Guest

#Sascha

New member

j-l-n

Guest

#Sascha

New member

kkapsner

Super Moderator

mikdoe

Moderator

#Sascha

New member

mikdoe

Moderator

#Sascha

New member

mikdoe

Moderator

#Sascha

New member

kkapsner

Super Moderator

#Sascha

New member

miniA4kuser

Lounge-Member

kkapsner

Super Moderator

#Sascha

New member

kkapsner

Super Moderator