kostenloser Webspace werbefrei: lima-city


Alle x sekunden div id ändern?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    goldeneye

    Kostenloser Webspace von goldeneye

    goldeneye hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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.
  4. Autor dieses Themas

    goldeneye

    Kostenloser Webspace von goldeneye

    goldeneye hat kostenlosen Webspace.

    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 :thumb:
    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:biggrin:
  5. 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 :thumb:
    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:biggrin:

    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.
  6. Autor dieses Themas

    goldeneye

    Kostenloser Webspace von goldeneye

    goldeneye hat kostenlosen Webspace.

    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
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!