Ergebnis 1 bis 15 von 22
-
31-10-2006, 16:22 #1
Grünschnabel
- registriert
- 31-10-2006
- Beiträge
- 5
Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
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!
-
31-10-2006, 16:30 #2
Mitglied
- registriert
- 31-10-2006
- Beiträge
- 32
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
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>
-
31-10-2006, 16:36 #3
Grünschnabel
- registriert
- 31-10-2006
- Beiträge
- 5
-
31-10-2006, 16:42 #4
Mitglied
- registriert
- 31-10-2006
- Beiträge
- 32
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "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>
-
31-10-2006, 16:46 #5pit-r Guest
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
Moin!
Zitat von mixer2
Ahoi - Pit
-
31-10-2006, 17:06 #6
Mitglied
- registriert
- 31-10-2006
- Beiträge
- 32
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
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.
-
31-10-2006, 17:11 #7pit-r Guest
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
Zitat von mixer2
Zitat von mixer2
Mit 'ner sauber gehäkelten, auf setInterval oder setTimeout basierenden Geschichte ist das kein Problem.
-
31-10-2006, 17:26 #8
Haudegen
- registriert
- 04-05-2006
- Ort
- Duisburg
- Beiträge
- 625
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
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>
Geändert von shf10105 (31-10-2006 um 17:30 Uhr) Grund: Code hinzugefügt
while(windows.iq < 130) linux.use();
"Die Tastatur wurde nicht gefunden, bitte drücken sie F1 um fortzufahren."
-
01-11-2006, 21:08 #9
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
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>Gruß
inco
···································································································· ········································································
Nur der Statistiker glaubt, mit dem Kopf im Ofen und den Füßen im Sektkühler müsste es ihm durchschnittlich gut gehen!
-
02-11-2006, 10:18 #10
Lounge-Member
- registriert
- 18-08-2004
- Beiträge
- 14.671
-
02-11-2006, 11:40 #11
Lounge-Member
- registriert
- 18-08-2004
- Beiträge
- 14.671
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
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>
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>
-
02-11-2006, 12:47 #12
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
Gründe, hier eine Link zu verwenden:
Die CSS-Gestaltung von Anklickbarem zum Beispiel, <u> 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>Gruß
inco
···································································································· ········································································
Nur der Statistiker glaubt, mit dem Kopf im Ofen und den Füßen im Sektkühler müsste es ihm durchschnittlich gut gehen!
-
02-11-2006, 18:10 #13
Haudegen
- registriert
- 04-05-2006
- Ort
- Duisburg
- Beiträge
- 625
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
@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.while(windows.iq < 130) linux.use();
"Die Tastatur wurde nicht gefunden, bitte drücken sie F1 um fortzufahren."
-
02-11-2006, 18:15 #14
Lounge-Member
- registriert
- 18-08-2004
- Beiträge
- 14.671
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
Gründe, hier eine Link zu verwenden:
Die CSS-Gestaltung von Anklickbarem zum Beispiel, <u> 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 }
-
02-11-2006, 18:22 #15
Haudegen
- registriert
- 04-05-2006
- Ort
- Duisburg
- Beiträge
- 625
AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??
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.while(windows.iq < 130) linux.use();
"Die Tastatur wurde nicht gefunden, bitte drücken sie F1 um fortzufahren."
Ähnliche Themen
-
Crazy div / table - Verhalten
Von hugobeck im Forum JavaScriptAntworten: 4Letzter Beitrag: 06-10-2006, 15:53 -
script das div id ändert ?
Von darkstar im Forum JavaScriptAntworten: 2Letzter Beitrag: 22-08-2006, 13:02 -
Probleme mit DIV Vordergrund/Hintergrund
Von ImpCaligula im Forum CSS und (X)HTMLAntworten: 2Letzter Beitrag: 17-08-2006, 11:06 -
Div Height mit JS modifizieren
Von baminc im Forum JavaScriptAntworten: 4Letzter Beitrag: 19-11-2005, 13:49 -
DIV durch anderen DIV ersetzen
Von Reisender im Forum CSS und (X)HTMLAntworten: 4Letzter Beitrag: 22-09-2005, 18:16
Lesezeichen