kostenloser Webspace werbefrei: lima-city


Element mit JS an anderem Element ausrichten

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    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ß
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. g****e

    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
  4. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    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
  5. g****e

    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
  6. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    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
  7. Wenn du jQuery benutzt solltest du einen Blick auf das jQuery UI Position plugin werfen:

    http://jqueryui.com/demos/position/
  8. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    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
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!