offsetTop/Left wie bekommich offsetRight/Bottom

In node.style stehen die Werte drin, die per inline-Style gesetzt werden (oder eben mit JS).
ok, hat mich meine erinnerung also doch nicht getrügt, dass es auch mit css (in einigen wenigen fällen) ging. ändert aber nichts daran, dass man diesen wert zum lesen nicht nutzen kann (will man ja idR auch nicht, da man verlässliche werte benötigt).

Das sollte man erkennen, wenn man sich per alert einfach mal node.style.bottom ausgeben ließe und merkt, dass da nichts drin steht, obwohl das Element ja per CSS richtig positioniert ist. (und dass parseInt("") == NaN ist ja hinlänglich bekannt).
das hat er doch von anfang an erkannt und wollte deswegen über offsetTop gehen.

Mit dem Ansatz von Schlauen bekommt man wunderbar die Koordinaten der rechten, unteren Ecke ABER vom normalen Koordinatenursprung (der linken, oberen Ecke).
genau, das was man eigentlich auch immer will.

Das ist bei diesem Problem aber wenig hilfreich, das man gerne einen anderen Koordinatenursprung hätte (die rechte, untere Ecke).
nein (EDIT: also nein, es ist hilfreich meine ich) und nein (EDIT: und nein, er will nicht die rechte, untere Ecke), wobei das 2. nein BlueFox noch bestätigen müsste. er will meiner Meinung nach die werte aus dem css. im speziellen denke ich, hat er solch ein konstrukt
Code:
<div style="position:absolute;left:10px;width:10px;top:100px;height:200px"><div id="box" style="position:relative;left:10px;width:10px;bottom:-50px;height:100px">xxx</div></div>
was aber identisch zum unteren rand positioniert ist wie
Code:
<div style="position:relative;left:10px;width:10px;top:100px;height:200px"><div id="box" style="position:absolute;left:10px;width:10px;bottom:50px;height:100px">xxx</div></div>

Dazu muss man eine recht einfache (Translation und Drehung um 180°) Koordinatentransformation durchführen.
dazu muss man das css auslesen.
müsste man, wenn es überhaupt interessant wäre, und das sehe ich noch nicht.
 
Zuletzt bearbeitet:
Aha, aha...

Nochmal...:
Sagen wir ich hab ne Taskbar unten(bottom) die im css auf bottom: -50px; ist also Unsichtbar, mit javascript will ich jetzt die Zahl Faden bis zu 0px damit man alles wieder sieht, genauso wie hier die Taskbar, exakt das gleiche. nur ich weiß nicht wie ich an den wer von bottom rann komme um ihn zu ändern. Deswegen frage ich mich was ihr mit node, parent, offsetheight, und sowas kommt, hat doch alles nichts mit bottom zu tun.
 
Sagen wir ich hab ne Taskbar unten(bottom) die im css auf bottom: -50px;
ok, du hast also solch ein konstrukt (wäre hilfreich gewesen dies mal zu posten, hat kkapsner dir auch schon geraten)
Code:
<div style="position:relative;overflow:hidden;left:10px;width:10px;top:100px;height:200px"><div id="box" style="position:absolute;left:10px;width:10px;bottom:-50px;height:50px">xxx</div></div>
dann trifft hier genau das zu, was kkapsner dir hier
offsetParent.clientHeight - offsetHeight - offsetTop.
geschrieben hat, und was ich hier
willst du right/bottom jetzt noch in bezug zum eltern-element, musst du noch dessen right/bottom bestimmen.
nochmal wiederholt hatte.
das sieht dann so
Code:
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div style="position:relative;overflow:hidden;left:10px;width:10px;top:100px;height:200px"><div id="box" style="position:absolute;left:10px;width:10px;bottom:-50px;height:50px">xxx</div></div>
    <script type="text/javascript">
      function getX(obj)
      {
        var nX;
        var object;
        nX = 0;
        object = obj;
        while (object.offsetParent != null)
        {
          nX += object.offsetLeft;
          object = object.offsetParent;
        }
        nX += object.offsetLeft;
        return nX;
      }
      
      function getY(obj)
      {
        var nY;
        var object;
        nY = 0;
        object = obj;
        while (object.offsetParent != null)
        {
          nY += object.offsetTop;
          object = object.offsetParent;
        }
        nY += object.offsetTop;
        return nY;
      }
      function test()
      {
        alert("über rel. pos: " + (box.parentNode.offsetHeight - box.offsetTop - box.offsetHeight));
        alert("über abs. pos: " + (getY(box.parentNode) + box.parentNode.offsetHeight - getY(box) - box.offsetHeight));
      }
      
      window.onload = test;
    </script>
  </body>
</html>
aus. ist aber unnötig, siehe ganz unten.

mit javascript will ich jetzt die Zahl Faden bis zu 0px damit man alles wieder sieht
du meinst verschieben?

nur ich weiß nicht wie ich an den wer von bottom rann komme um ihn zu ändern.
was hindert dich daran style.top zu ändern?
 
ok, hat mich meine erinnerung also doch nicht getrügt, dass es auch mit css (in einigen wenigen fällen) ging. ändert aber nichts daran, dass man diesen wert zum lesen nicht nutzen kann (will man ja idR auch nicht, da man verlässliche werte benötigt).
Wenn man eine CSS-Eigenschaft animieren will man genau diese Werte haben! Sonst kann es realtiv schnell passieren, dass man in einer Daueranimationsschleife festhängt und das Objekt nicht dahin bekommt, wo man es haben will (z.B. wenn man die Höhe animieren will, aber noch einen Rand hat)
das hat er doch von anfang an erkannt und wollte deswegen über offsetTop gehen.
Das glaube ich nicht - er hat nicht gesehen, dass da gar nichts drin steht, sondern nur, dass parseInt ein NaN liefert... das kann aber mehrere Gründe haben
genau, das was man eigentlich auch immer will.
Nein... oder ich bin nicht "man". Manche Probleme lassen sich viel einfacher lösen, wenn man das Koordinatensystem ändert (ich sage nur Kreisbewegung)
nein (EDIT: also nein, es ist hilfreich meine ich) und nein (EDIT: und nein, er will nicht die rechte, untere Ecke), wobei das 2. nein BlueFox noch bestätigen müsste. er will meiner Meinung nach die werte aus dem css.
Ich bin auch der Meinung, dass er die CSS-Werte haben will (was auch möglich ist: http://kkjs.kkapsner.de/tests/slide_in.html) was aber genau dem Koordinatneursprung unten rechts entsprechen würde...

im speziellen denke ich, hat er solch ein konstrukt
Code:
<div style="position:absolute;left:10px;width:10px;top:100px;height:200px"><div id="box" style="position:relative;left:10px;width:10px;bottom:-50px;height:100px">xxx</div></div>
was aber identisch zum unteren rand positioniert ist wie
Code:
<div style="position:relative;left:10px;width:10px;top:100px;height:200px"><div id="box" style="position:absolute;left:10px;width:10px;bottom:50px;height:100px">xxx</div></div>
Hat er sicherlich nicht, da sonst mein Ansatz über offsetParent funktioniert hätte (und ich glaube auch dass deine Beispiele auch nicht so darstellen, wie er es gerne hätte).

dazu muss man das css auslesen.
müsste man, wenn es überhaupt interessant wäre, und das sehe ich noch nicht.
Es ist interessant - siehe Link.

EDIT: Hab' wohl etwas zu lange an dem hier geschrieben...
Also mir war irgendwie schon klar, dass das so etwas Ähnliches wie die Toolbar hier ist... dachte in vorherigen Beiträgen irgendetwas Dementsprechendes gelesen zu haben.
Ich würde auch nicht über top gehen, da das erstens viel nerviger ist und zweitens beschissen aussieht, wenn man die Fenstergröße ändert.
EDIT2: Was für ein Monsterbeitrag als 4000.
EDIT3: Ach, nur für die, die's interessiert. Die Funktion, mit der in dem Link die gesetzten CSS-Werte gelesen werden, ist im Grunde die gleiche wie hier (wobei da auch nur der erste Codeblock wirklich interessant ist).
 
Zuletzt bearbeitet:
Wenn man eine CSS-Eigenschaft animieren will man genau diese Werte haben!
sehe ich anders.

Sonst kann es realtiv schnell passieren, dass man in einer Daueranimationsschleife festhängt und das Objekt nicht dahin bekommt, wo man es haben will (z.B. wenn man die Höhe animieren will, aber noch einen Rand hat)
nein, wie das?

Das glaube ich nicht - er hat nicht gesehen, dass da gar nichts drin steht, sondern nur, dass parseInt ein NaN liefert... das kann aber mehrere Gründe haben
Titel sagt eigentlich alles, will den wert von style.top/left/right/bottom haben und das geht numal nur mit offset :(

Ich bin auch der Meinung, dass er die CSS-Werte haben will (was auch möglich ist: http://kkjs.kkapsner.de/tests/slide_in.html) was aber genau dem Koordinatneursprung unten rechts entsprechen würde...
nein

Hat er sicherlich nicht, da sonst mein Ansatz über offsetParent funktioniert hätte
macht er ja auch

Es ist interessant - siehe Link.
ja und? willst du sagen, dass man nicht ohne das css auszulesen auskommt und dieser weg der bessere ist?
 
um dann doch noch das bsp. zu bringen
Code:
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div style="position:absolute;overflow:hidden;left:10px;width:50px;bottom:0px;height:50px"><div id="box" style="position:absolute;left:10px;width:10px;bottom:-50px;height:50px">xxx</div></div>
    <script type="text/javascript">
      function getX(obj)
      {
        var nX;
        var object;
        nX = 0;
        object = obj;
        while (object.offsetParent != null)
        {
          nX += object.offsetLeft;
          object = object.offsetParent;
        }
        nX += object.offsetLeft;
        return nX;
      }
      
      function getY(obj)
      {
        var nY;
        var object;
        nY = 0;
        object = obj;
        while (object.offsetParent != null)
        {
          nY += object.offsetTop;
          object = object.offsetParent;
        }
        nY += object.offsetTop;
        return nY;
      }
      function test()
      { 
        var box = document.getElementById("box");
        alert("über rel. pos: " + (box.parentNode.offsetHeight - box.offsetTop - box.offsetHeight));
        alert("über abs. pos: " + (getY(box.parentNode) + box.parentNode.offsetHeight - getY(box) - box.offsetHeight));
        var nI = 50;
        var hdl = setInterval(function()
        { 
          if (nI <= 0)
          {
            clearInterval(hdl);
          }
          else
          {
            box.style.top = --nI + "px";
          }
        }, 50)
      }
      
      window.onload = test;
    </script>
  </body>
</html>

edit: wobei ich zugebe, dass da offsetTop ausser acht gelassen wurde und nur gezeigt wurde, dass es auch über style.top funktioniert. deshalb nochmal mit offsetTop
Code:
      function test()
      { 
        var box = document.getElementById("box");
        var hdl = setInterval(function()
        { 
          if (!box.offsetTop)
          {
            clearInterval(hdl);
          }
          else
          {
            box.style.top = (box.offsetTop - 1) + "px";
          }
        }, 50)
      }

wobei sich das dann auch wieder verallgemeinern lässt zu
Code:
      function test()
      { 
        var box = document.getElementById("box");
        var nY = box.offsetTop;
        var hdl = setInterval(function()
        { 
          if (nY - box.offsetTop >= box.offsetHeight)
          {
            clearInterval(hdl);
          }
          else
          {
            box.style.top = (box.offsetTop - 1) + "px";
          }
        }, 50)
      }
und damit auch dein bsp abgedeckt ist
 
Zuletzt bearbeitet:
Ist dein gutes Recht - ich finde es nur einfacher (und intuitiver) darüber zu gehen.
Schau' dir dieses Beispiel an - es passiert nicht wirklich das, was man haben will.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript">
function aniMe(node){
	var h = node.offsetHeight;
	if (h > 0){
		h--;
		node.style.height = h + "px";
		window.setTimeout(function(){
			aniMe(node);
		}, 100);
	}
}
</script>
</head>
<body>
<div style="height: 20px; border: 1px solid black;" onclick="aniMe(this);">hallo</div>
</body>
</html>
K.A. - war mein Eindruck/meine Meinung... auf jeden Fall liegt BlueFox damit falsch, dass man die CSS-Werte nicht auslesen kann.
er hat doch geschrieben, dass das nicht die gewünschten Werte bringt
ja und? willst du sagen, dass man nicht ohne das css auszulesen auskommt und dieser weg der bessere ist?
Ja - meine Meinung ist, dass das der bessere Weg ist (da allgemeiner) und Nein - man kommt sicherlich auch ohne die CSS-Werte aus... man muss nur ziemlich gut auf noch ganz andere CSS-Werte aufpassen (s.o.: border)

Zu deinen Beispielen: Ja - die Funktionieren gut; ABER wieso zwei Nodes wenn es auch mit einer einzigen funktioniert (Stichwort DIV-Suppe).
 
Ist dein gutes Recht - ich finde es nur einfacher (und intuitiver) darüber zu gehen.
OK

Schau' dir dieses Beispiel an - es passiert nicht wirklich das, was man haben will.
js, mein reden. offsetLeft/Top/Height/Width entsprechen nicht style.top/left/height/width
aber ok, ich habe verstanden was du sagen wolltest und gebe zu, dass man da aufpassen muss.

Zu deinen Beispielen: Ja - die Funktionieren gut; ABER wieso zwei Nodes wenn es auch mit einer einzigen funktioniert (Stichwort DIV-Suppe).
es funktioniert ja auch mit nur einem einzigen. dass ich 2 hatte liegt nur daran, dass ich lange spekuliert hatte, was er eigentlich will, dazu brauchte ich 2 elemente aber es geht auch mit deinem bsp

Code:
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div id="box1" style="position:fixed;height:50px;bottom:-50px;">xxx</div>
    <div style="position:absolute;overflow:hidden;left:10px;width:50px;bottom:0px;height:50px"><div id="box2" style="position:absolute;bottom:-50px;height:50px">xxx</div></div>
    <div style="position:absolute;overflow:hidden;left:10px;width:50px;top:100px;height:200px"><div id="box3" style="position:relative;bottom:-50px;height:100px">xxx</div></div>
    <div style="position:relative;overflow:hidden;left:10px;width:50px;top:100px;height:200px"><div id="box4" style="position:absolute;bottom:50px;height:100px">xxx</div></div>
    <script type="text/javascript">
      function getViewPortHeight()
      {
        if (window.innerHeight)
        {
          return window.innerHeight
        }
        else if (document.documentElement && document.documentElement.clientHeight)
        {
          return document.documentElement.clientHeight
        }
        else
        {
          return document.body.clientHeight;
        }
      }
      function getViewPortWidth()
      {
        if (window.innerWidth)
        {
          return window.innerWidth
        }
        else if (document.documentElement && document.documentElement.clientWidth)
        {
          return document.documentElement.clientWidth
        }
        else
        {
          return document.body.clientWidth;
        }
      }
      function getX(obj)
      {
        for (var nX = 0; obj != null; obj = obj.offsetParent)
        {
          nX += obj.offsetLeft;
        }
        return nX;
      }
      function getY(obj)
      {
        for (var nY = 0; obj != null; obj = obj.offsetParent)
        {
          nY += obj.offsetTop;
        }
        return nY;
      }
      function getBottomDistance(obj)
      {
        return (obj.offsetParent && obj.offsetParent != document.body) ? (obj.parentNode.offsetHeight - obj.offsetTop - obj.offsetHeight) : (getViewPortHeight() - obj.offsetTop - obj.offsetHeight);
      }
      function getRightDistance(obj)
      {
        return (obj.offsetParent && obj.offsetParent != document.body) ? (obj.parentNode.offsetWidth - obj.offsetLeft - obj.offsetWidth) : (getViewPortWidth() - obj.offsetLeft - obj.offsetWidth);
      }
      function move(box, dir, length, func)
      { 
        var nY = box.offsetTop;
        var hdl = setInterval(function()
        {
          if ((nY - box.offsetTop) * -dir >= length)
          {
            clearInterval(hdl);
            if (func) { func(); }
          }
          else
          {
            box.style.top = (box.offsetTop + dir) + "px";
          }
        }, 10)
      }
      function test()
      { 
        var nDir = -1;
        var box1 = document.getElementById("box1");
        move(box1, nDir, getBottomDistance(box1) * nDir, function()         // ans untere ende
        {
          var box2 = document.getElementById("box2");
          move(box2, nDir, getBottomDistance(box2) * nDir, function()       // ans untere ende
          {
            var box3 = document.getElementById("box3");
            move(box3, nDir, box3.offsetTop + box3.offsetHeight, function() // oben raus
            {
              nDir = 1;
              var box4 = document.getElementById("box4");
              move(box4, nDir, getBottomDistance(box4) * nDir);             // ans untere ende
            });
          });
        });
      }
      window.onload = test;
    </script>
  </body>
</html>
 
Zuletzt bearbeitet:
OK. Jedem das Seine ;)
Dein Beispiel funktioniert - ich dachte nur, dass er sein Element relativ zum unteren Bildschirmrand positionieren haben will und wenn man bei dir das Fenster vergrößert/verkleinert ist das nicht der Fall... aber das muss der Fragesteller wissen.
 
OK. Jedem das Seine ;)
:D (der grüne)

Dein Beispiel funktioniert - ich dachte nur, dass er sein Element relativ zum unteren Bildschirmrand positionieren haben will und wenn man bei dir das Fenster vergrößert/verkleinert ist das nicht der Fall... aber das muss der Fragesteller wissen.
das war doch nur ein bsp. es ist doch egal wie man die divs positioniert die verschiebung beeinflusst das ja nicht. siehe box1 in meinem letzten bsp. das ist deine variante.
 
Äh - die box1 ist nach der Animation nicht mehr am unteren Rand ausgerichtet... weil du ja top setzt...
ach das meinst du, ja das hatte ich übersehen. das ist aber auch nichts, was man nicht speziell für diesen einen fall behandeln könnte. das machst du ja im prinzip auch.

Code:
function test()
      { 
        var nDir = -1;
        var box1 = document.getElementById("box1");
        move(box1, nDir, getBottomDistance(box1) * nDir, function()         // ans untere ende
        {
          box1.style.top = "auto";
          box1.style.bottom = "0px";/*
        });
      }
 
Und wie soll mir das ganze jetzt Weiterhelfen?
Und was ich immer noch nicht verstehe, was wollt ich denn andauernt mit offsetTop/Left, offsetWidth, offsetHeight? das hat doch nichts damit zu tun, ich will doch nur den wert von div.style.bottom haben damit ich ihn verändern kann, is das so Schwer zu Verstehen?, ich will nichts mit offsetTop/Left/Height/Width oder sowas.

Nicht Pöse sein :)
 
Und wie soll mir das ganze jetzt Weiterhelfen?
sind doch jetzt haufen beispiele da, wo ist dein problem?
Und was ich immer noch nicht verstehe, was wollt ich denn andauernt mit offsetTop/Left, offsetWidth, offsetHeight?
das bin nur ich
das hat doch nichts damit zu tun,
nach meiner meinung nach schon.

ich will doch nur den wert von div.style.bottom haben damit ich ihn verändern kann, is das so Schwer zu Verstehen?, ich will nichts mit offsetTop/Left/Height/Width oder sowas.
und genau das hat kkapsner dir doch gezeigt?!

woher denn
 
@hesst: wenn man dann aber während der Animation das Fenster vergrößert/verkleinert springt das Element am Ende... :p
 
dann würde ich die variante mit den 2 divs wählen als 2. wahl dann parametrierbar auch bottom ändern (spricht ja nur der erhöte rechenaufwand dagegen).
 
Achja? Wo? ich hab nichts gefunden wo man den Wert angezeigt bekommt, bzw. nichts womit ich was anfangen könnte.
http://forum.jswelt.de/javascript/5...ekommich-offsetright-bottom-2.html#post317845

und noch mal meine variante über bottom(nicht speziell für dich, aber ich habs nunmal da)
Code:
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div id="box1" style="position:fixed;height:50px;bottom:-50px;">xxx</div>
    <div style="position:absolute;overflow:hidden;left:10px;width:50px;bottom:0px;height:50px"><div id="box2" style="position:absolute;bottom:-50px;height:50px">xxx</div></div>
    <div style="position:absolute;overflow:hidden;left:10px;width:50px;top:100px;height:200px"><div id="box3" style="position:relative;bottom:-50px;height:100px">xxx</div></div>
    <div style="position:relative;overflow:hidden;left:10px;width:50px;top:100px;height:200px"><div id="box4" style="position:absolute;bottom:50px;height:100px">xxx</div></div>
    <script type="text/javascript">
      function getViewPortHeight()
      {
        if (window.innerHeight)
        {
          return window.innerHeight
        }
        else if (document.documentElement && document.documentElement.clientHeight)
        {
          return document.documentElement.clientHeight
        }
        else
        {
          return document.body.clientHeight;
        }
      }
      function getViewPortWidth()
      {
        if (window.innerWidth)
        {
          return window.innerWidth
        }
        else if (document.documentElement && document.documentElement.clientWidth)
        {
          return document.documentElement.clientWidth
        }
        else
        {
          return document.body.clientWidth;
        }
      }
      function getX(obj)
      {
        for (var nX = 0; obj != null; obj = obj.offsetParent)
        {
          nX += obj.offsetLeft;
        }
        return nX;
      }
      function getY(obj)
      {
        for (var nY = 0; obj != null; obj = obj.offsetParent)
        {
          nY += obj.offsetTop;
        }
        return nY;
      }
      function getBottomDistance(obj)
      {
        return (obj.offsetParent && obj.offsetParent != document.body) ? (obj.parentNode.offsetHeight - obj.offsetTop - obj.offsetHeight) : (getViewPortHeight() - obj.offsetTop - obj.offsetHeight);
      }
      function getRightDistance(obj)
      {
        return (obj.offsetParent && obj.offsetParent != document.body) ? (obj.parentNode.offsetWidth - obj.offsetLeft - obj.offsetWidth) : (getViewPortWidth() - obj.offsetLeft - obj.offsetWidth);
      }
      function move(box, dir, length, func, bottom)
      { 
        var nY = bottom ? getBottomDistance(box) : box.offsetTop;
        var hdl = setInterval(function()
        {
          if (!bottom && (nY - box.offsetTop) * -dir >= length || bottom && (nY - getBottomDistance(box)) * dir >= length)
          {
            clearInterval(hdl);
            if (func) { func(); }
          }
          else
          {
            if (bottom)
            { 
              box.style.bottom = (getBottomDistance(box) - dir) + "px";
            }
            else
            {
              box.style.top = (box.offsetTop + dir) + "px";
            }
          }
        }, 50)
      }
      function test()
      { 
        var nDir = -1;
        var box1 = document.getElementById("box1");
        move(box1, nDir, getBottomDistance(box1) * nDir, function()             // ans untere ende
        {
          box1.style.top = "auto";
          box1.style.bottom = "0px";
          var nDir = 1;
          move(box1, nDir, box1.offsetHeight, function()                        // wieder unteren raus über bottom
          {
            var nDir = -1;
            move(box1, nDir, getBottomDistance(box1) * nDir, function()         // wieder ans untere ende über bottom
            { 
              var box2 = document.getElementById("box2");
              move(box2, nDir, getBottomDistance(box2) * nDir, function()       // ans untere ende
              {
                var box3 = document.getElementById("box3");
                move(box3, nDir, box3.offsetTop + box3.offsetHeight, function() // oben raus
                {
                  nDir = 1;
                  var box4 = document.getElementById("box4");
                  move(box4, nDir, getBottomDistance(box4) * nDir);             // ans untere ende
                });
              });
            }, true);
          }, true);
        });
      }
      window.onload = test;
    </script>
  </body>
</html>
 
Zurück
Oben