Seite 1 von 2
#1 Scrollen von frank23 16.01.2008 13:48

avatar

Hallo Florian,

hast du eine Idee, wie man es realisieren könnte, dass wenn man irgendwo im Forum ein Thema anklickt oder einen Beitrag schreibt, dass man dann nicht immer automatisch wieder von oben nach unten scrollen muss?

Bei uns im Forum ist der Bereich obere Leiste ziemlich groß und somit muss man jedesmal, wenn man z.B. bei einem geschriebenen Beitrag auf Vorschau klickt, immer wieder nach unter scrollen, um wieder die Eingabe zu sehen.


Hier im Forum ist der obere Bereich klein gehalten und somit ist es nicht störend!

Gruß
Frank

http://125663.homepagemodules.de

#2 RE: Scrollen von florian-zier 16.01.2008 16:23

avatar
Das ist zu machen!


Dazu muss das Template Element "Neuen Beitrag schreiben" bearbeitet werden.

Nach der ersten Zeile:
{{preview==true.start}}

dieses JavaScript einfügen:
<script type="text/javascript">
function goto_vorschau() {
window.location.href='#vorschau'
}
</script>


In diese Zeile:
<tr><td class="ntit">&nbsp;Voransicht: So wird Ihr Beitrag aussehen. Bestätigen Sie mit speichern</td></tr>

nun den Anker einbauen, also die Stelle, an die gesprungen werden soll:
<tr><td class="ntit"><a name="vorschau"></a>&nbsp;Voransicht: So wird Ihr Beitrag aussehen. Bestätigen Sie mit speichern</td></tr>

Hier wurde der Anker vor der Vorschau eingefügt. Er kann an beliebiger Stelle gesetzt werden, ich finde es aber hier am sinnvollsten.
(<a name="vorschau"></a>)



Als letztes muss nur noch das Body-Tag im Template Element "Obere Leiste" angepasst werden,
damit die Funktion automatisch beim Seitenaufruf ausgeführt wird:
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">

wird zu:
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" onload="goto_vorschau()">

Body wird um onload ergänzt: onload="goto_vorschau()"
Falls der Styleswitcher schon eingebaut ist, müssen beide onload-Events durch ein Komma getrennt werden, also: onload="switcher_on(),goto_vorschau()"



Das müsste funktionieren!
Ich denke, ich baue es auch hier im Forum ein. Gute Idee!

Viel Spaß damit!
#3 RE: Scrollen von frank23 16.01.2008 22:24

avatar
Hallo Florian,

vielen Dank für deine Hilfe bei meinem Template. Es funktioniert super bei mir

Ist es auch möglich, diese Funktion einzubauen, wenn man in den Themen der Foren klickt. z.B. scroll ich im Forum ganz nach unten und klicke dann auf ein Thema, muss man anschließend wieder nach unten scrollen!
Dies ist auch nur dann nervig, wenn mann halt die oberen Bereich vom Forum ziemlich groß gehalten hat.

Gruß
Frank
#4 RE: Scrollen von Wolfgang 17.01.2008 11:40

avatar

Hallo Florian,
du hast ein interessantes und hilfreiches Forum.
Gefällt mir!

Diese Funktion habe ich bei mir auch einbebaut.
Einfach genial.

Ich habe die Positionen etwas verändert, weil ich das "Beitragfeld ohne Vorschau" auch an der richtigen Stelle haben wollte.


1. Das Script wird ganz oben platziert:

<script type="text/javascript">
function goto_vorschau() {
window.location.href='#vorschau'
}
</script>

{{preview==true.start}}

2. Der erste Anker kann da bleiben wo er war. Den Zweiten hinter dem großen Scipt (quote) plazieren.

var reply_quote = "{{reply_quote}}";
</script>

<a name="vorschau"></a>



Gruß
Wolfgang



#5 RE: Scrollen von florian-zier 17.01.2008 11:51

avatar

Klasse, dass da so was gutes rausgekommen ist!

@frank23:

In Antwort auf:
Ist es auch möglich, diese Funktion einzubauen, wenn man in den Themen der Foren klickt. z.B. scroll ich im Forum ganz nach unten und klicke dann auf ein Thema, muss man anschließend wieder nach unten scrollen!
Dies ist auch nur dann nervig, wenn mann halt die oberen Bereich vom Forum ziemlich groß gehalten hat.

Bei Gelegenheit schau ich mal nach, wie man das am besten umsetzen könnte.

#6 RE: Scrollen von florian-zier 17.01.2008 16:42

avatar

Zitat von frank23
Ist es auch möglich, diese Funktion einzubauen, wenn man in den Themen der Foren klickt. z.B. scroll ich im Forum ganz nach unten und klicke dann auf ein Thema, muss man anschließend wieder nach unten scrollen!
Dies ist auch nur dann nervig, wenn mann halt die oberen Bereich vom Forum ziemlich groß gehalten hat.


Erste Tests haben gezeigt, dass es nicht ohne Weiteres funktionieren wird, wenn überhaupt!
Falls es doch noch irgendwann gehen sollte, werde ich es hier schreiben.

#7 RE: Scrollen von frank23 17.01.2008 17:44

avatar

Zitat von Florian-zier
Erste Tests haben gezeigt, dass es nicht ohne Weiteres funktionieren wird, wenn überhaupt!
Falls es doch noch irgendwann gehen sollte, werde ich es hier schreiben.


Ok, ich werde hier eh öfters vorbeischauen, da deine Erklärungen wirklich einfach und gut beschrieben sind!
Ich habe in unserem Forum den oberen Bereich jetzt kleiner gehalten und die Werbung in die Beiträge gepackt, somit ist es jetzt einigermaßen in Ordnung.

#8 RE: Scrollen von Wolfgang 18.01.2008 16:38

avatar


Hallo zusammen,
ich habe das "gezielte Springen" in meinem Forum für viele Elemente des Template umgesetzt.
Bei mir funktioniert es!
Oft sind es auch andere Vorraussetzungen, warum die Dinge nicht so laufen, wie sie sollen.

Ich brauche da Euer Feedback.
Könnt Ihr bei mir reinschauen, ob es bei euch funktioniert?
Gezieltes Springen im gesamten Forum

Danke im Voraus
Gruß
Wolfgang


#9 RE: Scrollen von frank23 18.01.2008 17:26

avatar

Hallo Wolfgang,

habe gerade mal einige Themen bei dir angeschaut und es klappte mit beiden Browsern IE und FF einwandfrei. Es war zwar eine kleine Verzögerung, das heisst erst war das Fenster ganz oben und mit einer kleinen Verzögerung brauchte ich anschließend nicht mehr nach unten srollen!

Werde es heut Abend noch mal mit Opera testen!

Gruß
Frank

#10 RE: Scrollen von florian-zier 18.01.2008 19:03

avatar
Bei mir funktioniert es auch, sowohl im IE als auch im Firefox.

Das die Dinge nicht immer so laufen, wie sie sollten, habe ich leider schon zu oft bemerken müssen.

Es kam z.B. auch schon vor, dass ich zwei verschiedene JavaScripte einzeln angeschaltet haben konnte, dass sie aber beide zusammen nicht funktionieren.
Normalerweise würde in meinem Forum hier ein Text in der Statusleiste durchlaufen. Das Skript ist noch da, es wird aber ein Fehler ausgegeben.
(Falls es bei jemandem doch funktionieren sollte, bitte melden, evtl. mit Screenshot)
#11 RE: Scrollen von Wolfgang 22.01.2008 13:26

avatar

Hallo,
habe ein kleines Problem festgestellt!

In meinem Forum wird jetzt bei jeden Seitenaufruf "ziel#" mit an die Adresse angefügt.

Nachteil:
1. Wenn man die Adresse kopiert, kann FF sie nicht aufrufen.
2. Bei Email-Benachrichtigungen wird erst das Thema und anschließend ganz nach oben gescrollt.

Liegt das daran, das ich "<a name="ziel"></a>" immer im Template-Element ganz oben eingefügt habe?

Oder woran kann es liegen?
Gibt es hier eine Lösung?

PS.: Wie ich sehe, ist das auch hier im Forum der Fall

Gruß
Wolfgang

#12 RE: Scrollen von florian-zier 22.01.2008 13:41

avatar
Dafür habe ich folgende Erklärung:

Solange das Skript unter {{preview==true.start}} eingegeben wird, wird es nur dann ausgeführt, wenn eine Vorschau geöffnet wird.

Wenn es nun darüber oder im Template-Element obere Leiste steht, dann wird es immer ausgeführt. Wenn kein Anker vorhanden ist, wird zwar nicht gesprungen, aber der Anker soll trotzdem aufgerufen werden.

Ich kann die URL ohne Probleme kopieren und in einem neuen Tab/Fenster (beide Browser) aufrufen.
Das einzige was dann nicht mehr geht, ist die Seite durch erneutes Abschicken zu aktualisieren.
Das kommt daher, dass der Browser, sobald ein Anker in der URL angegeben wird, nicht die Seite neu aufrufen, sondern nur zum Anker springen "will".


Und was wohl leider stimmt:
Wenn ein Beitrag direkt aufgerufen wird (z.B. nach edit), dann wird sofort danach nach oben gescrollt.
Das ist in der Tat ein wenig ärgerlich.


Das Skript muss dann eben so eingefügt werden, dass es nicht auf jeder Seite sofort ausgeführt wird.
In diesem Beispiel hier dann nur, wenn eine Vorschau angezeigt wird.
#13 RE: Scrollen von Wolfgang 23.01.2008 00:31

avatar

Hallo Florian,
ich habe mir da ein paar Gedanken gemacht, bekomme es aber nicht hin.

Zu Nachteil 1:
Wenn die Seite mit der Sprungmarke "#ziel" aufgerufen wird, kann mann die Sprungmarke nachträglich irgendwie löschen? >>> clear location "#ziel"

Zu Nachteil 2:
Könnte man mit if-Bedingungen nicht eine Lösung finden?
Wenn eine Benachrichtigungsmail geschickt wird, wird auch eine Sprungmarke gesetzt. Nicht "#ziel" sondern z.B. "#msg304".

Knüpft man eine Bedingung ein, sollte es dann nicht gehen?
Wenn Sprungmarke "msp..." >>> kein window. location.href='#ziel'


<script type="text/javascript">
function goto_ziel() {

if (#msg ..)

window. location.href='#ziel'

clear .... (../.html#ziel)
}
</script>


Kannst Du das hinbekommen?


Gruß
Wolfgang

#14 RE: Scrollen von florian-zier 23.01.2008 19:47

avatar
Zu Nachteil 1:
Nach meinem Kenntnisstand geht das nicht. Die Adresszeile ändert sich nur bei einem neuen Aufruf einer Seite. Aber Teile daraus zu entfernen, ohne eine Seite neu zu laden, geht nicht.
Neue Seite laden kommt nicht in Frage, da man sich ja sonst den Sprung zum Anker hätte sparen können.
Eine Veränderung an der Adresszeile ist nicht zulässig, irgendwo muss noch ein Stück Sicherheit gewährt sein. Wenn man alles mit JavaScript machen könnte, wäre die Fülle der Sicherheitslecks wohl undenkbar. Außerdem könnte jeder so eine andere Domain wie etwa die von Banken o.ä. anzeigen lassen. Man würde den Betrugsversuch gar nicht bemerken. Wenn es aus irgendwie doch möglich wäre, habe ich keine Ahnung wie man es machen sollte.

Zu Nachteil 2:
Problem sollte gelöst sein!
Die Funktion sollte wieder in den Head-Bereich eingefügt und per onload= (oder nach dieser Anleitung) aufgerufen werden. Ihr Name ist in diesem Fall goto_anker() (kann angepasst werden)

<script type="text/javascript" language="JavaScript">
function goto_anker() {
if (window.location.hash.slice(0, 4) != '#msg') {
window.location.hash = '#ziel';
}
}
</script>


Das Skript lest die ersten vier Stellen (# gehört dazu) des Ankers aus. Sind diese nicht schon mit #msg (danach folgt Nummer) belegt, wird der Anker #ziel gesetzt.
slice(0, 4) gibt an, dass die erste Stelle bis zur dritten ausgelesen wird. Die erste Zahl ist das erste auszulesende Zeichen, die zweite ist das erste Zeichen, das nicht mehr ausgelesen wird. Es wird bei 0 angefangen zu zählen.
Hash gibt den aktuell verwendeten Anker aus.

Damit andere bereits vorgegebene Anker auch nicht ersetzt werden, muss das Skript mit ein oder mehreren else if erweitert werden:
<script type="text/javascript" language="JavaScript">
function goto_anker() {
if (window.location.hash.slice(0, 4) != '#msg') {
window.location.hash = '#ziel';
}
else if (window.location.hash.slice(0, 9) != '#beispiel') {
window.location.hash = '#ziel';
}
}
</script>


Ich bitte hiermit gleichzeitig darum, mir evtl. neu-entdeckte Anker mitzuteilen, damit ich diese auch vor der Ersetzung im Skript ausschließen kann.
#15 RE: Scrollen von florian-zier 24.01.2008 16:01

avatar
Alle Unfeinheiten sind behoben!

Warum einfach, wenn's auch kompliziert geht?

Das Skript, das in den Head-Bereich eingefügt werden muss:
<script type="text/javascript">
function goto_anker() {
if (window.location.hash.slice(0, 4) != '#msg') {
document.all.ziel.scrollIntoView(true);
}
}</script>

Wenn der Ankername geändert wird, muss er auch im Skript verändert werden:
document.all.ziel.scrollIntoView(true);


Die Position an die gescrollt werden soll durch einen Anker angeben.
<a name="ziel"></a>

Der Anker wird wieder an die gewünschte Position gesetzt. Er kann auf jeder Seite, auf der an eine bestimmte Stelle gescrollt werden soll, eingefügt werden.

Statt eines Ankers könnte man nun aber auch ein anderes Objekt mit dem Namen oder der ID ziel benennen.

Der Anker kann auch über die Eingabe in der Adresszeile angesprungen werden.
Auch wenn dies nun überflüssig ist, da ja schon automatisch hingescrollt wird. Man kann ihn als User dann eben noch wahrnehemen.

Ein kleiner Vorteil des Ankers ist, dass wenn man auf eine Foren-Seite verlinkt, auch User ohne JavaScript über die URL an eine Stelle befördert werden können, auch wenn JavaScript nicht aktiviert ist.


Auch hier gilt:
- Onload-Befehl muss angegeben werden (AnleitungHier wird erklärt, wie man JavaScript-Funktionen automatisch beim Seitenaufruf ablaufen lässt.)
- Es wird auf den evtl. vorhandenen Anker #msg geprüft.
- Weitere Anker können mit else if gesichert werden.

Der Unterschied:
Es wird nicht über die Adresszeile ein Anker angesprungen, sondern es wird ein bestimmtes Objekt (hier der Anker) in den Sichtbereich gescrollt.
Die Adresszeile verändert sich somit gar nicht. Das Problem den Ankernamen aus der Adresszeile zu entfernen hat sich somit gelöst.


Achtung: Ein zweiter Name oder eine ID mit zielziel ist der Name dieses Beispiels.
Bei Wahl eines anderen Namens, darf natürlich dieser nur einmal verwendet werden!
<div id="ziel">...</div> ist z.B. dann nicht mehr möglich!
darf auf der gleichen Seite nicht vergeben werden!!!


Ich habe im IE, Firefox und Opera erfolgreiche Tests durchgeführt!
#16 RE: Scrollen von Wolfgang 24.01.2008 19:26

avatar


Hallo Florian.
Absolut genial die Lösung!!!

Bei der alten Version wurde auch nach oben, bis zum Anfang gescrollt, wenn man eine Antwort geschrieben hat.
War ungünstig.
Man mußte wieder nach unten Scrollen, um seinen eben geschriebenen Beitrag zu lesen.

Aber mit Deiner jetztigen Lösung >>> Perfekt und dazu auch noch sehr klein.
Klein, aber riesig groß in der Funktion!!!


Danke
Gruß
Wolfgang

#17 RE: Scrollen von Wolfgang 25.01.2008 23:55

avatar

Hallo Florian,
nicht das ich mit dem "Doctype" nerve.

Wenn ich den folgnenden "Doctype" verwende, funktioniert die Funktion nicht im FireFox.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Wo liegt hier das Problem?
An dieser Zeile? "document.all"
Der Browser "Safari" soll wohl "document.all" nicht umsetzen können.

Auch hier. Wenn es keine Lösung gibt, werde ich den "Doctype" wohl herausnehmen!

Gruß
Wolfgang
#18 RE: Scrollen von Wolfgang 26.01.2008 02:33

avatar


Hallo Florian,

wie kann man folgendes Script vereinfachen?
Kannst Du mir da helfen?
Es soll ein verborgener Text geöffnen werden und an eine vorgegebene Stelle gescrollt werden.


<head>

<script language="JavaScript" type="text/javascript">
<!--
function clip (id) {
if (document.getElementById("span_"+id).style.display == 'none') {
document.getElementById("span_"+id).style.display = "block"
}
else {
document.getElementById("span_"+id).style.display = "none"
}}
//-->
</script>


<script type="text/javascript">
function Test1() {
document.all.marke_01.scrollIntoView(true);
}
function Test2() {
document.all.marke_02.scrollIntoView(true);
}
</script>

</head>
<body>


<br><br><br><br><br><br><br><br><br>

<a id="marke_01">Ein Text1</a>
<br><br>
<a id="marke_02">Ein Text2</a>
<br><br>
<a href="javascript:clip(1);Test1()">Test1</a>
<br><br>
<a href="javascript:clip(2);Test2()">Test2</a>

<br><br><br>

<div id="span_1" style="display:none">
TEST1
</div>
<div id="span_2" style="display:none">
TEST2
</div>





Es sollte ungefähr wie folgt aussehen, aber ich bekomme es einfach nicht so hin, dass es in allen 4 Browsern läuft.
Irgendwie stimmt das Script nicht.


<head>

<script language="JavaScript" type="text/javascript">
<!--
function clip (id) {
if (document.getElementById("span_"+id).style.display == 'none') {
document.getElementById("span_"+id).style.display = "block"
}
else {
document.getElementById("span_"+id).style.display = "none"
}}
//-->
</script>


<script type="text/javascript">
function Test() {
document.all.getElementsById("marke_" +id).scrollIntoView(true);
}
</script>

</head>
<body>


<br><br><br><br><br><br><br><br><br>

<a id="marke_01">Ein Text1</a>
<br><br>
<a id="marke_02">Ein Text2</a>
<br><br>
<a href="javascript:clip(1);Test(1)">Test1</a>
<br><br>
<a href="javascript:clip(2);Test(2)">Test2</a>

<br><br><br>

<div id="span_1" style="display:none">
TEST1
</div>
<div id="span_2" style="display:none">
TEST2
</div>



Vielleicht ist es ja auch ganz einfach.

Danke im Voraus
Wolfgang


#19 RE: Scrollen von florian-zier 26.01.2008 17:06

avatar

Beim Doctype gleiche Antwort wie hier.


Im Skript sind ein paar kleine Fehler, die der Browser aber normalerweise trotzdem richtig interpretiert.

Hinter = "block" und = "none" fehlen Semikolons.

Im vereinfachten Skript steht: getElementsById("marke_" +id)
Es müsste heißen getElementById("marke_" +id) (ohne "s") bzw. getElementsByName("marke_" +id)


Das Problem ist, dass es im Moment nur mit document.all.id-name.usw funktioniert. Hier kann kein Parameter übergeben werden.
document.getElementByID(id-name).usw, die ID als Parameter übergeben funktioniert nur so. Dann streikt aber das scrollIntoView


Eine Lösung des Problems kann noch eine Weile dauern.

#20 RE: Scrollen von florian-zier 26.01.2008 19:24

avatar
Die Lösung ist wohl ziemlich Trivial!


Das Skript ging nicht, weil die Marken mit 01, 02, ... nummeriert waren. Als Parameter wurde aber 1, 2, ... übergeben.
Es müssen einfache Anführunszeichen (') verwendet werden, um die Null auch zu übergeben.


Hier das funktionierende Skript:
<script language="JavaScript" type="text/javascript">
function clip (id) {
if (document.getElementById("span_"+id).style.display == 'none') {
document.getElementById("span_"+id).style.display = "block";
}
else {
document.getElementById("span_"+id).style.display = "none";
}}

// Sprung zu Stelle
function marke(nr) {
document.getElementById("marke_"+nr).scrollIntoView(true);
}
</script>



Die fehlenden Semikolons sind in diesem Skript schon ergänzt.


Aufruf durch:
<a href="javascript:clip(1), marke('01');">Aufklapp & Sprung</a>



Der Parameter in clip() kann optional auch in 'Zahl' gesetzt werden: clip('1')

Sprungmarken:
<a id="marke_01">Textstelle</a>





Allerdings wird so immer zu einer Sprungmarke gesprungen, auch beim Zuklappen.
Ich empfehle deshalb, alles in eine Funktion zu packen und nur zur Sprungmarke zu springen, wenn etwas aufgeklapp wird.
Trotzdem habe ich nochmal die Möglichkeit eingefügt, bei allen Auf- und Zu-Klappaktionen zu springen. Es muss nur der Kommentar entfernt werden.
<script language="JavaScript" type="text/javascript">
function clip_marke(id,nr) {
if (document.getElementById("span_"+id).style.display == 'none') {
document.getElementById("span_"+id).style.display = "block";
document.getElementById("marke_"+nr).scrollIntoView(true);
}
else {
document.getElementById("span_"+id).style.display = "none";

// Kommentar entfernen, um auch beim Zuklappen einen Sprung durchzuführen.
// document.getElementById("marke_"+nr).scrollIntoView(true);
}
}
</script>





Aufruf durch:
<a href="javascript:clip_marke('1','01');">Aufklapp & Sprung</a>




Sprungmarken:
<a id="marke_01">Textstelle</a>





Have Fun!
Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz