fetti: layer bzw <div> kontrolle

suche nach einer möglcihkeit um layer bzw <div>s zu ändern, und zwar möchte ich dass sie ihre größe verändern können mit einer bestimmten geschwindigkeit, und das für ie 5.0+
bitte wer so was ähnliches hat mir mit ideen aushelfen! danke schön! fetti

  1. sers!

    naja einfach mit javascript den layer ansprechen oder nicht
    und dann .width = wasweißich ...

    TOM

    1. hi
      ja genau da liegt ja mein problem, dass ich den layer bislang in der sache nicht ansprechen konnte! und die variable geschwindigkeit ist weiterhin nihct vorhanden, ich bräuchte da ein funktionierendes script oder zumindest eines das zum teil funktioniert, wie gesagt bei meinem kennt er entweder den layer nicht oder dann die neuen werte!

      fetti

      sers!

      naja einfach mit javascript den layer ansprechen oder nicht
      und dann .width = wasweißich ...

      TOM

      1. Moin!

        Erstmal </faq/#Q-09a> lesen und bitte von mir abgucken, wie man hier zitiert.

        ja genau da liegt ja mein problem, dass ich den layer bislang in der sache nicht ansprechen konnte! und die variable geschwindigkeit ist weiterhin nihct vorhanden, ich bräuchte da ein funktionierendes script oder zumindest eines das zum teil funktioniert, wie gesagt bei meinem kennt er entweder den layer nicht oder dann die neuen werte!

        Dein Problem zerfällt in drei Teile:

        1. Ansprechen eines Layers in Browsern.
        2. Ändern von Layereigenschaften (hier: Die Größe)
        3. Wiederholen von Schritt 2 in regelmäßigen Abständen, um den Eindruck einer fortlaufenden Bewegung zu erwecken.

        Zu 1:
        http://forum.de.selfhtml.org/archiv/2002/4/9692/#m53664
        Wie die Layer in den einzelnen Browsertypen (Netscape 4, IE 4, W3C-DOM) angesprochen werden, ist in den Funktionen showlayer und hidelayer erklärt.

        Zu 2:
        Wie du CSS-Eigenschaften ändern kannst, steht in
        http://selfhtml.teamone.de/dhtml/modelle/dom.htm#css_eigenschaften

        Zu 3:
        Wie du regelmäßig eine Funktion aufrufen kannst, steht in
        http://selfhtml.teamone.de/javascript/objekte/window.htm#set_timeout.

        So, und jetzt bist du erstmal am Drücker. Lesen, verstehen, probieren. Und Rückfragen wieder hier stellen.

        - Sven Rautenberg

        1. mahlzeit!

          Erstmal </faq/#Q-09a> lesen und bitte von mir abgucken, wie man hier zitiert.

          danke für den hinweiß!

          Zu 1:
          http://forum.de.selfhtml.org/archiv/2002/4/9692/#m53664
          Wie die Layer in den einzelnen Browsertypen (Netscape 4, IE 4, W3C-DOM) angesprochen werden, ist in den Funktionen showlayer und hidelayer erklärt.

          danke, das haut aber hin, bis auf mein befehl setWidth, da kommt immer eine fehlermeldung und zwar erwartet er sich beim befehl immer eine klammer wenn der wert fix angegeben wird oder er meint die variable ist entweder null oder ein punkt wenn er den wert aus einer textbox übernehmen soll
          (mein script ist hinten angehängt!)

          Zu 2:
          Wie du CSS-Eigenschaften ändern kannst, steht in
          http://selfhtml.teamone.de/dhtml/modelle/dom.htm#css_eigenschaften

          du meinst also ich sollte meinem layer lieber css eigenschaften verpassen und die ändern? hm, laut selfhtml erläuterung muss es hinhauen, habs noch nicht probiert da ich dickköpfig wissen will was an meinem script soo flasch ist, wenn du dann sagst dss da alles unfug ist verlasse ich mich auf die css angaben!

          Zu 3:
          Wie du regelmäßig eine Funktion aufrufen kannst, steht in
          http://selfhtml.teamone.de/javascript/objekte/window.htm#set_timeout.

          herzlcihen dank, das muss hinhauen!

          hier mein bisheriges werkln, wenn du den fehler findest, gib mir bitte bescheid, großen dank im voraus!

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <TITLE> New Document </TITLE>
          <script language="javascript">
          (document.layers) ? layerobject=true : layerobject=false;
          (document.all) ? allobject = true : allobject = false;
          (document.getElementById) ? dom = true : dom = false;

          function getElement(layerName,parentLayer)
          {
           if(layerobject)
           {
            parentLayer = (parentLayer)? parentLayer : self;
            layerCollection = parentLayer.document.layers;
            if (layerCollection[layerName])
             return layerCollection[layerName];
             /*look through nested layers*/
            for(i=0; i < layerCollection.length;)
             return(getElement(layerName, layerCollection[i++]));
           }
           if (allobject)
            {
            return document.all[layerName];
            }
           if (dom)
            {
            return document.getElementById(layerName);
            }
          }

          function setWidth(layerName, width)
          {
          var theLayer = getElement(layerName);

          if(layerobject)
             {theLayer.clip.width = width;}
          else if(opera)
             {theLayer.style.pixelWidth = width;}
          else
             {theLayer.style.width = width+"px";}
          }
          </script>
          </HEAD>

          <BODY>
          <div id="1" name="1" style="position: aboulte; width: 50px; background-color: #33ff99">test</div>
          <input type="text" id="width" name="width" value="500">
          <input type="button" value="set" onclick="setWidth('1',document.width.value)">
          </BODY>
          </HTML>

          1. Moin!

            hier mein bisheriges werkln, wenn du den fehler findest, gib mir bitte bescheid, großen dank im voraus!

            Im Grunde nur vier kleine Fehler:

            function setWidth(layerName, width)
            {
            var theLayer = getElement(layerName);

            if(layerobject)
               {theLayer.clip.width = width;}
            else if(opera)

            1. else if(window.opera)

            {theLayer.style.pixelWidth = width;}
            else
               {theLayer.style.width = width+"px";}
            }
            </script>
            </HEAD>

            <BODY>
            <div id="1" name="1" style="position: aboulte; width: 50px; background-color: #33ff99">test</div>

            1. <div id="buchstaben" style="position:absolute; width:50px; background-color:#33ff99">test</div>

            2. <form name="formu">

            <input type="text" id="width" name="width" value="500">
            <input type="button" value="set" onclick="setWidth('1',document.width.value)">

            1. <input type="button" value="set" onclick="setWidth('buchstaben',document.formu.width.value)">
                 </form>

            </BODY>
            </HTML>

            ;)

            Wenn du einfach den Javascriptfehlern gefolgt wärst, hättest du das auch ohne fremde Hilfe rausgefunden. Und Tippfehler sind natürlich auch böse, dagegen hilft der Validator für HTML und CSS im Zweifel.

            - Sven Rautenberg

            1. hi!

              herzlichen dank!

              würd dir ein dickes bussi schicken, geht leider nohc nicht beim derzieigen stand der dinge, aber aber das fertige produkt werd ich dir sicherlcih schicken!

              ;-) fetti

            2. hi

              hast du vielleihct auch noch eine idee wie man das setInterval() nicht automtaisch starten lassen könnte sondern mit einem onclick=""?

              hab versucht das in eine function resize() umzuwandeln nur erkennt er dann die variable i, nicht mehr. und zwar sucht er nach ihr gleich in zeile 1/1.

              hast du da vielleicht auch noch eine zündene idee?

              fetti

              1. hi

                hast du vielleihct auch noch eine idee wie man das setInterval() nicht automtaisch starten lassen könnte sondern mit einem onclick=""?

                Ich würde setTimeout nehmen und das in der Funktion ggf. immer wieder aufrufen, um den nächsten Funktionsaufruf zu starten.

                Also so:

                function test()
                {
                  if(confirm("Weitermachen?")
                  {
                    setTimeout("test()",1000);
                  }
                }

                Wenn confirm true ist (weil "OK" geklickt wurde), wird setTimeout aufgerufen, welches nach einer Sekunde erneut nachfragt. Könnte nervig werden, also Vorsicht ;).

                Gestartet wird das mit dem simplen Aufruf der Funktion test() beispielsweise im onclick.

                Animation fragt natürlich nicht nach, sondern ruft den nächsten Schritt dann auf, solange die Endposition noch nicht erreicht ist.

                Du brauchst also zwei Variablen: Eine kennt die aktuelle Breite, die andere die gewünschte Endbreite. Und außerdem brauchst du noch einen Wert, um den je Schritt die Breite geändert wird.

                Am Ende fragst du simpel ab:
                if (aktuellebreite < gewuenschtebreite)
                {
                  setTimeout("breitenfunktion()",50);
                }

                Vorsicht: 1. funktioniert das natürlich nur, wenn deine Breite zuerst kleiner ist als die gewünschte Breite. Die Bedingung mußt du umkehren, wenn du den Layer schmaler machen willst.

                2. Wenn du irgendwo einen konstanten Wert zum Addieren definierst, dann ist es sehr wahrscheinlich, daß du die gewünschte Breite nicht genau "triffst" - deshalb solltest du prüfen, ob die gewünschte Breite überschritten ist (eben von der einen oder anderen Seite her), die letzte Breitendefinition dann nicht mit dem errechneten, sondern mit dem gewünschten Breitenwert ausführen und die Animationsfunktion nicht weiter mit setTimeout aufrufen. Ganz einfach eigentlich. ;)

                hab versucht das in eine function resize() umzuwandeln nur erkennt er dann die variable i, nicht mehr. und zwar sucht er nach ihr gleich in zeile 1/1.

                Eine gesonderte Funktion resize zu haben, die nur den Layer auf eine gewünschte Breite setzt, ist eine gute Idee. Nur halte da die Animation raus - das wird IMHO einfacher.

                hast du da vielleicht auch noch eine zündene idee?

                Lesen, probieren, testen... lernen! :)

                - Sven Rautenberg