kleinichkeit - div größe per onMouseover ändern!
0 0 
Detlef G.
0 0 0 0 
Struppi
0
0 
Der Martin
0 0 Struppi
0
0 
JürgenB
kleinichkeit - div größe per onMouseover ändern!
Hey, hab hier ein kleines Problem.
Was ich machen möchte?
2 Div Container, wenn ich mit der maus über den
div Container A fahre >Fährt< div container B ein.
<head>
function leftbar(status)
{
if (status=="over")
{
document.getElementById("A").width = "0px";
}
}
</head>
<body>
<div id="A" >
</div>
<div id="B" onMouseover="leftbar('over')">
</div>
</body>
Extern CSS
#left{
widrh: 200px
position: absolute;left: 0px; top: 0px;bottom: 0px;
background-color: #666666;
float: left;
}
#bar{
width: 15px;
position: absolute;left: 200px; top: 0px;bottom: 0px;right: 0px;
float: left;
background-color: #A00000;
}
Das ganze soll dann später eine animation werden.
Da ich mit Js noch am anfang steht, wäre es hilfreich
wenn ihr mir eine kurze grund anleitung gäbt.
Sprich nimm ne for schleife und ... ;=)
Hatte hier schonmal einen andern beitrag in dem erwähnt wurde das
die for schleife ungeeignet für animationen sei!?
Allerdings nicht warum und was die alternative wäre, while?
Vielen dank für eure ZEIT und Hilfe
-
Hallo,
document.getElementById("A").width = "0px";
Das gibt es nicht. Wenn, dann gibt es das hier:
document.getElementById("A").style.width = "0px";"width" ist keine direkte Eigenschaft vom Element sondern eine Eigenschaft von "style".
MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: sh:( fo:| ch:} rl:( br:> n4:? ie:{ mo:) va:} js:| de:> zu:) fl:( ss:) ls:&
Go to this -
Hallo Pascal
Hatte hier schonmal einen andern beitrag in dem erwähnt wurde das
die for schleife ungeeignet für animationen sei!?
Allerdings nicht warum und was die alternative wäre, while?Nein, eine Schleife ist generell nicht für eine Animation geeignet. Diese würde mit der maximal möglichen Geschwindigkeit durchlaufen. Selbst wenn der Browser das Ende des Scripts nicht abwarten würde, bevor er die Anzeige aktualisiert, würdest du auf einem halbwegs schnellen Rechner nicht eine Animation sondern einen Sprung vom Ausgangs- zum Zielzustand sehen. Du würdest nur den Prozessor unnötig belasten. So etwas wie einen Warte-Befehl gibt es in Javascript nicht.
Schau dir mal Animieren in JavaScript aus dem Fader-Framework an, dort ist anhand eines einfachen Ladebalkens beschrieben, wie eine Animation ausgeführt werden kann.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Vielen dank, hat mir alles sehr geholfen.
Also löse ich animationen nicht mit einer schleife
sondern mit der if bediingung.Habe jetzt allerdings folgendes problem:!
function slider() { var left = document.getElementById("left"); var laenge = parseInt(left.style.width); if (laenge = 200) { function slider_in() { if (laenge > 10) { laenge--; left.style.width = laenge + "px"; window.setTimeout(slider_in, 10); } } } }Warum funktioniert das nicht???
und wie stelle ich es an, den aufruf einer weiteren function(b)
die sich auser von function(a) befindet:function a(){ ??aufrufen?? function b() } function b(){ blabla }Danke für eure Hilfe!!
-
Hi,
Warum funktioniert das nicht???
Warum lieferst du keine vernünftige Problembeschreibung?
if (laenge = 200)
Du willst an dieser Stelle vermutlich nicht wirklich eine Zuweisung vornehmen.
und wie stelle ich es an, den aufruf einer weiteren function(b)
die sich auser von function(a) befindet:function a(){
??aufrufen?? function b()
}function b(){
blabla
}Auch hier: Bitte vernünftig formulieren! Keine Ahnung, was du an der Stelle eigentlich wissen willst. Eine normale Funktion im globalen Gültigkeitsbereich rufst du auf, wie sonst auch. MfG ChrisB -- Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Okay, sry dann versuche ich es nochmal ausführlicher. Ich dachte der
code schipsel reicht aus um den Fehler zu finden.function slider() { var left = document.getElementById("left"); var laenge = parseInt(left.style.width); if (laenge == 200) { function slider_in() { if (laenge > 10) { laenge--; left.style.width = laenge + "px"; window.setTimeout(slider_in, 10); } } } }Also am == hat es nicht gelegen.
Ich habe einen DIV Container der beim Seitenaufruf 200px breit ist.
Wenn ich mit der Maus über diesen fahre wird die slider() function aufgerufen.
Dann soll sich der Div Container auf 10px reduzieren.
Soweit funktionierte das auch, jetzt möchte ich aber auch das der
div Container beim 2 MouseOver seinen zustand von 10px wieder verlässt und
in den ursprung zurüch geht, also auf 200px.Dazu habe ich die if abfrage eingebaut.
Ist er 200px groß mach in 10px
Ist er 10px groß mach in 200px großDas ganze will aber nicht funktionieren, ich vermute mal das dies an dem
aufruf der 2 function(slider_in) liegt.Vieleicht weiss darauf auch jemand eine antwort, wenn der container sich minimiert wird der text verschoben. Was könnte man dagen machen, overflow:hidden hat nicht geklappt.
Vielen Danke für eure mühe und nochmals sry für die recht kurzgehaltene problematik ;)
-
Okay, sry dann versuche ich es nochmal ausführlicher. Ich dachte der
code schipsel reicht aus um den Fehler zu finden.Lass dir mal die Länge ausgeben.
[code lang=javascript]function slider()
{
var left = document.getElementById("left");
var laenge = parseInt(left.style.width);alert(laenge);
Struppi.
-
Hi,
Vieleicht weiss darauf auch jemand eine antwort, wenn der container sich minimiert wird der text verschoben. Was könnte man dagen machen, overflow:hidden hat nicht geklappt.
Nicht das den Inhalt umfassende Element selber verkleinern, sondern ein darum liegendes.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-
-
Hallo,
Also löse ich animationen nicht mit einer schleife sondern mit der if bediingung.
und vor allem einem Timeout, der regelmäßig den nächsten Schritt der Animation anstößt.
function slider()
{
var left = document.getElementById("left");
var laenge = parseInt(left.style.width);Das nachstehende Problem Zuweisung vs. Vergleich wurde ja schon angesprochen. > ~~~javascript if (laenge = 200) > { > function slider_in() > { > if (laenge > 10) > { > laenge--; > left.style.width = laenge + "px"; > window.setTimeout(slider_in, 10); > } > } > } > }Wo rufst du denn slider_in() zum ersten Mal auf? So wie ich das sehe, deklarierst du diese Funktion nur, führst sie aber nie aus.
und wie stelle ich es an, den aufruf einer weiteren function(b)
die sich auser von function(a) befindet:
[code lang=javascript]function a(){
??aufrufen?? function b()
}Wie rufst du denn Funktionen sonst auf? ... Na also, und genauso machst du es in diesem Fall (der eigentlich der Regelfall ist) auch.
So long,
Martin--
Keine Sorge, wir finden für jede Lösung ein Problem.
-
-
Okay hab das Problem selbst lösen können.
Hatt nicht funktioniert da es die function noch nicht gab!function slider() { var left = document.getElementById("left"); var laenge = parseInt(left.style.width); if (laenge == 200) { function slider_in() { if (laenge > 10) { laenge--; left.style.width = laenge + "px"; window.setTimeout(slider_in, 10); } } // Hier nochmals aufgerufen, den jetzt erst exstiert die function! slider_in() } }Bleibt aber noch die frage wie ich auf externe funtionen(function b()) also auserhalb von {} der function a()
Function a()
{//ANFANG von A
Function b()
}//ENDE von AFunction b(){
}Unmöglich da b() nicht exestiert oder gibt es doch eine möglichkeit?
und noch ne kleine frage, die for schleife hatten wir als animation untauglich festgelegt. Wie siehts mit der while schleife aus? selbes Problem?-
Hatt nicht funktioniert da es die function noch nicht gab!
Seltsam, nach deiner Beschreibung müßte laenge undefined sein, die Breite eines Elementes ermittelt man mit .offsetWidth
// Hier nochmals aufgerufen, den jetzt erst exstiert die function!
slider_in()Nein sie existiert schon vorher, aber nur in der Funktion slider()
Unmöglich da b() nicht exestiert oder gibt es doch eine möglichkeit?
Nein, da b() in a() definiert ist, ist die Funktion lokal und kann nicht von aussen aufgerufen werden, dass ist in deinem Fall auch sinnvoll.
und noch ne kleine frage, die for schleife hatten wir als animation untauglich festgelegt. Wie siehts mit der while schleife aus? selbes Problem?
Ja.
Struppi.
-
Hi,
// Hier nochmals aufgerufen, den jetzt erst exstiert die function!
slider_in()Du hast sie vorher noch gar nicht aufgerufen, also ist "nochmals" falsch.
Und welchen Grund hat es eigentlich, *dass* du sie erst innerhalb der IF-Abfrage deklarierst?
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-