✔ Aufklapp Text

Status
Nicht offen für weitere Antworten.
I

Identität

Erfahrenes Mitglied
Hallo,
ich habe hier eine coole Seite gefunden
Seht ihr diese beiden Aufklappboxen? Wie kann man sowas machen? Ich finde das extrem gut und bräuchte ein Script. Es wäre nett, wenn mir jemand helfen kann. Danke im vorraus.

Gruß
 
Zuletzt bearbeitet:
Danke ich habe mir das Fx.Slide ausgesucht. Und mir dann die Datei runtergeladen. Dort ist ja auch ein Beispiel, welches bei mir nicht geht:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="mootools-release-1.11.js"></script>

<style type="text/css">
<!--


#test {
    background: #222;
    color: #fff;
    padding: 10px;
    margin: 20px;
    border: 10px solid pink;
}
 
#test2 {
    background: #222;
    color: #fff;
    padding: 10px;
    margin: 20px;
    border: 10px solid pink;
}


-->
</style>

<script type="text/javascript">
        window.addEvent('domready', function(){
            //-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();
            });
        }); 
    </script>


</head>

<body>


<h3 class="section">Fx.Slide Vertical</h3>
 
<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>
 
<h3 class="section">Fx.Slide Horizontal</h3>
 
<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>
 
<div id="test2">
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>

Die Texte klappen nicht aus. Woran liegt es? Die Datei aus dem Download Bereich habe ich runtergeladen, mit dem Effekt Fx.Slide...
 
Hi,
der Code funktioniert.

Hast du dir auch das mootools Framework heruntergeladen? ;)
Code: 
<script type="text/javascript" src="mootools-release-1.11.js"></script>

Gruß

.:lay-z-cow:.
 
Hast du meinen Code benutzt? ALso ich habe bei dem Download unter Effects die Slide.FX gedownloaded mit dem Core. Geht aber nicht...
KAnnst du mir Mal dein Framework anhängen?
 
Hi,

setz mal diesen Code ein, wie er in dem Online-Beispiel verwendet wird.
 

Anhänge

  • mootools.svn.zip
    48,7 KB · Aufrufe: 256
Okay das ist jetzt perfekt! Läuft alles... außer das der Text am Anfang ausgeklappt ist. Gibt es eine Möglichkeit den am Anfang ausgeblendet erscheinen zu lassen?
Echt gute Hilfe!
 
Code: 
<script type="text/javascript">
        window.addEvent('domready', function(){
            //-vertical

            var mySlide = new Fx.Slide('test');
            mySlide.hide();

            $('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'});
            mySlide2.hide();

            $('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();
            });
        });
</script>
 
um mal keinen neuen Thread auf zu machen...

Ich habe genau das gleiche Problem...Was mich allerdings wunder ist, Das ich es auf reinem Htlm angewandt habe zum Testen. Dort geht es wunderbar. Aber sobald ich es auf die selbe art und weise einbaue (Im Board) geht es nicht.

Den da verhält sich das Slide in und out als Link zur Seite. Das sols ja aber nicht sein, sondern wie schon gesagt die Box sol sich bei Slideout rein fahren und bei SlideIn wieder raus fahren.

Ich habe Erlich alles so gemacht wie ich es auch in der html gemacht habe. Js liegt da wo der Pfad angegeben ist und die Css auch. Woran liegt das?... weis das vielleicht einer?.. Wundert mich doch ein wenig.

Warum es auf der test Html seite geht, aber im Board selbst nicht. ICh hab schon Hohen puls hihi


Mfg..Hangrefer

Ps: ich sollte wohl erwähnen das ich das erste mal mit Mootools Arbeite^^ eine andere aber eben so wirksame Funktion habe ich nicht gefunden die OpenSource ist.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück