Element mit JS an anderem Element ausrichten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
bildschirm
boxen
code
dom
doofe angewohnheit
einfachem wege
element
http
nase
objekt
offset
position
realisieren
relativ absolut positionierten elements
test
url
verweis
vorgehen
zugreifen
-
Hi,
ich kämpfe mit folgendem Szenario:
Ich habe ein x-belibiges Element, optional mit/ohne float, das statisch, optional innerhalb eines relativ/absolut positionierten Elements ist. Ich möchte beim Anklicken des Elements rechts daneben eine Box einblenden.
Dazu müsste ich irgendwie an die Position kommen, wobei dann das Problem ist, dass wenn ich die Box absolut positioniere sie sich ja an ihrem übergeordneten absolut positionierten Element ausrichtet falls ein solches existiert.
Ich komme gerade nicht ganz auf den richtigen Ansatz. Ich möchte auch keinen Tooltip erzeugen, sondern neben das Element die Box einblenden (am besten mit einem Abstand von 10 Pixeln).
Ich würde das gerne ohne externe Bibliotheken realisieren, fallst jemand jedoch einen guten Link hat wäre ich auch sehr dankbar, da ich leider nicht wusste wonach genau ich denn bei Google suchen soll.
Vielen Dank und Gruß -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich hinterlasse dir mal 2 Links:
http://de.selfhtml.org/javascript/objekte/all.htm
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
Und verweise damit auf die möglichkeit, sich über den computedstyle die width und height zu holen, und über das Objekt selbst den offsetleft und offsettop :)
Liebe Grüße -
Vielen Dank.
Wieso benutze ich computedstyle ? Könnte ich für width und height denn nicht ebenfalls offsetWidth und offsetHeight verwenden?
Allerdings bringen mir offsetTop / offsetleft falsche Werte -.
MFG -
Des ist eine doofe Angewohnheit von mir, den Computed Style zu nutzen. Es gibt stellen, wo man nicht auf height und width zugreifen kann, aber der computedstyle geht immer, denn das ist, was der Browser für das Objekt beim Rendern ausgerechnet hat.
In wiefern liefern offsetTop und offsetLeft denn falsche Werte? Hast du mal ein kleines Democase nachvollzogen, woran genau es sich orientiert? Denn diese Offsets orientieren sich, genau wie beim position:absolute, am Parent. Deutlich wird es durch diesen Test:
Test: http://de.selfhtml.org/javascript/objekte/anzeige/all_offset_left.htm
Quellcode: http://de.selfhtml.org/javascript/objekte/all.htm#offset_left
Wenn du den Offset nach left und top wirklich vom Bildschirm haben willst, musst du kaskadierend vorgehen, also etwa so:
function getOffsetLeft( elementId ) { var el = document.getElementById( elementId ); var elOffset = el.offsetLeft; var tmpEl = el.parentElement; while ( tmpEl.tagName != 'BODY' ) { elOffset += tmpEl.offsetLeft; tmpEl = tmpEl.parentElement; } return elOffset; }
An sich sollte das so funktionieren, ist aber ungetestet.
Liebe Grüße -
Danke, wenn ich das richtig verstehe, sollten alle offsetTop's zusammengerechnet werden bis man im Dom tree zurück beim Body ist. Allerdings kommen bei mir Werte von 1500 px raus obwohl sich das Element in der Mitte des Bildschirms (13") befindet.
Kann man mit was ähnlichem wie Computed style vielleicht auch direkt ausgeben, wo das Element im Bildschirm positioniert ist?
Liebe Grüsse -
Wenn du jQuery benutzt solltest du einen Blick auf das jQuery UI Position plugin werfen:
http://jqueryui.com/demos/position/ -
Vielen Dank, ich denke mit dem Jquery Plugin sollte ich genau das auf einfachem Wege realisieren können.
Da ich jedoch eine Nase habe, die auf das Objekt zeigt, macht mir das 'contaminate' Attribut da einen Strich durch die Rechnung. Die Nase wird per :before Pseudoklasse eingefügt. Kann ich auch auf die Pseudoklasse zugreifen?
MFG
Beitrag zuletzt geändert: 8.10.2012 12:18:28 von programtools -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
