Alle x sekunden div id ändern?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angeben
anpassen
aussehen
beispiel
code
dank
effekt
eigenschaft
einlesen
freuen
geschwindigkeit
hilfe
interessieren
kette
methode
millisekunde
optimieren
sekunde
wechsel
zahl
-
Wie ändert man alle x sekunden den namen eins divs? Möchte eine kette von Divs haben, von denen alle x sekunden einer größer wird. die benennung der div`s wird eine Zahl sein, die mit PHP ausgegeben wird?
also gibt es immer eine indeutige id. wie kann ich nun davon die klasse ändern? kann ich mit JS die id`s herausfinden?
Hättet ihr eine idee um das umzusetzen?
ruß
Daniel -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Viel einfacher oder eher viel schöner:
Du liest deine ganzen divs in ein array, also getelementsbytagname('div'). Das kannst du natürlich weiter einschränken zum Beispiel auf divs die in einem anderen bestimmten div liegen. Zum Beispiel:
divs = document.getElementById("myDiv").getElementsByTagName("div");
so, jetzt bestimmst du die Länge:
length = divs.length;
und setzt einen Startwert auf 0:
i = 0
Jetzt machst du eine Timeout-Funktion:
setTimeout("next()", 5000);
(5 Sekunden)
function next() { if(i!=0){ divs[i-1].styke. ... = ...; // Reset } else { divs[length-1].style. ... = ...; // Reset } divs[i].style. ... = ...; ... if(i==length-1){ i = 0;} }[code] Da du warschienlich die divs alle jedes Mal neu einlesen musst würde es in etwa so insgesamt aussehen [code]function init() { // onload="init()" setTimeout("next()", 5000); } i = 0; function next() { divs = document.getElementById("myDiv").getElementsByTagName("div"); length = divs.length; if(i!=0) { divs[i-1].style. ... = ...; // wieder kleiner machen } else { divs[length-1].style. ... = ...; // wieder kleiner machen } divs[i].style. ... = ...; // größer machen ... if(i==length-1) { i = 0; } }
Nicht getestet. -
nikic schrieb:
function init() { // onload="init()" setTimeout("next()", 5000); } i = 0; function next() { divs = document.getElementById("myDiv").getElementsByTagName("div"); length = divs.length; if(i!=0) { divs[i-1].style. ... = ...; // wieder kleiner machen } else { divs[length-1].style. ... = ...; // wieder kleiner machen } divs[i].style. ... = ...; // größer machen ... if(i==length-1) { i = 0; } }
Danke für die Hilfe bisher. e klappt
Wie wäre es eigentlich möglich, dass man den style- wechsel durch inen jquery- effekt ersetzt?
Würde einfach viel besser aussehen...
Hoffe du kannst mir auch diesmal weiterhelfen
Daniel
-
goldeneye schrieb:
nikic schrieb:
function init() { // onload="init()" setTimeout("next()", 5000); } i = 0; function next() { divs = document.getElementById("myDiv").getElementsByTagName("div"); length = divs.length; if(i!=0) { divs[i-1].style. ... = ...; // wieder kleiner machen } else { divs[length-1].style. ... = ...; // wieder kleiner machen } divs[i].style. ... = ...; // größer machen ... if(i==length-1) { i = 0; } }
Danke für die Hilfe bisher. e klappt
Wie wäre es eigentlich möglich, dass man den style- wechsel durch inen jquery- effekt ersetzt?
Würde einfach viel besser aussehen...
Hoffe du kannst mir auch diesmal weiterhelfen
Daniel
Also, dich dürfte wohl eigentlich die animate()-Methode interessieren. Das funktioniert so: Zuerst gibst du an was du ändern willst, und danach wie schnell, also:
animate({width:"300px", height:"100px"}, "fast");
Deine CSS-Eigenschaften die du ändern möchtest musst du noch anpassen. Für die Geschwindigkeit kannst du entweder "fast", "normal" oder slow oder eine Zahl von Millisekunden angeben.
Also, wie das insgesammt sein könnte:
$(document).ready(function() { setTimeout("next()", 5000); }); i = 0; function next() { divs = document.getElementById("myDiv").getElementsByTagName("div"); length = divs.length; if(i!=0) { $(divs[i-1]).animate({width:"200px", height:"70px"}, "fast"); } else { $(divs[length-1]).animate({width:"200px", height:"70px"}, "fast"); } $(divs[i]).animate({width:"300px", height:"100px"}, "fast"); ... if(i==length-1) { i = 0; } }
Wie immer nicht getestet.
Kann man sicher noch optimieren, ich arbeite nicht oft mit jQuery. -
nikic schrieb:
Also, dich dürfte wohl eigentlich die animate()-Methode interessieren. Das funktioniert so: Zuerst gibst du an was du ändern willst, und danach wie schnell, also:
animate({width:"300px", height:"100px"}, "fast");
Deine CSS-Eigenschaften die du ändern möchtest musst du noch anpassen. Für die Geschwindigkeit kannst du entweder "fast", "normal" oder slow oder eine Zahl von Millisekunden angeben.
Also, wie das insgesammt sein könnte:
$(document).ready(function() { setTimeout("next()", 5000); }); i = 0; function next() { divs = document.getElementById("myDiv").getElementsByTagName("div"); length = divs.length; if(i!=0) { $(divs[i-1]).animate({width:"200px", height:"70px"}, "fast"); } else { $(divs[length-1]).animate({width:"200px", height:"70px"}, "fast"); } $(divs[i]).animate({width:"300px", height:"100px"}, "fast"); ... if(i==length-1) { i = 0; } }
Wie immer nicht getestet.
Kann man sicher noch optimieren, ich arbeite nicht oft mit jQuery.
Irgendwie passirt jetzt garnichtsmehr
Davor war es auch schon etwas komisch, da alle 0,5 sekunden der zustand eines divs geändet wurde (grob geschätzt)
und jetzt bewgt sich garnichtsmehr....
kann es sein, dass zwei funktinen nicht gleichzeitig auf in Objekt zugreifen können?
Habe bisher ein script selber geschrieben, welches auf mouseover reagiert. dieses wollte ich jetzt noch mit eine "zeitschaltur" verbinden, damit es besser aussieht, man versteht worum es geht...
würde mich üner hilfe freuen
Daniel
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
