• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fehler bei slide down funktion bei mootols

F

Fr3ddy

Mitglied
Hi,

ich habe die funktion wie bei der mootools doc nachgebaut aber bei mir hat es nicht den gewünschten effekt, dass die content divs erst erscheinen, wenn man klickt, was mache ich denn falsch?

Hier der code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <script type='text/javascript' src='http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-compat.js'></script>
  <script type='text/javascript' src='http://fiddle.jshell.net/js/lib/mootools-more-1.4.0.1-compat.js'></script>
  <style type='text/css'>
      .wrapper{
        max-width:613px;
        float:left;
        position:relative;
    }
    .new { 
        border: solid 1px #ddd; 
        padding: 5px; 
        float:left;
        max-width:660;
        min-width:320px;
    }
    .item{
        width:120px;
        padding:10px;
        display:block;
        background-color:#CCC;
        float:left;
        margin:5px;
    }
    .content{
        padding:10px;
        height:80px;
    }
    .item:hover > .content{

    }
    .full{
        position:absolute;
        width:100%;
        display:block;
        height:100px;
        background-color:#666;
        left:0px;
    }
  </style>

<script type='text/javascript'>
window.addEvent('domready', function() {

    var status = {
        'true': 'close',
        'false': 'open'
    };
    status = true;
    var myVerticalSlide = new Fx.Slide('content');
    
    $('item').addEvent('click', function(event){
        event.stop();
        myVerticalSlide.toggle();
    });
});
</script>
</head>
<body>
<div class="wrapper">
      <div class="test">
        <div id="item" class="item">Test1
        <div id="content" class="content">
            <div class="full">
                <p>Content1</p>
            </div>
        </div>
        </div>
        <div class="item">Test2
        <div class="content">
            <div class="full">
                <p>Content2</p>
            </div>
        </div></div>
        <div class="item">Test3
        <div class="content">
            <div class="full">
                <p>Content3</p>
            </div>
        </div></div>
        <div class="item">Test4
        <div class="content">
            <div class="full">
                <p>Content4</p>
            </div>
        </div></div>
        <div class="item">Test5
        <div class="content">
            <div class="full">
                <p>Content5</p>
            </div>
        </div></div>
        <div class="item">Test6
        <div class="content">
            <div class="full">
                <p>Content6</p>
            </div>
        </div></div>
        <div class="item">Test7
        <div class="content">
            <div class="full">
                <p>Content7</p>
            </div>
        </div></div>
        <div class="item">Test8
        <div class="content">
            <div class="full">
                <p>Content8</p>
            </div>
        </div></div>
        <div class="item">Test9
        <div class="content">
            <div class="full">
                <p>Content9</p>
            </div>
        </div></div>
        <div class="item">Test10
        <div class="content">
            <div class="full">
                <p>Content10</p>
            </div>
        </div></div>
        <div class="item">Test11
        <div class="content">
            <div class="full">
                <p>Content11</p>
            </div>
        </div></div>
    </div>
</div>
</body>
</html>

LG & danke
 
Hab den fehler selber entdeckt, ich habe ja nur im ersten element die ids vergeben. -.-

Aber was anderes, wie kann ich mit klassen statt ids bei der funktion arbeiten?
 
Danke schon mal, nur leider bekommt ich da in deiser zeile einen fehler:


var myVerticalSlide = new Fx.Slide('div.content');

TypeError: Fx.Slide is not a constructor
 
Ich habe es dann doch so gelöst:
HTML: 
window.addEvent('domready', function() {
        $$('.item').each(function(el,ind){
            new Fx.Slide($$('.content')[ind]).toggle();
            el.addEvent('click', function(event){
                event.stop();
                var myVerticalSlide = new Fx.Slide($$('.content')[ind]).toggle();
            }); 
        })
    });

Mein problem ist jetzt nur noch, dass wenn ein div offen ist und ich auf ein anderes klicke, dass das offene div sich schliest und das angeklickte sich öffnet. Wie kann ich das realisieren?
 
Du wirst wahrscheinlich deshalb keine Antwort erhalten haben, weil Mootools nicht so häufig eingesetzt wird. Ich kenne es übrigens auch nicht, aber die Syntax ist ja ähnlich wie in jQuery.

Ich würde erst alle Elemente mit der Klasse .item schließen und anschließend das aktuell angeklickte öffnen. Also etwa so:

Code: 
$('.item').hide();
$(this).show();
 
Ich denke mal hier:

Code: 
el.addEvent('click', function(event){
     ...             
});


Gibt es dann einen Grund warum du Mootools verwendest?
Ich sehe leider keinen Vorteil darin.
 
Zuletzt bearbeitet:
Es ist leider vom cms so vorgegeben

HTML: 
window.addEvent('domready', function() {
        $$('.item').each(function(el,ind){
            new Fx.Slide($$('.content')[ind]).toggle();
            el.addEvent('click', function(event){
                $('.item').hide();
                $(this).show();
                event.stop();
                var myVerticalSlide = new Fx.Slide($$('.content')[ind]).toggle();
            }); 
        })
});//]]>

Da sagt firebug leider:

TypeError: $(...) is null
blank.gif

$('.item').hide();
 
scbawik schrieb:
Ich denke mal hier:

Code: 
el.addEvent('click', function(event){
     ...             
});


Gibt es dann einen Grund warum du Mootools verwendest?
Ich sehe leider keinen Vorteil darin.
Zum Vergrößern anklicken....

Mootools ist eindeutig besser konzipiert als jQuery (auch wenn mit 1.9 jQuery seine interne Struktur verbessert hat).

Was das Problem angeht: Mootools hat $ und $$. $ ist nur ein Alias für document.id(), bzw. getElementById (+ native DOM-Objekte). $$ ist wir $() in jQuery und akzeptiert CSS-Selektoren.
 
Wie gesagt, ich bin gerade dabei, mir selber javascript und mootool bei zu bringen, deshalb noch das fehlende wissen.
 
Mir gefällt es trotzdem nicht ;)

Laut Asterixus werden Elemente nach Klassen wie folgt selektiert - habe ich aber auch schon als erste Antwort geschrieben:

Code: 
el.addEvent('click', function(event){
     $$('.item').hide();
     $(this).show();
     event.stop();     
     var myVerticalSlide = new Fx.Slide($$('.content')[ind]).toggle();             
});

Ob $(this) klappt weiß ich aber nicht. Musst du eben probieren:

Code: 
$(this)
$E(this)
$$(this)
$ES(this)
this

Eines wird schon klappen ;)
 
Klappt leider nicht so ganz, hab das mal hier eingefügt:

Edit this Fiddle - jsFiddle

Das andere problem ist, wenn man auf die seite kommt, sind die erweiterten div sichtbar und dann schließen sie sich, nur sollen sie immer geschlossen sein, außer man klick auf die divs.
 
Fr3ddy schrieb:
Klappt leider nicht so ganz, hab das mal hier eingefügt:

Edit this Fiddle - jsFiddle

Das andere problem ist, wenn man auf die seite kommt, sind die erweiterten div sichtbar und dann schließen sie sich, nur sollen sie immer geschlossen sein, außer man klick auf die divs.
Zum Vergrößern anklicken....

Das liegt an deinem $$('.content').toggle().

Wenn du mal näher überlegst, ist es eigentlich eine ganz einfache Aufgabe. Nach dem Laden des DOM sollen alle Divs mit der Klasse content geschlossen sein, und bei Klick auf ein Element mit der Klasse item das jeweilige Children geöffnet werden. In jQuery könnte das etwa so aussehen aussehen:

Code: 
$(document).ready(function() {
    $('.content').hide();

    $('.item').on('click', function() {
        $('.content').hide();
        $(this).find('.content').show();
    });
});
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben