Problem mit Mootools

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Problem mit Mootools

    Aloha,
    ich versuche mich momentan an mootools. Alles funktioniert prima, jedoch habe ich ein kleines Problem. Ich nutze das SlideFX und wenn die Seite geladen ist, ist automatisch der erste Div bereits geöffnet. Jedoch möchte ich das anfangs alle Divs geschlossen sind und erst bei einem Mouseover der jeweilige Div aufgeschoben wird. Kann mir bitte jemand sagen, wie ich das hin bekomme? Danke schonmal vorab!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link rel="stylesheet" href="demo.css" type="text/css" />
       <script type="text/javascript" src="../mootools.js"></script>
       <script type="text/javascript" type="text/javascript">
             window.addEvent('domready', function() { 	
                var status = { 		
                'true': 'open', 		
                'false': 'close' 	
                }; 	 		
             var myVerticalSlide = new Fx.Slide('vertical_slide');
             $('v_slidein').addEvent('click', function(e){ 		
                e.stop(); 		
                myVerticalSlide.slideIn(); 	
             });  	
             $('v_slideout').addEvent('click', function(e){ 		
                e.stop(); 		
                myVerticalSlide.slideOut();
             }); 	 	
             // When Vertical Slide ends its transition, we check for its status 	
             // note that complete will not affect 'hide' and 'show' methods
             myVerticalSlide.addEvent('complete', function() {
                $('vertical_status').set('html', status[myVerticalSlide.open]); 	
             });  
          });
       </script>
       <title>Fx.Slide Demo</title>
    </head>
    <body>
       <div class="marginbottom">
          <a id="v_slideout" href="#">slide out</a> 
          | <a id="v_slidein" href="#">slide in</a>
          | <strong>status</strong>: <span id="vertical_status">open</span>
       </div>
       <div id="vertical_slide">
          Lorem ipsum dolor sit amet.
       </div>
    </body>
    </html>

  • #2
    habe von bibliothek mooTools keine Ahnung, aber was stört dich daran in body onload myVerticalSlide.slideIn(); zu schreiben?
    Slava
    bituniverse.com

    Kommentar


    • #3
      Macht er nicht. Ich vermute er braucht den Click-Event, um das spezifische erste div zu nehmen?!

      Kommentar


      • #4
        Fehler - Es heisst natürlich SlideOut und funktioniert, jedoch sieht man ihn eben zuschieben, von daher leider nicht der gewünschte Effekt.
        Ein setzen des display auf none bringt leider auch nichts, denn dann ist er weg, egal ob man die Funktion ausführen möchte oder nicht.

        Kommentar


        • #5
          Okay, habs nun hinbekommen mit der Funktion "hide" aus selbiger Bibliothek. Falls jemand noch eine Alternatividee für die onload-Geschichte parat hat, wäre ich sehr dankbar. Jedoch erstmal auf jeden Fall vielen Dank für den einleuchtenden Hinweis!

          Kommentar


          • #6
            was soll die Aussage "setzen des display auf none bringt leider auch nichts" ?
            setzt der element direkt in html-code auf style="display:none" und dann setze das einfach auf 'display' bevor du slidein machst .
            .....
            e.stop();
            $('v_slideout').style.display='display';
            myVerticalSlide.slideOut();
            ......


            wann fertig?
            Slava
            bituniverse.com

            Kommentar


            • #7
              OffTopic:
              @slava
              hey, du alte socke. dich gibts auch noch?


              peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                Funzt leider nicht.

                Kommentar


                • #9
                  Da du die alte Version benutzt ist das ganze etwas "komplizierter". Mit der neuen 1.2 ist es wesentlich kürzer.

                  Zu deinem Problem (ungetestet):
                  Code:
                  window.addEvent('domready',function() {
                      var myVerticalSlide = new Fx.Slide('vertical_slide');
                      myVerticalSlide.hide();
                      $('v_slidein').addEvent('click', function() {
                             myVerticalSlide.toggle();
                      });    
                  });

                  Kommentar

                  Lädt...
                  X