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.

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.

• javascript
• mootools
• css-selectors

Share Improve this question Follow edited Aug 22, 2010 at 16:35 Yosi asked Aug 22, 2010 at 14:31 YosiYosi 2,97677 gold badges4343 silver badges6565 bronze badges 3

• Accept some awnsers on your last 5 questions, makes people want to help you more. – BGerrissen Commented Aug 22, 2010 at 14:36
• we use mootools for everything on the current product my pany develops. I actually remend future people don't make this switch -- jquery is a centerpiece for a lot of really great up and ing libraries, and mootools doesn't do error handling as elegantly as jquery – Kristian Commented Jan 23, 2013 at 18:01
• My team also uses MooTools for just about everything and, contrary to Kristian, I remend people DO make the switch... if they're looking for all the power and flexibility of JQuery with a different more familiar JavaScript-y syntax. Otherwise, like most other JS frameworks, they're essentially the same. It's a personal preference. Error handling in MooTools is elegant, IMO (e.g. if something screws up, let me know. If I don't want to deal with it, I'll catch the exception). tl;dr: YMMV. – Xunnamius Commented Apr 1, 2013 at 22:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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/oskar/zwFeV/

The $$() function in Mootools is mostly equivalent to JQuery's $() does-it-all selector.

// in MooTools
var elements = $$('.someSelector');

// natively in most newer browsers
elements = document.body.querySelectorAll('.someSelector');

However, for this specific case since :visible isn't a real pseudo class, you'll have to approximate it using an Array filter in Mootools.

var isItemVisible = function (item) {
    return item.style.visibility != 'hidden' && item.style.display != 'none';
}
var elements = $$('ul').filter(isItemVisible);

There might be other things that you consider make an item 'invisible', in which case you can add them to the filtering function accordingly.