views:

98

answers:

2

Hi,
I am moving from jQuery to MooTools (for the fun..) and I have this line of code :

$subMenus = $headMenu.find('li ul.sub_menu:visible');

How I can write this in mootools?
I know that I can use getElements but How I can check for visible ul?(I am using this(:visible) selector a lot).

Edit -

I implemented my own function :

  function findVisibleElements(elementsCollection){
    var returnArray = [];
    elementsCollection.each(function(el){
      if(el.getStyle('display') === 'block'){
        returnArray.push(el);
      }
    });

    return returnArray;
  }

And what i want is to slide up all the visible sub menu, this is what I wrote :

// Sliding up the visible sub menus 
if( visibleSubMenus.length > 0 ){
  visibleSubMenus.each(function(el){
      var slider = new Fx.Slide(el, {duration: 2000});
      slider.slideOut();
  });
}

Why my code isn`t working?My function is working, and the problem is with the Fx.Slide.
I added mootools more with Fx.Slide.

A: 
sevenflow
I will change my questions - How I can get all the visible ul on my page?In jQuery I can use 'ul:visible'.
Yosy
I put up an edit that will work for your case. :visible isn't a standard pseudo-class so you have to be creative in Mootools.
sevenflow
+2  A: 

Just extend the selector functionality - it's MooTools!

$extend(Selectors.Pseudo, {
    visible: function() {
        if (this.getStyle('visibility') != 'hidden' && this.isVisible() && this.isDisplayed()) {
            return this;
        }
    }
});

After that just do the usual $$('div:visible') which will return the elements that are visible.

Check out the example I've created: http://www.jsfiddle.net/oskar/zwFeV/

Oskar Krawczyk
Thanks! why this line of code don`t work?var slider = new Fx.Slide(visibleSubMenus, {duration: 2000});
Yosy
Probably because `visibleSubMenus` is a collection of elements, and Fx.Slide takes a single element as the first value. Check out the example URL again (I've updated it) - http://www.jsfiddle.net/oskar/zwFeV/
Oskar Krawczyk
Ok,I changed to each but it`s just hiding the list and don`t slide them.This is the new code : visibleSubMenus.each(function(el) { var slider = new Fx.Slide(el, { duration: 2000 }); slider.slideOut(); });
Yosy
Ok,this is not working because the li`s have position:absolute,how can i fix it?
Yosy
Yes it is working, obviously the height of the `ul` needs to be fixed at a specific value. This is the price you have to pay when playing with positioning. Refresh the example link to see the updated code.
Oskar Krawczyk
Thanks a lot this is working :)
Yosy