JavaScript Objekt abhänig vom Browser rand positionieren

[mercsen]

Moin moin!

In meonem aktuellem Projekt stoße ich mit JS mal wieder an das Ende meines Lateins, ich muss sagen diese Sprache macht es einem nicht leicht.
Ich versuche nun seit geraumer Zeit eine Live Suche unter meiner Suchbox zu plazieren.
In diesem Bild seht ihr wie es aussehen soll:

dort sieht man auch den Aufbau der Seite.

Es gibt ein "MainFrame" der ein großes DIV ist, in diesem befinden sich 2 kleinere, der "ContentFrame" und der "MitarbeiterFrame" (derzeit ausgeblendet)

in den ContentFrame werden per AJAX dann dynamisch inhalte geladen, in diesem Fall das projekt Modul.

wenn man im ContentFrame nicht srollt, dann wird das DIV, welches die suchergebnisse zeigt, richtig positioniert.

aber wie man hier sieht, ist es an der falschen stelle wenn der ContentFrame ein wenig nach unten gescrollt wird.....

mein Code zum bestimmen der X und Y koordinaten:

function getX(el) {
    x = el.offsetLeft;
    if (!el.offsetParent) return x;
    else return (x+getX(el.offsetParent));
}

function getY (el) {
    y = el.offsetTop;
    if (!el.offsetParent) return y;
    else return (y+getY(el.offsetParent));
}

ich weiß absolut nicht welche position er mir da am ende erechnet um die ergebnisbox so weit unten anzuzeigen.
Tatsächlich ist es sogar so das er mir immer die selben Kordinaten liefert.
Das DIV feld zum anzeigen der Suchergebnisse befindet sich im DIV ContentFrame, wenn das Projekt Modul geladen wird.

meine Frage ist jetzt also:
Wie bekomme ich die ABSOLUTE position eines Elements im Bezug auf das Browser Fenster?

Ich habe schon dutzende Funktionen durchprobiert, die alle behaupten genau dies zu tun, aber alle erzeugen bei mir das orbige ergebniss, teilweise sogar noch obskurere Koordinaten, sodass ich erstmal bei dieser einfachen berechnung bleibe.

ich habe auch versucht für jedes Textfeld das ein ergebniss anzeigen kann eine eigene ergebnis box direkt in das TD element zu basteln, allerdings verschiebt dieses immer die gesmate tabelle, wenn ich die position auf absolut stelle, habe ich dann wieder das problem das es beim scrollen weiter unten angezeigt wird als es soll und ich will eigentlich nur mit einem arbeiten.

Vlt. ist ja auch mein gesamter Ansatz falsch, weiß jemand rat?

Danke im vorraus

P.S.
es geht nicht darum das beim scrollen das fenster nicht nachpsoitioniert wird, sondern das wenn man gescroltl hat es direkt an der falschen stelle erscheint.

 

[Tumbleweed]

Korrigiere mich, sollte ich dich falsch verstanden haben, aber was du willst ist doch gar nicht die Positionierung relativ zum Fenster, sondern die Positionierung relativ zu dem Eingabefeld "Projekt Auftraggeber" oder? Demnach ist der Abstand ja völlig unabhängig vom Browserfenster sondern hängt von den Dokumenträndern ab.
Verschiebt sich das Dokument durch Scrollen, soll dein Fenster doch mitwandern und an dem Eingabefeld kleben, richtig? Quasi so wie hier auf CB oben die Fenster, die sich öffnen wenn man z.B. auf "Nützliche Links" klickt.

 

[mercsen]

Ja das ist absolut richtig.
ich verstehe z.b. mehrere sachen nicht:
1) liefert er mir immer die korrdinaten abhängig von ContentFrame.
2) selbst wenn ich im ContentFrame scrolle, bleiben die korrdinaten die gleichen, was ja verständlich ist einerseits, es ist ja an der selben position, nur weiter oben. ich brauche aber die tatsächliche position, wo es sich gerade auf dem bildschirm befindet und nicht in abhänigkeit irgendeines elementes.......

und ja, das eingabe Feld verschiebt sich beim scrollen nach oben, weiter unten gibt es ja noch mehr eingabe Felder.

aber wenn ich unten bin und dann oben noch eine Korrektur vornehme soll das Fenster mit den such ergebnisen bitte auch unter dem eingabe Feld stehen.

wenn es andere möglichkeiten gibt das div fenster an das Input feld zu binden, dann bitte bitte her damit! ^^
Das es mit scrollt wollte ich evtl über einen listener machen der registriert ob das feld gescrollt wurde (wenn JS sowas denn kann...) ansonsten wäre da ein wink mit dem uan pfal nicht verkehrt.

ich erwarte ja keinen fertigen code, denk anstöße sind auch wilkommen

 

[Ruheliebhaber]

An einer Funktion zum Finden der absoluten Position eines HTML-Elements bin ich auch schon verzweifelt.

Eventuell hilft die Offset-Methode von JQuery.
http://stackoverflow.com/questions/...-absolute-position-of-an-element-using-jquery

Ansonsten würde ich versuchen, unter jedem Eingabefeld einen 0 Pixel hohen Div-Block einzufügen und die overflow-Eigenschaft auf "visible" zu setzen. Wenn Du dann dynamisch das Ergebnis der Suche an diesen Block zuweist, sollte der Inhalt unter dem gewünschten Eingabefeld erscheinen. Scolling sollte egal sein. Jedoch wirst Du leider die ID des jeweiligen Division an Deine Suchmethode übergeben müssen.

 

[mercsen]

genau das wollte ich ja vermeiden :-/
Und das problem welches sich daraus ergibt ist folgendes:
wenn ich ihn Relativ positioniere verschiebt er mir alle anderen Felder nach unten, obwohl der z-index auf 9999 steht.
ist es absolut dann wird es richtig angezeigt, aber sobald ich scrolle ist das gleiche problem wie zuvor, wenn ich die position des eingabe Feldes nicht kenne verliert es anschließden die position .......

aber das es möglich ist sieht man ja zuhaus im internet ......

 

[Tumbleweed]

Vielleicht verkenne ich immer noch das Problem, aber sollte das nicht mit einem gewöhnlichen

    left: 814px;
    position: absolute;
    top: 119px;
    z-index: 11000;

(als Beispiel von CB) getan sein? Wenn du scrollst während ein absolut positioniertes Element sichtbar ist, scrollt das mit, zumindest auf CB und z.B. auch hier wenn man das Fenster klein genug macht damit man überhaupt scrollen kann.

Kann aber auch sein, dass ich es überhaupt nicht checke - dann ignorier mein Gebrabbel einfach und warte auf jemanden, der das Problem versteht!

 

[Ruheliebhaber]

Gut. Ich will mich nicht zu sehr reinhängen. Daher eine Erfahrung von mir. Wenn sich Positionierung und z-Index irgendwie "komisch" verhält, hilft es manchmal, versuchsweise sämtliche Styles wegzulassen und nur bei dem Element von Interesse neu anzufangen. Dadurch findet man oft Abhängigkeiten, die man vorher nicht bedacht hat. Auch der Test in verschiedenen Browsern und häufiges Löschen des Browser Caches kann helfen. Mir ist es schon mehrfach passiert, daß die Änderung im CSS-File nicht übernommen wurde, da der Browser die Datei gecached hatte.

 

[mercsen]

von ding her ist der gedanke mit dem absolut nicht verkehrt.
aber auch dazu muss ich die position des eingabe feldes kennen, welche sich ja nicht bestimmen lässt.
alternativ könnte ich halt den zustand des scrollbalkens auf die koordinaten addieren.....

 

[Tumbleweed]

Aber ist der Abstand des Eingabefelds zum oberen Rand des Dokuments (nicht Browsers!) nicht konstant? Ansonsten sagt zumindest die Definition von absolute

The element is positioned relative to its first positioned (not static) ancestor element

d.h. wenn dieses Fenster innerhalb des Eingabefeld-divs wäre, sollte der Abstand zu diesem konstant bleiben, entsprechend der top/left-Werte. Könnte aber an dem "not static" hapern, denn ich vermute dein input-field ist static (da default).

 

[mercsen]

ja das input feld ist static und wenn ich an dem, nennen wir ihn mal, BODY-SCROLLBALKEN scrolle ist auch alles super. dann scrollt alles mit, an der richtigen position. Aber sobald ich den ScrollBalken von CintentFrame nehme bleibt alles an der selben position, während sich der inhalt von ContenFrame drunter durch scrollt.....

Der aufbau ist wie folgt (stark vereinfacht):

<body>
  <div='mainFrame'>
    <div id = 'contentFrame'> --> Hier ist die Anzeige drinne <--</div>
    <div id = 'mitarbeiterFrame'></div>
  </div>
</body>

selbst wenn ich die position als nicht statisch angebe bringt das nichts.
ich denke ich werde die seite einfach so ubasteln das sie nach unten hin keine begrenzng mehr hat!

Ergänzung (8. August 2011)

Ich habe es nun gelöst indem ich zur Y Position folgendes subtrahiere

scroll = document.getElementById("contentFrame").scrollTop;

nicht ganz das was ich will, und ich höre gerne weitere vorschläge, aber vorerst ausreichend.