Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

**xy2er** · 31-10-2006, 16:22

Hallo,

ich habe mir eben moo.fx angesehen und es kann genau das was ich brauche.

Leider kann das ganze ja nur höhe, breite ect.

Ich bräuchte etwas wo ich sagen kann:
-> Slide den x-Wert eines Elementes (div) zu einem bestimmten Wert und beim erneuten aufrufen wieder zurück

Hat ja jemand eine Ahnung ob es da was fertiges gibt oder wo ich da kucken kann?

Danke schonmal!

**mixer2** · 31-10-2006, 16:30

sowas?

oder willst du dass es langsam den wert dorthin verändert?

Code:

<html><head><title>Test</title>
<script type="text/javascript">
function schieb() {
  document.all.schiebdiv.style.left = "400px";
  document.all.schiebdiv.style.top = "400px";
}
function zurueck() {
  document.all.schiebdiv.style.left = "0px";
  document.all.schiebdiv.style.top = "0px";
}
</script>
</head><body>
<div id="schiebdiv" style="position:absolute;left:0px;top:0px;">Das ist das div</div><br /><br />
<a href="javascript:schieb()">schieben!</a> 
<a href="javascript:zurueck()">zurueck</a>
</body></html>

**xy2er** · 31-10-2006, 16:36

Zitat von mixer2

oder willst du dass es langsam den wert dorthin verändert?

Genau das meinte ich mit sliden

**mixer2** · 31-10-2006, 16:42

Zitat von xy2er

Genau das meinte ich mit sliden

dazu fällt mir spontan nur folgendes ein, was eigtl sehr böse ist und restliches javascript der seite für die zeit, die es slidet lahm legt ^^
es funktioniert, is aber böse, sollte man glaube ich nicht nutzen

enthält btw code von:
Delay Warten Verzögerung HTML JavaScript Beispiel Download

Code:

<html><head><title>Test</title>
<script type="text/javascript">

function warten(prmSec)
  {
  prmSec *= 10;
  var eDate = null;
  var eMsec = 0;
  var sDate = new Date();
  var sMsec = sDate.getTime();

  do {
      eDate = new Date();
      eMsec = eDate.getTime();

  } while ((eMsec-sMsec)<prmSec);
}


function schieb() {
  pos = 0;
  while (pos <= 400) {
	document.all.schiebdiv.style.left = pos+"px";
	warten(1);
	pos = pos+1;
	}
}
function zurueck() {
  document.all.schiebdiv.style.left = "0px";
  document.all.schiebdiv.style.top = "0px";
}
</script>
</head><body>
<div id="schiebdiv" style="position:absolute;left:0px;top:0px;">Das ist das div</div><br /><br />
<a href="javascript:schieb()">schieben!</a> 
<a href="javascript:zurueck()">zurueck</a>
</body></html>

pit-r · 31-10-2006, 16:46

Moin!

Zitat von mixer2

document.all

Laß doch bitte solchen nicht standardkonformen Quark. Die 'warten'-Funktion ist zwar niedlich aber ziemlich belastend.

Ahoi - Pit

**mixer2** · 31-10-2006, 17:06

Zitat von pit-r

Moin!Laß doch bitte solchen nicht standardkonformen Quark. Die 'warten'-Funktion ist zwar niedlich aber ziemlich belastend.

Ahoi - Pit

olol, sry, das document.all ist ein überrest aus nem selfhtml cut&paste...
die verwenden das da gerne in beispielen, obwohl darauf hingewiesen wird, dass mans eigtl nich nutzen soll... naja, aber eigtl is egal, da alle aktuellen browser es unterstützten und es beim thema nicht darauf ankommt.

ja, die warten funktion ist wie gesagt, denkbar ungünstig... aber allgemein ist javascript, css und html auch für sowas wie sliden nicht gedacht, deshalb gibt's da keine wirklich sauberen lösungen. wenn man sowas machen will, nutzt man eben flash, das ist für sowas gedacht.

pit-r · 31-10-2006, 17:11

Zitat von mixer2

aber eigtl is egal, da alle aktuellen browser es unterstützten

Das stimmt nicht. Und bei Browsern, die es 'tolerieren' - wie FF - füllt sich dann ruckizucki die Fehlerkonsole (zwar mit Warnungen und nicht Fehlern, aber es bleibt dennoch Quatsch).

Zitat von mixer2

allgemein ist javascript, css und html auch für sowas wie sliden nicht gedacht

Hä?

Mit 'ner sauber gehäkelten, auf setInterval oder setTimeout basierenden Geschichte ist das kein Problem.

**shf10105** · 31-10-2006, 17:26

Hi,
Ich habe mir da gerade mal eine Lösung ausgedacht.
Ich poste sie gleich mal :

PHP-Code:


<html>

    <head>

        <script type='text/javascript'>

var g_aContainer    =    new Array();

function $get(s)

{

    return g_aContainer[s];

}

function $add(o)

{

    var i = g_aContainer.length;

    g_aContainer[i] = o;

    return i;

}



function slider(oTarget)

{

    this.m_iSlide = 0;

    this.m_iDTime = 1000;

    this.m_iLTime = new Date().getTime();

    this.m_iSID = $add(this);

    this.m_oTarget = oTarget;

    this.m_piSource = [oTarget.offsetLeft,oTarget.offsetTop];

    this.m_piDest = [oTarget.offsetLeft,oTarget.offsetTop];

    

    

    this.slide    =    function()

    {

        var lt    =    new Date().getTime();

        this.m_iSlide += (lt-this.m_iLTime)/this.m_iDTime;

        if(this.m_iSlide>1)

        {

            this.m_iSlide = 1;

            clearInterval(this.m_iInterval);

        }

        var iLeft    =    this.m_piSource[0]+(this.m_piDest[0]-this.m_piSource[0])*this.m_iSlide;

        var iTop    =    this.m_piSource[1]+(this.m_piDest[1]-this.m_piSource[1])*this.m_iSlide;

        this.m_oTarget.style.left    =    iLeft+"px";

        this.m_oTarget.style.top    =    iTop+"px";

        this.m_iLTime    =    lt;

    }

    this.m_iInterval    =    setInterval("$get("+this.m_iSID+").slide();",10);

}

function slide(el,dest)

{

    var o = new slider(document.getElementById(el));

    o.m_piDest = dest;

    o.m_iSlide = 0;

    return o;

}

        </script>

    </head>

    <body>

        <div style='position:absolute;left:0;top:0;' id='slide'>hvhgvbgffgxvhgvnbvc</div>

        <a href='javascript:void();' onClick="slide('slide',[400,400]);">[to]</a>

        <a href='javascript:void();' onClick="slide('slide',[0,0]);">[back]</a>

    </body>

</html>

**inco** · 01-11-2006, 21:08

bin zufällig auf Deine einfallsreiche Funktion gestoßen,
so macht JS Spaß

eine Kleinigkeit:

die Links
<a href='javascript:void();' onClick="slide('slide',[400,400]);">[to]</a>
machen Probleme wegen dem Aufruf void()
(betrifft z.B. IE6 oder Opera8.5)

ich nutze dagegen drei Alternativen:
<a href='javascript:void(0);' onClick="slide('slide',[400,400]);">[to]</a>
<a href='javascript://' onClick="slide('slide',[400,400]);">[to]</a>
<a href='#' onClick="slide('slide',[400,400]);return false;">[to]</a>

**ein schlauer** · 02-11-2006, 10:18

Zitat von inco

ich nutze dagegen drei Alternativen:
....

wieso nutzt du nicht das was du machst:
es gibt doch keinen Grund hier einen Link zu verwenden, wenn man nur auf ein Element klicken will?

[to]

**ein schlauer** · 02-11-2006, 11:40

und die Slidefunktion etwas aufgeräumt, da die Ungarische Notation - Wikipedia seltsam ist - Fliesskommawerte sind als integer gekennzeichnet, Arrays als Pointer - und JS auch nicht unbedingt sinnvoll, dann noch etwas mehr OO, mit privaten Variabeln und das Objekt kann man wiederverwerten.
Dann ist es möglich auch ohne globale Variabeln die Timerfunktionen mit Objekt zu verwenden, erfodert aber einen kleinen Trick.
Ansonsten finde ich die Berechnung des Slidegeschwindigkeit in Abhängigkeit der Zeit sehr schön. Bei mir würde das Objekt so aussehen:

PHP-Code:


<script type="text/javascript">

function Slider(oTarget)

{

    var obj = oTarget;

    var start_pos;

    var dPos;

    var faktor = 1;

    var dTime = 1000;

    var aktTime;

    var interval = null;



    this.slide = function()

    {

         var lt = new Date().getTime();

         faktor += (lt - aktTime) / dTime;

         if(faktor > 1)

         {

              faktor = 1;

              clearInterval(interval);

         }

         var iLeft = start_pos[0] + dPos[0] * faktor;

         var iTop = start_pos[1] + dPos[1] * faktor;

         obj.style.left = iLeft + "px";

         obj.style.top = iTop + "px";

         aktTime = lt;

    }

    this.start = function(dest)

    {

         if(!obj) return alert('Kein Objekt');

         if(faktor < 1 ) return;

         var end_pos = dest || start_pos;

         start_pos = [obj.offsetLeft, obj.offsetTop];

         dPos = [ ( end_pos[0] - start_pos[0] ) , ( end_pos[1] - start_pos[1] )  ];



         aktTime = new Date().getTime();

         faktor = 0;



         var o = this;

         interval = setInterval(function() { o.slide(); }, 1);

    }

}

</script>

und der HMTL code z.b. so:

PHP-Code:


<div style='position:absolute;left:100px;top:100px;' id='slide'>hvhgvbgffgxvhgvnbvc</div>



<span onclick="o.start([400,400]);">[to]</span>



<span onclick="o.start([100,100]);">[back]</span>



<script type="text/javascript">

var o = new Slider(document.getElementById('slide'));

</script>

**inco** · 02-11-2006, 12:47

Zitat von ein schlauer

wieso nutzt du nicht das was du machst:
es gibt doch keinen Grund hier einen Link zu verwenden, wenn man nur auf ein Element klicken will?

[to]

Gründe, hier eine Link zu verwenden:
Die CSS-Gestaltung von Anklickbarem zum Beispiel, ist deprecated
und Texte zum Anklicken dürfen auch als solche erkennbar sein (ebenso ohne CSS). Man hat also zum Beispiel einen Pointer als Cursor, unterstrichenen Text, eine andere Textfarbe etc.

Es gibt hierzu noch eine vierte Variante ganz ohne eventhandler,
falls die Funktion slide() nicht unnötigerweise das Objekt zurück gibt:

<a href="javascript:slide('slide',[0,0]);">[back]</a>

**shf10105** · 02-11-2006, 18:10

@inco
Danke für den Tipp.
@ein schlauer
Danke auch für deine Korrekturen bezüglich der ungarschen Notation. Hab das Script aber nur mal eben so auf die schnelle geschrieben.

**ein schlauer** · 02-11-2006, 18:15

Gründe, hier eine Link zu verwenden:
Die CSS-Gestaltung von Anklickbarem zum Beispiel, ist deprecated
und Texte zum Anklicken dürfen auch als solche erkennbar sein (ebenso ohne CSS). Man hat also zum Beispiel einen Pointer als Cursor, unterstrichenen Text, eine andere Textfarbe etc.

Code:

style="cursor:pointer;text-decoration:underline;color:blue"

oder als CSS für Browser:

span[onclick]
{
cursor:pointer;
text-decoration:underline;
color:blue
}

**shf10105** · 02-11-2006, 18:22

Ich bin ja auch ein Freund dieser Elemente, aber man sollte die Elemente trotzdem nicht missbrauchen.
Ohne CSS muss die Seite auch funktionieren und die Links erkennbar sein.
Außerdem funktioniert die zweite Vorschrift meines Wissens nur im FF.

Thema: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

LinkBack

Themen-Optionen

Anzeige

Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

Ähnliche Themen

Crazy div / table - Verhalten

script das div id ändert ?

Probleme mit DIV Vordergrund/Hintergrund

Div Height mit JS modifizieren

DIV durch anderen DIV ersetzen

Lesezeichen

Lesezeichen

Berechtigungen

Veränderung eines Java script über...

Mithilfe einer jQuery Methode ein...

Anfänger hat click + touchstart...

json Datei mit Javascript erstellen

dynamische Tabelle im JS erstellen.

Veränderung eines Java script über...

Veränderung eines Java script über...

Mithilfe einer jQuery Methode ein...

Mithilfe einer jQuery Methode ein...

Mithilfe einer jQuery Methode ein...