✔ nach refresh scrollto()

  • Themenstarter Themenstarter Comenius
  • Beginndatum Beginndatum
C

Comenius

Heyyaaa liebe - mir so fremde - Javascript Gemeinde :)

Ich habe ein Layer in dem ein haufen verlinkte Bilder sind.
Man kann wunderbar hin- und herscrollen. (manche werden den Witz verstehen)
Klickt man auf ein Bild welches zufälligerweise etwas weiter rechts liegt, wird die Seite neu geladen und der Scrollbalken hüpft zum Anfang (ganz nach links) zurück.

Ich habe ein wenig herumgesucht und bin auch fündig geworden.
Leider kann ich es selbst nicht richtig anpassen:

Code: 
echo "<div class=\"Bilderreihe\" onclick=\"alert(this.scrollLeft)\ onload="this.scrollTo(scrollLeft)"">\n";

Immerhin habe ich es geschafft, mir die Position der Scrollbar anzeigen zu lassen :p
Das mit onload ist nur mein weiterführender Gedanke gewesen, was allerdings nicht funktionieren kann, da scrollLeft in keiner Variable zwischengespeichert wurde.

Soweit kann ich aber leider nur denken, nicht selbst schreiben :mad:

Ich denke nicht, dass dies mit großem Aufwand verbunden ist und würde mich echt tierisch freuen, wenn mir bei meinem Problem jemand behilflich sein könnte.

Gruss

Captain.Chaos.Javascript
 
Zuletzt bearbeitet von einem Moderator:
Du könntest doch die Scrollposition vor dem Refresh in einem Cookie speichern und danach wieder auslesen, um an die richtige Position zu springen.

Ansonsten könntest du den Refresh evtl. auch umgehen und durch ein Ajax-Request ersetzen, was aber aufwändiger sowohl im JS- als auch im PHP-Script wäre.

Schönen Tag noch
Master of Chess

PS: ersetz' mal
PHP: 
echo "<div class=\"Bilderreihe\" onclick=\"alert(this.scrollLeft)\ onload="this.scrollTo(scrollLeft)"">\n";
durch
PHP: 
echo "<div class=\"Bilderreihe\" onclick=\"alert(this.scrollLeft)\" onload=\"this.scrollTo(scrollLeft)\">\n";
 
Jupp, hast Recht, da habe ich die "\" vergessen...

Hört sich alles vielversprechend an, aber gucke doch mal über mein Avatar :confused:

Danke erstmal derweil

Gruss
Commi

Edit: könnte ich die Variable mit der Weite des Scrollbalkens nicht in ne session knallen, oder per URL übergeben um anschließend mit Javascript Scrollto() auszuführen?
 
Zuletzt bearbeitet von einem Moderator:
Sorry, meinte "über" meinem Avatar. War wohl doch schon etwas zu spät :)

Aber wegen meinem Anliegen: Ist da wieder ein 300 Kb Script notwendig, oder reichen dieses mal 2 - 3 Zeilen?

Falls es zu umfangreich ist überlege ich mir das wahrscheinlich nochmal gründlich, denn um mich derart in so eine Javascript-Sache hineinzusteigern, fehlt mir leider die Zeit.

Aber bis jetzt hat noch immer jemand von euch eine Lösung oder Tipp gehabt ;)

Gruss
Commi
 
Zuletzt bearbeitet von einem Moderator:
Hi,

Du kannst den jeweiligen Scrollwert an die URL anhängen. Im onload-Event liest Du diesen Wert
aus und setzt die Scrollposition im Element.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" >
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >

<script type="text/javascript">
<!--
window.onload = function(){
  // Falls etwas mit der URL übermittelt wurde
  if(window.location.search != ""){
    document.getElementById("scrollElem").scrollLeft = window.location.search.substring(1, window.location.search.length);
  }

  // URL-Parameter entfernen
  strURL = window.location.href.replace(/\?.+/, "");
}
//-->
</script>

</head>
<body>
<div id="scrollElem" style="width: 300px; height: 150px; overflow: scroll; border: 1px solid #ccc; white-space: nowrap;">
	<a href="datei.html" onclick="window.location = strURL+'?'+document.getElementById('scrollElem').scrollLeft; return false;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
	<a href="datei.html" onclick="window.location = strURL+'?'+document.getElementById('scrollElem').scrollLeft; return false;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
	<a href="datei.html" onclick="window.location = strURL+'?'+document.getElementById('scrollElem').scrollLeft; return false;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
	<a href="datei.html" onclick="window.location = strURL+'?'+document.getElementById('scrollElem').scrollLeft; return false;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
	<a href="datei.html" onclick="window.location = strURL+'?'+document.getElementById('scrollElem').scrollLeft; return false;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
</div>
</body>
</html>
Vielleicht kannst Du damit etwas anfangen.

Ciao
Quaese
 
Hi,

danke für dein Script, funktioniert super.
Leider wird in der URL die Scrollbar-Position nicht gelöscht.

Spielt aber eigentlich keine Rolle, da meine - falls ich dein Script verwenden würde - Links nicht mehr funktionieren...

Ich habe total vergessen, dass ich den einzelnen Bildern schon eine ID über die URL mit auf den Weg gebe.

Grmpf....

Könnte man die Position des Scrollbalkens auch anders zwischenspeichern?
Habe mir das mit der Session überlegt, dass würde den Arbeitsaufwand wahrscheinlich nur noch mehr vergrößern, als vermutlich nötig.

Ich werde mich mal weiter schlau machen und noch ein wenig experimentieren.

Falls noch jemand einen Tipp hat, nur her damit :)

Danke derweil

Gruss
Commi

Edit:

Habe nochmal etwas gegoogled und herausgefunden, dass die Variante mit der URL wohl am besten ist... Ich versuche mal, mit PHP etwas an der URL herumzuschnippeln, damit ich weiterhin meine Einträge - nach Klick auf ein Bild - bekomme und das Javascript trotzdem funktioniert.
 
Zuletzt bearbeitet von einem Moderator:
Hi,

solange sich alles in demselben Fester abspielt, dh. das Ziel des Links ist das gleiche Fenster, kannst Du mal
versuchen, die name-Eigenschaft des window-Objektes zu verwenden.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
window.onload = function(){
  if(window.name != "")
    document.getElementById("scrollElem").scrollLeft = window.name;
}
//-->
</script>

</head>
<body>
<div id="scrollElem" style="width: 300px; height: 150px; overflow: scroll; border: 1px solid #ccc; white-space: nowrap;">
	<a href="datei.html" onclick="window.name = document.getElementById('scrollElem').scrollLeft;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
	<a href="datei.html" onclick="window.name = document.getElementById('scrollElem').scrollLeft;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
	<a href="datei.html" onclick="window.name = document.getElementById('scrollElem').scrollLeft;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
	<a href="datei.html" onclick="window.name = document.getElementById('scrollElem').scrollLeft;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
	<a href="datei.html" onclick="window.name = document.getElementById('scrollElem').scrollLeft;"><img src="bild.gif" width="120" height="120" border="0" alt=""></a>
</div>
</body>
</html>
Im Firefox und IE funktioniert es. Andere Browser kann ich im Augenblick nicht testen.

Ansonsten bliebe noch die Möglichkeit über Cookies. Da wäre der Aufwand jedoch um einiges höher.

Ciao
Quaese
 
Hrhr, schade dass du mich gerade nicht sehen konntest...

Mein Grinsen ging von einer Ecke des Raums, bis in die andere :)

Perfekt würde ich sagen. Kann mir also weitere - vermutlich erfolglose -Versuche ersparen.

Supidupi, danke dir ;)

Schönen Abend noch

Gruss
Commi
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück