Focus auf Element setzen

[Pjotre]

Hi Leute,

ich versuche mich gerade ein wenig mit Javascript und möchte, dass der Bildschirmausschnitt mein seletiertes Element am ANFANG des Bildausschnittes darstellt. Ich schaffe es zwar, dass das element selektiert wird, da mein Element jedoch ziemlich weit "unten" ist, wird es nur ans ENDE der Bildschrimausgabe gescrollt, sodass es gerade so zu sehen ist.

Bisher habe ich es folgendermaßen realisiert:
[...
function SetzeFocus()
        {
        var ElementID = "focus";
        document.getElementById(ElementID).focus();
        document.getElementById(ElementID).select();
        }
...]

Wie kann ich es schaffen, dass entsprechend weit herunter gescrollt wird, dass das Element zumindest mittig, oder gar oben im Bild ausgegeben wird?

Vielen Dank für Eure Hilfe und shcones Wochenende

Pjotre

[ChrisB]

Hi,

Wie kann ich es schaffen, dass entsprechend weit herunter gescrollt wird, dass das Element zumindest mittig, oder gar oben im Bild ausgegeben wird?

http://de.selfhtml.org/javascript/objekte/all.htm#scroll_into_view

Oder, da das Element ja eine ID hat: http://de.selfhtml.org/javascript/objekte/location.htm#hash

MfG ChrisB

[Pjotre]

Hallo ChrisB,

vielen Dank, mit dem ersten Link konnte ich was anfangen.
Den zweiten Link habe ich nicht verstanden. Da geht es doch um ein Alert-Fenster.

Wie dem auch sei, ich habe es nun so weit geschafft, dass das Element am oberen Bildschirmrand angezeigt wird - was aber auch nicht optimal aussieht.

Schöner wäre es, wenn ich das Element 100px unter dem oberen Bildschirmrand ausgegeben bekomme:
[...
function SetzeFocus()
         {
         var ElementID = "focus";
         document.getElementById(ElementID).focus();
         document.getElementById(ElementID).select();
         document.getElementById(ElementID).scrollIntoView(true);
         }
...]
Meine erste Idee war, dass ich die Zeile
         window.scrollTo(0,-100);
unter dem scrollIntoView einfühge, doch dann springt das Bild wieder nach ganz oben :(

Leider stand darüber auch nichts weiter unter dem ersten Link.

Hast Du da vielleicht noch einen Link für mich, der das Thema abdeckt?

Vielen Dank schonmal für die Hilfe

Gruß Pjotre

[ChrisB]

Hi,

Den zweiten Link habe ich nicht verstanden. Da geht es doch um ein Alert-Fenster.

D'oh/Seufz ... das ist doch lediglich eine Beispielanwendung dort ...
Wenn du die Beschreibung mal aufmerksam gelesen hättest - „Wenn Sie diese Angabe ändern, bewirken Sie einen Verweis innerhalb der Datei zu dem angegebenen Anker.“

Meine erste Idee war, dass ich die Zeile
         window.scrollTo(0,-100);
unter dem scrollIntoView einfühge, doch dann springt das Bild wieder nach ganz oben :(

Muss es ja auch, weil ganz oben Scrollposition 0 ist, und deine -100 logischerweise dazu werden, weil noch weiter oben als ganz oben nun mal nicht geht.

Leider stand darüber auch nichts weiter unter dem ersten Link.

scrollTo hat noch einen Verwandten ...

Hast Du da vielleicht noch einen Link für mich, der das Thema abdeckt?

Hast du vielleicht Lust, auch mal ein bisschen selber mitzudenken?

MfG ChrisB

[Pjotre]

also ich habe jetzt scrolltop gefunden, doch mit der Zeile:
[...
document.getElementById(ElementID).scrolltop = 100;
...]
komme ich auch nicht weiter...
Ebenso konnte ich mit scrollby nicht viel erreichen

und so viel mehr habe ich da nicht wirklich gefunden.
Sorry, aber wie gesagt betrete ich mit Javascript Neuland.

[ChrisB]

Hi,

Ebenso konnte ich mit scrollby nicht viel erreichen

</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[Pjotre]

</hilfe/charta.htm#tipps-fuer-fragende>

außer einen Rechtschreibfehler habe ich da auch keine Lösung für mein Problem gefunden.

Aber Danke für den Ansatz - hat mir nur leider nicht geholfen.

1.) Ich habe sowohl auf selfhtml als auch im Netz nach einer Lösung für mein Problem gesucht.
2.) Ich habe meine Problem ausführlich und nachvollziehbar erklärt
3.) Ich habe auch ein Beispiel in Form meines Scriptes gepostet
4.) Ich habe niemanden beleidigt angegriffen oder habe eingeschnappt reagiert
6.) Ich habe mich für die Hilfe und auch den Erfolg bedankt bzw. bestätigt
5.) Ich habe kein Doppelposting getätigt und ich habe nach wie vor ein Anliegen

Die Tatsache mir diesen Link "unkommentiert" vorzusetzen empfinde ich als sehr überheblich und halte es nicht für begründet bzw. gerechtfertigt.

cu

[ChrisB]

Hi,

3.) Ich habe auch ein Beispiel in Form meines Scriptes gepostet

Was glaubst, wofür ich die Zeile

Ebenso konnte ich mit scrollby nicht viel erreichen

extra zitiert hatte ...?

Zeig uns, *was* *genau* du damit probiert hast.
Und beschreibe, was du davon erwartest, und was stattdessen passiert.

Die Tatsache mir diesen Link "unkommentiert" vorzusetzen empfinde ich als sehr überheblich und halte es nicht für begründet bzw. gerechtfertigt.

Und ich finde es ärgerlich, dass ich dir jetzt noch mal ausführlich erklären muss, wie eine vernünftige Problembeschreibung aussieht, statt „nicht viel erreicht“ ...

MfG ChrisB

[Pjotre]

Hallo ChrisB,

Zeig uns, *was* *genau* du damit probiert hast.
Und beschreibe, was du davon erwartest, und was stattdessen passiert.

ich habe es versucht mit der Befehlszeile:

function SetzeFocus()
         {
         var ElementID = "focus";
         document.getElementById(ElementID).focus();
         document.getElementById(ElementID).select();
         document.getElementById(ElementID).scrollIntoView(true);
         document.getElementById(ElementID).window.scrollBy(0,-100);
         }

Mit der ersten Zeile speicher ich "focus" in eine Variable mit dem NAmen ElementID
Mit der der zweiten Zeile setze ich den focus auf mein Element
Mit der dritten Zeile selektiere ich Mein Element
Mit der vierten Zeile wird das Element am Anfang der Bildausgabe gesetzt
und mit der letzten Zeile spreche ich das Element an und möchte die Y-Achse (vertikal) um 100px zurück zählen.
Ich verspreche mir damit, dass bevor mein Element ausgegeben wird, 100px ausgegeben werden, sofern es vor diesem besagten Element entsprechend viel Ausgabe gibt.

Da nach wie vor Mein Element bei einem Testversuch weiterhin ganz oben ausgegeben wird, habe ich nochmal die Zeile wie folgt getestet:

document.getElementById(ElementID).scrollBy(0,-100);

Aber auch mit dieser Befehlszeile bleibt weiterhin mein Element ganz oben.

[ChrisB]

Hi,

Aber auch mit dieser Befehlszeile bleibt weiterhin mein Element ganz oben.

Dann schaust du jetzt bitte mal in die JavaScript-Fehlerkonsole deines Browsers.

MfG ChrisB

[Pjotre]

Dann schaust du jetzt bitte mal in die JavaScript-Fehlerkonsole deines Browsers.

okay, da werden jetzt 2 Fehlermeldungen ausgegeben, die allerding beide nichts mit dem aktuellen Thema zu tun haben. Dennoch sollten die vorerst behoben werden.

Die erste Meldung lautet:
'document.getElementById(...)' ist Null oder kein Objekt

Wenn ich da drauf klicke wird mein Curser auf der linken Seite (IE Fehlerkonsole) auf folgenden Punkt gesetzt:
[...
<a name="ontop"><div style="float:left;width:100%;height:1px;"></div></a>
...]

Da muss ich wohl nochmal ein wenig ausholen und ein paar Hintergrundinformationen geben:

Auf der Seite werden ca. 200 Gesellschaften alphabetisch ausgegeben. Bovor diese Gesellschaften ausgegeben werden, gebe ich die 26 Buchstaben das Alphabets oben einmal quer aus, sodass der User mit Klick auf einen Buchstaben entsprechend zu den Gesellschaften "springen" kann. Das habe ich folgendermaßen innerhalb einer 26ger Schleife realisiert:
[...
<a class=jumper href="#$abc"><div style="width:2%;height:25px;text-align:center;">$abc</div></a>
...]
Bei den Gesellschaften sieht es dann so aus:
[...
<a name="$abc_link"><font class=stichwort>$g_name</font>
...]
Bei den Gesellschaften habe ich auch einen Link angebrecht, der den User wieder zurückspringen läßt, zum Anfang der Seite:
[...
<a href="#ontop"><img src="../gfx/pfeil-oben_mini.gif" title="Zum Anfang der Seite springen" border="0"></a>
...]
und jetzt sind wir bei der obigen Fehlermeldung angekommen:
[...
<a name="ontop"><div style="float:left;width:100%;height:1px;"></div></a>
...]
Dieses Div-Element erstreckt sich noch vor den einzelnen Bcuhstaben ganz oben auf der Seite.

Ist da jetzt en Fehler drin? - Oder warum meckert da die Konsole?

Vielen Dank für die Geduld

BEsten Gruß Pjotre

[ChrisB]

Hi,

Dann schaust du jetzt bitte mal in die JavaScript-Fehlerkonsole deines Browsers.

okay, da werden jetzt 2 Fehlermeldungen ausgegeben, die allerding beide nichts mit dem aktuellen Thema zu tun haben.

Der Code, den du gezeigt hast, dürfte aber ebenfalls Fehlermeldungen generieren. Natürlich muss er dazu erst mal zur Ausführung kommen, was ggf. nicht der Fall ist, wenn vorher bereits Fehler auftreten und zu Scriptabbrüchen führen.

Die erste Meldung lautet:
'document.getElementById(...)' ist Null oder kein Objekt

Wenn ich da drauf klicke wird mein Curser auf der linken Seite (IE Fehlerkonsole) auf folgenden Punkt gesetzt:
[...
<a name="ontop"><div style="float:left;width:100%;height:1px;"></div></a>
...]

Das ist nicht besonders hilfreich, um den Fehler zu finden.
Zum Testen empfiehlt sich ein etwas gesprächigerer Browser, bspw. Firefox, idealerweise auch mit Firebug.

Das habe ich folgendermaßen innerhalb einer 26ger Schleife realisiert:
[...
<a class=jumper href="#$abc"><div style="width:2%;height:25px;text-align:center;">$abc</div></a>

Erst in HTML5 darf A DIV-Elemente als Nachfahren haben, sonst ist das ein Fehler.
Und wozu überhaupt das DIV-Element? Formatiere gleich den Link wie gewünscht.

<a name="$abc_link"><font class=stichwort>$g_name</font>
...]

Für Formatierung solltest du CSS nutzen, nicht veraltete Elemente wie FONT.

MfG ChrisB

[Pjotre]

Hi ChrisB,
Ich muss mich jetzt erstmal mit dieser Konsole auseinander setzen.
Scheint etwas umfangreicher zu werden. HAbe da schon ein paar Ansatzpunkte gefunden, die ich erstmal versuche selbst hinzubekommen.

Werde mich aber sicherlich morgen nochmal melden.

Vielen Dank erstmal für Deine Hilfe und Geduld ;)

Bis Morgen vieleicht - hoffentlich...

Gruß Pjotre