Seite 4 von 4 ErsteErste 1234
Ergebnis 46 bis 53 von 53
  1. #46
    ::JET::LI:: ist offline Mitglied
    registriert
    08-04-2008
    Beiträge
    36

    AW: Slide Out Menu OHNE MooTools etc.?

    die allgemeine easingformel ist diese:
    Code:
    diff =  Zielposition.y - momentanePosition.y
    easingFaktor = 20;
    momentaneposition.y += diff / easingFaktor;
    ich will sie nciht nehmen, weil sie nicht so smooth ist, wie die, die dortverwendet wird.

    Im Grunde will ich einfach nur dieses folgendes Script so umbauen, dass die init() funktion nicht mehr notwendig ist und die innere Tabelle ein div ist.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Klapptabelle!</title>
    <style type="text/css">
    <!--
    div.dyn {
      position:relative;
      overflow:hidden;
      width:300px;
      background-color:#c0c0c0;
    }
    
    div.dyn table {
      width:300px;
      position:absolute;
      margin:0;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    var Divs = new Array();
    var Toggles = new Array();
    
    function slide(num, flag){
      obj = Divs[num];
      window.clearTimeout(obj.motion);
      var step=10;
      uobj = obj.getElementsByTagName('TABLE')[0];
      oht = obj.style.height;
      oht = oht.substring(0, oht.indexOf('px'));
      oht = parseInt(oht);
      uht = uobj.offsetHeight;
      if(flag>0){
        step*=(1-oht/uht);
        step = Math.ceil(step);
        while ((step-1) > (uht-oht))
          step--;
        oht+=step;
        obj.style.height= oht + 'px';
        uobj.style.top = oht-uht;
        if(oht!=uht)
          obj.motion = window.setTimeout("slide("+ num +","+ flag +")", 10);
        else
          window.clearTimeout(obj.motion);
      } else {
        step*=(oht/uht);
        step = Math.ceil(step);
        while (step-1 > oht)
          step--;
        oht-=step;
        obj.style.height= oht + 'px';
        uobj.style.top = oht-uht;
        if(oht!=0){
          obj.motion = window.setTimeout("slide("+ num +","+ flag +")", 10);
        } else {
          window.clearTimeout(obj.motion);
        }
      }
    }
    
    function init () {
      var j = 0;
      for (i=0; i<document.getElementsByTagName('DIV').length; i++ ) {
        if(document.getElementsByTagName('DIV')[i].className=="dyn"){
          Divs[j] = document.getElementsByTagName('DIV')[i];
          Divs[j].motion=false;
          Divs[j].style.height="0px";
          Table = Divs[j].getElementsByTagName('TABLE')[0];
          Table.style.top = -1*(Table.offsetHeight+Table.offsetTop) + 'px';
          j++;
        }
      }
      j = 0;
      for (i=0; i<document.getElementsByTagName('A').length; i++ ) {
        if(document.getElementsByTagName('A')[i].className=="dyn"){
          Toggles[j] = document.getElementsByTagName('A')[i];
          Toggles[j].flag = 1;
          Toggles[j].j=j;
          Toggles[j].onclick = function () {
                                 slide(this.j, this.flag);
                                 this.flag*=-1;
                               }
          j++;
        }
      }
    }
    //-->
    </script>
    </head>
    <body onload="init()">
    <a href="javascript:void(0)" class="dyn">Hier</a>
      <div class="dyn">
        <TABLE BORDER="0">
          <TR>
    
            <TD>
    dsakcxjhwebintfuzcnsa<br>
    lfskdhjrsdgc<br>
    lkasjfghcirsdzgicsuzgjieudthgd<br>
    <br>
    aslkdjfcsiolzgucoelskjzgmxo<br>
    lösdjakjigfjciotrgfdjotrsugdjo<br>
    isduczhfiesrzugxhdiuxsezhgj8fdjz<br>
    skdjzfhgcifxsnug<br>
    <br>
    aksdjfhnchsdayjiomsufdxm
    
            </TD>
    
          </TR>
        </TABLE>
      </div>
    
      Weiterer Inhalt
    </body>
    </html>

  2. #47
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Slide Out Menu OHNE MooTools etc.?

    Zitat Zitat von ::JET::LI:: Beitrag anzeigen
    Im Grunde will ich einfach nur dieses folgendes Script so umbauen, dass die init() funktion nicht mehr notwendig ist und die innere Tabelle ein div ist.
    Und wo (jetzt fang ich gleich an zu fluchen) ist dein Problem? ob das ein div oder eine tabelle ist, ist ... egal und den rest hattest du doch auch schon, nur daß du ein "zugeklapptes" div zuklappen wolltest. über flag wird zu/auf-klappen gesteuert :

    Code:
    if(flag>0){ // aufklappen, das willst du machen
        step*=(1-oht/uht);
        step = Math.ceil(step);
        while ((step-1) > (uht-oht))
          step--;
        oht+=step;
        obj.style.height= oht + 'px';
        uobj.style.top = oht-uht;
        if(oht!=uht)
          obj.motion = window.setTimeout("slide("+ num +","+ flag +")", 10);
        else
          window.clearTimeout(obj.motion);
      } else { // zuklappen, das machst du
        step*=(oht/uht);
        step = Math.ceil(step);
        while (step-1 > oht)
          step--;
        oht-=step;
        obj.style.height= oht + 'px';
        uobj.style.top = oht-uht;
        if(oht!=0){
          obj.motion = window.setTimeout("slide("+ num +","+ flag +")", 10);
        } else {
          window.clearTimeout(obj.motion);
        }
      }

  3. #48
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: Slide Out Menu OHNE MooTools etc.?

    Zitat Zitat von ::JET::LI:: Beitrag anzeigen
    ich will sie nciht nehmen, weil sie nicht so smooth ist, wie die, die dortverwendet wird.
    Vergleiche auch die Diskussion über lineare und quadratische Easing-Funktionen.

    Zitat Zitat von ::JET::LI:: Beitrag anzeigen
    Im Grunde will ich einfach nur dieses folgendes Script so umbauen, dass die init() funktion nicht mehr notwendig ist und die innere Tabelle ein div ist.
    Ui, schon wieder ein anderes Skript.
    Es gibt zwei Möglichkeiten:
    a) Du setzt dich hin, nimmst das bestehende Skript auseinander und versuchst nicht nur jede Zeile für sich genommen zu verstehen, sondern auch den Kontext, das Drumherum, und den Einfluss jeder einzelnen Zeile auf das Gesamtwerk. Wenn Du das alles verstanden hast, dann dürfte es Dir leicht fallen das Skript nach Belieben zu ändern.
    b) Du schmeißt das Ding in den Müll und versuchst Deine eigenen Ideen zur Umsetzung. Das dauert zwar wesentlich länger, als einfach auf ein Framework zurückzugreifen, aber Du bist ja noch jung und hast die Zeit. Und wie ich das sehe, solltest Du sie Dir auch wirklich nehmen, denn im Moment kommst Du über das Herumstochern im Code nicht hinaus.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  4. #49
    ::JET::LI:: ist offline Mitglied
    registriert
    08-04-2008
    Beiträge
    36

    AW: Slide Out Menu OHNE MooTools etc.?

    oh... :sad: sry...

    ich habs zum Laufen gebracht:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    <meta name="author" content="jet">
    <style type="text/css">
    <!--
    #dyn {
      position:relative;
      overflow:hidden;
      width:300px;
      background-color:#c0c0c0;
      height:0px;
    }
    
    #dyn_inner {
      width:300px;
      position:absolute;
      margin:0;
    }
    -->
    </style>
    <script language="javascript">
    isinuse = false;
    function fangan()
    {
    obj = document.getElementById("dyn");
      step = 10;
      uobj = document.getElementById("dyn_inner");
      oht = obj.offsetHeight;
      uht = uobj.offsetHeight;
    if(isinuse == false) {
      inta = window.setInterval("downit()", 10);
      } else {
        inta = window.setInterval("upit()", 10);
      }
    }
    function downit() {
      step*=(1-oht/uht);
        step = Math.ceil(step);
        while ((step-1) > (uht-oht))
          step--;
        oht+=step;
        obj.style.height= oht + 'px';
        uobj.style.top = oht-uht;
        if(oht==uht) {
          isinuse = true;
          window.clearInterval(inta);
        }
    }
    function upit() {
        step*=(oht/uht);
        step = Math.ceil(step);
        while (step-1 > oht)
          step--;
        oht-=step;
        obj.style.height= oht + 'px';
        uobj.style.top = oht-uht;
       if(oht==0){
         isinuse = false;
          window.clearInterval(inta);
        }
    }
    
    </script>
    </head>
    <body>
    <a href="javascript:fangan();">Starten</a>
       <div id="dyn">
    <div id="dyn_inner">
    dsakcxjhwebintfuzcnsa<br>
    lfskdhjrsdgc<br>
    lkasjfghcirsdzgicsuzgjieudthgd<br>
    <br>
    aslkdjfcsiolzgucoelskjzgmxo<br>
    lösdjakjigfjciotrgfdjotrsugdjo<br>
    isduczhfiesrzugxhdiuxsezhgj8fdjz<br>
    skdjzfhgcifxsnug<br>
    
    <br>
    aksdjfhnchsdayjiomsufdxm
    
      </div>
      </div>
    </body>
    </html>
    das ist aber etas anders als bei dem normalen - erst so 10 pixel richtig schnell, dann langsam und linear - so sollte es aber nicht sein... was ist da flash? wenigstens funzt es schonmal so halb...

  5. #50
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Slide Out Menu OHNE MooTools etc.?

    Zitat Zitat von ::JET::LI:: Beitrag anzeigen
    das ist aber etas anders als bei dem normalen - erst so 10 pixel richtig schnell, dann langsam und linear - so sollte es aber nicht sein... was ist da flash? wenigstens funzt es schonmal so halb...
    Pfff, weißt du eigentlich selbst was du willst? Was soll denn hier falsch laufen, das läuft doch genau so wie in deinem Beispiel?! Was ist denn für dich normal? Mal davon abgesehen, daß es sowieso keiner merkt, ob die Bewegung linear, quadratisch oder exponentiell verläuft, hast du doch schon alles hier gehabt. Nimm halt
    step = Math.min(Math.max(Math.ceil(Math.pow(oht/uht, 2) * uht), 1), uht - oht);
    oht += step;
    fürs aufklappen (zuklappen analog) oder was immer du willst
    Geändert von tsseh (17-07-2008 um 01:49 Uhr)

  6. #51
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: Slide Out Menu OHNE MooTools etc.?

    Zitat Zitat von hesst Beitrag anzeigen
    Nimm halt endlich mootools!
    Ich hab das mal für Dich gefixt.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  7. #52
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Slide Out Menu OHNE MooTools etc.?

    Dann könnte er auch endlich das HTML reparieren, den Standardmode statt Quriksmode verwenden, vielleicht bleibt noch ein wenig Zeit den Programmierstil zu verbessern, globale Variabeln sind für ein solches Skript nicht sinnvoll (probier mal das Skript auf zwei oder mehr Elemente anzuwenden). Aber ich wiederhole mich.

  8. #53
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Slide Out Menu OHNE MooTools etc.?

    Ich hatte ja gehofft, daß jetzt sowas kommt wie "das geht mir jetzt zu schnell".
    Viel wichtiger als die Bewegungsform ist meiner Meinung nach die Zeit, nach der die Bewegung abgeschlossen sein soll. Und die ergibt sich bei dir nur aus der "Formel". Also wenn dein Zielpunkt erreicht ist, ist die Zeit um.
    Und mit dieser Vorgabe kannst du jetzt auch viel einfacher eine Formel s = f(t) umsetzen/finden, da du jetzt ganz einfach rausbekommst, wo du dich in deinem Weg-Zeit-Profil befindest - sprich s berechnen. Auch kannst du dein Intervall so bestimmen, daß es zur Gesammtzeit aufgeht, du also am Ende keinen Knick bekommst.

Seite 4 von 4 ErsteErste 1234

Ähnliche Themen

  1. Script einfügen
    Von tanne im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 06-02-2008, 10:36
  2. Menubar Problem
    Von watchword-anaki im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 12-01-2007, 12:36
  3. Defektes (?) Menü
    Von Lydia.h im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 22-09-2005, 11:41
  4. Menü mit Untermenü umprogrammieren
    Von bubu-der-uhu im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 04-05-2005, 11:57
  5. JavaScript umändern
    Von Nonens im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 11-04-2002, 12:03

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •