✔ Einfliegendes Kommentarfeld/-DIV

Hi, da gibt es diverse Varianten, man kann entweder ein Element ausserhalb des Anzeigebereiches positionieren, und dann seine Position ändern.

Oder aber man setzt die CSS-Attribute für "clip" auf 0 und erhöht sie dann in Zeitabständen(so wird es hier im Forum gemacht).

Oder man setzt die Breite des Elementes eingangs auf 0 und erhöht sie dann allmählich...dafür mal nen Codeschnipsel zum Probieren:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
var timer;
function inout(o,t,d,i)
{
  try
    {
      ob=document.getElementById(o);
    }
  catch(e)
    {
      return false;
    }
  clearTimeout(timer);
  w=(d>0)?Math.min(t,parseInt(ob.style.width)+d):Math.max(t,parseInt(ob.style.width)+d);
  ob.style.width=w;
  
  if(w!=t)
    {
      timer=setTimeout("inout('"+o+"',"+t+","+d+","+i+")",i);
    }
  
}
document.onclick=new Function('f','inout("layer",0,-10,20)');

//-->
</script>
</head>
<body>
<b onmouseover="inout('layer',200,10,20)" style="cursor:pointer;position:absolute;right:0;">flyin</b>
<div id="layer" style="position:absolute;top:30px;right:0;background-color:#f1f1f1;width:0;overflow:hidden;white-space:no-wrap">
  flyer
</body>
</html>

Die Parameter dabei:
  • ID des Elementes
  • Zielbreite
  • Wert um den geändert werden soll
  • Zeitabständ, in dem geändert werden soll
 
Hi!

Danke ihr 2!

@Sven Mintel: Kann ich irgendwie die Koordinaten beim Rausfahren ändern - also so, daß es auch "diagonal" rausgefahren wird?

Ich würde das gerne auf einer Seite (in dem Mitgliederbereich unseres Clubs) verwenden, auf der mehrere Bilder untereinander aufgelistet sind. Wenn man dann auf die Bewertung des Bildes fährt soll das Teil schräg nach oben, teilweise das Bild bedeckend, ausgefahren werden. Ich hab mir deinen Code mal angeschaut (verstanden habe ich ihn - denke ich mal - selbst hätte ich das nie hinbekommen; hab von JS nicht so die Hammer-Ahnung und stehe da mit AJAX und JS noch am Anfang), aber mit Koordinaten habe ich, wie gesagt nichts gefunden - auch nicht, wie das mit den 10px ausfahren pro Millisekunden, 1/10 Sekunde, oder was das auch immer für eine Zeiteinheit ist, gemacht wurde.

Vielen Dank und Grüße,

Dirk
 
Mein Beispiel arbeitet wie erwähnt nicht mit Positionsänderung, sondern durch Änderung der Breite.

Wenn du etwas Queerbeet verschieben willst, müsstest du statt der Breite die Werte für
style.top und style.left manipulieren, die Vorgehensweise wäre dabei ähnlich:
Du prüfst, ob sich das Element schon an der Zielposition befindet, wenn nicht, bewegst du es weiter dorthin.
 
Hi Sven,

ah, ok. Super, vielen Dank! Hab's gleich mal eingebaut und es klappt prima!

Grüße,

Dirk
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück