CODEWITHSUNDEEP
javascriptmootools
Brant
Brant

Reputation: 6031

MooTools Fx.Slide throwing this.element is null

The following code is throwing the error "this.element is null". However, the wid_cont is definitely grabbing an element.

window.addEvent('domready',function(){
 var min = $(document.body).getElements('a.widget_minimize');
 min.addEvent('click',
  function(event){
   event.stop();
   //var box = ;
   var wid_cont = ($(this).getParents('.widget_box').getElement('.widget_box_content_cont'));
   var myVerticalSlide = new Fx.Slide(wid_cont);
   myVerticalSlide.slideOut();
  }
 );
});

It's moo tools 1.2.4 and has the fx.slide included....

Upvotes: 0

Views: 1489

Answers (1)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

it does not return a single element but an array due to getParents() and possible other similarly marked up elements, Fx.Slide requires you pass it a single element.

here it is at least partially working when passing first item of the array: http://www.jsfiddle.net/KFdnG/

however, this is imo ineffective and difficult to manage if you have a long list of items and need a particular content layer to unfold only, you want to keep the lookup to the content layer more local.

something like this: http://www.jsfiddle.net/KFdnG/4/

// store an instance into each content div and set initial state to hidden.
$$("div.widget_box_content_cont").each(function(el) {
    el.store("fxslide", new Fx.Slide(el).hide());
});

$$('a.widget_minimize').addEvent('click', function(event) {
    event.stop();
    // can't use this.getNext() due to wrapper by Fx.Slide which does not have the instance.
    this.getParent().getElement("div.widget_box_content_cont").retrieve("fxslide").toggle();
});

which works on the markup of:

<div class="widget_box">
    <div class="widget_box_content">
        <a href="#" class="widget_minimize">link</a>
        <div class="widget_box_content_cont">
            some content
        </div>
    </div>
    <div class="widget_box_content">
        <a href="#" class="widget_minimize">link 2</a>
        <div class="widget_box_content_cont">
            some content 2
        </div>
    </div>    
</div>

this is also better as you won't be making a new instance of the Fx.Slide class on every click but will reference the ones already attached to the element.

Upvotes: 1

Related Questions