1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Mootools - Anfänger braucht Hilfe

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von dchrist1, 14.04.08.

  1. dchrist1

    dchrist1 Idared

    Dabei seit:
    14.04.08
    Beiträge:
    25
    Hey,
    ich habe eine schöne Funktion bei Mootools entdeckt, nur leider weiß ich nicht, wie ich sowas in eine Homepage einbauen kann.
    Die Funktion heißt Fx.Slide. (http://demos.mootools.net/Fx.Slide)
    Ich habe mal versucht die css, js und php dateien irgendwie hinzubasteln, es wird auch irgendwie angezeigt wie in dem Beispiel, nur leider funktioniert das alles nicht. :(

    Hoffe dass ihr mir vielleicht weiterhelfen könnt. Folgenden Aufbau haben die Dateien (alle in dem selben Ordner:

    index.html
    Code:
    <html>
          <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                <link rel="stylesheet" type="text/css" href="main.css">
                <script type="text/javascript" src="mootools.js"></script>
          </head>
          <body>
     
    <a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a>
    <div id="test">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
          </body>
    </html>
    main.css
    Code:
    body {
    background-color: white;
    color: black;
    font-family: "Times New Roman",Times, serif;
    padding-left: 11em;
    }
    #test {
    background: #222;
    color: #fff;
    padding: 10px;
    margin: 20px;
    border: 10px solid pink;
    }
    mootools.js
    Code:
    //-vertical
    var mySlide = new Fx.Slide('test');
    $('slidein').addEvent('click', function(e){
     e = new Event(e);
     mySlide.slideIn();
     e.stop();
    });
    $('slideout').addEvent('click', function(e){
     e = new Event(e);
     mySlide.slideOut();
     e.stop();
    });
    $('toggle').addEvent('click', function(e){
     e = new Event(e);
     mySlide.toggle();
     e.stop();
    });
    $('hide').addEvent('click', function(e){
     e = new Event(e);
     mySlide.hide();
     e.stop();
    });
     
    //--horizontal
    var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
    $('slidein2').addEvent('click', function(e){
     e = new Event(e);
     mySlide2.slideIn();
     e.stop();
    });
    $('slideout2').addEvent('click', function(e){
     e = new Event(e);
     mySlide2.slideOut();
     e.stop();
    });
    $('toggle2').addEvent('click', function(e){
     e = new Event(e);
     mySlide2.toggle();
     e.stop();
    });
    $('hide2').addEvent('click', function(e){
     e = new Event(e);
     mySlide2.hide();
     e.stop();
    });

    MfG
    Daniel
     
  2. Sir Q

    Sir Q Rheinischer Winterrambour

    Dabei seit:
    12.04.05
    Beiträge:
    921
    Nur so eine erste Idee - du hast die vollständigen aber in dem projekt liegen? oder? Weil - ohne die eigentlichen Funktionen, wird nur der effekt nicht funktionieren …

    mootools:download
     
  3. SnowWhite

    SnowWhite Gast

    Richtig, da fehlt auch eine Funktion in der JS selbst:
    Code:
    window.addEvent('domready', function(){
    Aber mit den Download fährt man sicher besser.
     
  4. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
  5. SnowWhite

    SnowWhite Gast

    Krass, mootools.js umfasst rund 3381 Zeilen Code. Sowas ginge sicher auch einfacher.
     
  6. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    ja ok. Ich habe aber jetzt auch die komplette Library genommen! Ich hatte keine Lust die einzelnen Module anzuklicken. Wenn du dir aber auf der Hompage von Mootools die Library zusammenstellst ist da doch schon ein erheblicher Unterschied.
     
  7. SnowWhite

    SnowWhite Gast

    Hast Recht. Ich habe mir auch keine Mühe gemacht das mal genauer zu betrachten dann hätte ich auch gesehen wieviele Funktionen/Module da enthalten sind.
     
  8. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    Die in der kompletten Lib vorhandenen Elemente brauchst du eh nie. Siehe Hash oder Json remote, von daher. Nachdem das Projekt soweit fertig ist einfach anschauen welche Skripte man verwendet, in die Doku schauen welche Pakete jedes einzelne Skript braucht und schon wird aus einer kompletten kompremierten 47 kb Datei ein kleines feines 20 kb Lib.

    Bei JS scheiden sich eh die Geister. Ich finds schlimm wenn jemand ein Skript, was auf HTML zugreift in eine externe Datei auslagert, da gehört das erstens nicht hin und wird zum Bleistift bei CM-Systemen bei jeder Seite geladen, was völlig unnötig ist.

    Zumal die Libs wie Mootools leider momentan nicht dafür eingesetzt werden, wofür Web 2.0 eigentlich im Grundgedanken stand: Usability und nicht : guck mal bei mir blinkts hier und da !

    Früher hat man gesagt <blink'> das Internet geht unter ! </ blink'> darf man auch wirklich nur für diesen einen Satz einsetzen. Im JS Zeitalter gilt guter Geschmack leider nur noch selten. Die meisten Seiten sind viel zu Skriptüberladen, was schade ist, denn an der richtigen Stelle eingesetzt halte ich ein JS für eine sinnvolle Sache.
     
  9. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    Im Javascript steht ja : Action: blablabla...click...was müsste man dort reinschreiben, dass man net klicken muss sondern nur drüberfahren?
     
  10. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    und wie kann man machen, dass das am anfang noch nicht erscheint, sondern erst wenn man klickt?
     
  11. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    In den meisten Punkten gebe ich dir Recht. Allerdings gehört JS tatsächlich in ein externes File.
    Ich sag nur MVC. JS gehört nicht in die Struktur, genau wie CSS nicht in die Struktur gehört.
     
  12. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
    sehe ich anders ;)

    a) kann ich es auch bei einem CMS pro seite laden lassen
    b) einmal geladen hängts eh in der cache ... so what
     
  13. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    Laden geht eh nur par hundertstelsec...
     
  14. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    So what ?
    Nicht jedes JS wird auf jeder Seite benötigt und das ist bei JS die auf HTML Elemente zugreifen eben meistens der Fall. Warum also 100 KB Skripte mitladen lassen, wenn die nur auf 2 Seiten gebraucht werden ? Quellcode Fetischist oder zu faul zum manuell einbinden, oftmals versteh ich das nicht.
    Das Lib in den Cache zu laden - ja - ständig benötigte in den Cache zu laden - ja - Dinge, welche Seitenbezogen benötigt werden in den Cache laden - Nein !
     
  15. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
    hast aber schon auch meienn ganzen kommentar gelesen, oder?

    a) kann ich es nur auf bestimmten seiten auch mit einem CMS laden

    aber viel wichtiger

    b) wenn es mal geladen wurde, dann wird es nicht auf jeder seite neu geladen sondern liegt im browsercache, wenn der nicht disabled ist ;)

    ... insofern once more ... so what :-D
     
  16. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    oh sorry - ich hab da was falsch verstanden :)
    Trotzdem würde jetzt nach dem Lehrbuch kommen, das Skripte welche auf HTML Elemente zugreifen auch in selbigen gehören. Aber ich gebe dir recht.

    So what - you re right ! :-D
     
  17. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
    yo ist halt wie auch beim css, da sind sicher auch styles drin die nicht auf jeder seite benötigt werden, man lädt es aber auch nur 1x und dann hängts im browsercache. ;)

    also nicht zusehr überbewerten mit der ladezeit, wo doch DSL immer schneller wird ;)
     
  18. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    :) poste doch diesen Satz mal bitte in meine Anfrage für das Abdunkeln einer Seite während eines Ladevorgangs bei einer Projektseite. Da ist man der Auffassung das eine Seite ruck zuck da sein muss, sonst ist die folglich schlecht gemacht oder vorbei am Ziel ;)
     
  19. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
    yo habe ich bereits gelesen ... aber weisste die einen sagen so, und die anderen sagen ... auch so :)

    früher hat man auch noch bilder vorgeladen, und davor hatten die männer in deutschland kaiserbärte und pickelhauben.

    wenn eine seite mit 1000er dsl in resonabler zeit geladen wird - dann bin ich glücklich, fertig.
    (und jetzt könnten wir diskutieren was resonabel ist ;))


    ich finde auch flashseiten nicht unbedingt immer fehl am platz ... kommt halt auf die zielgruppe an die man ansprechen will. und am ende habe ich lieber alles auf der ersten seite geladen und danach im cache.



    mein leitspruch: alles was ich jetzt warten muss hänge ich hinten an's leben dran :)
     

Diese Seite empfehlen