1

I'm trying to think of the most elegant solution to handle multiple Fx.Slides within mootools. I'm developing a dictionary page with a very long list of words where there's a pair word -- translation and all the translations must be hidden by default showing just a word list. I'm looking for a solution that won't require creating a separate slide for each word on the page, so that they're created on-the-fly when a visitor clicks on a word because the size of the script and performance hit concern me. There's another problem in that their initial states must be set to 'hidden' beforehand and I don't want to do it in CSS (that would hide everything from people whose browsers don't support javascript). Is anything of this sort possible or will I have to rely on creating slides in a loop (my element ids go like w01, w02, ...)? If so, how would I put that block inside a loop?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Захар Joe
  • 645
  • 2
  • 8
  • 14
  • I added an alternative solution to add the event listeners just in case you have huge amounts of things you want to toggle. – Nils Nov 14 '12 at 19:56

1 Answers1

1

Check out this question regarding if the user does not have Javascript Embedding extra styles with noscript.

After that is taken care of we can concentrate in mootools. You want the elements to have visability: hidden when you load the page with Javascript. Give your elements a class so we can select them all at once. Example to initialize the elements.

$$('.sliders').each(function(el) {
    el.slide('hide').setStyle('visibility', 'visible');
});

Now we need to handle the click event. The same goes here.

Example html:

<h3 class="slideIn" >Some title</h3>
<div class="sliders>Some lengthy text<div>

Example html:

$$('.slideIn').addEvent('click', function() {
    this.getNext().getChildren('.sliders').slide();
});

​ Example fiddle: http://jsfiddle.net/b4Zjs/

Edit: If there are a lot of elements that should have click events it's better to use event delegation. Then you are only adding one event listener to the page, and it can make a huge difference some times. 

$('parent').addEvent('click:relay(h3.slideIn)', function(event, target) {
   target.getNext().getChildren('.sliders').slide();
});

jsFiddle example: http://jsfiddle.net/b4Zjs/2/

Community
  • 1
  • 1
Nils
  • 2,041
  • 1
  • 15
  • 20
  • Thank you so much. Knowing nothing about Javascript (or how to work on classes) I started doing loops with arrays and managed to hide elements sequentially using wordslide[i] = new Fx.Slide(myobject[i]).hide(); but that is wrong wrong wrong. Your solution is perfect, exactly what I was hoping for. – Захар Joe Nov 14 '12 at 18:17
  • 3axap Joe, there is nothing inherently wrong with your method. You had simply instantiated each word's `Fx.Slide` object and stored it in an array, to be iterated over when required. This is essentially the same thing as using `$$()`, except `$$()` creates the element list on-the-fly and then exposes `Array`-type methods. – Julian H. Lam Nov 16 '12 at 13:44
  • Nils' method is superior only in that if your list is dynamically generated, calling `$$(.sliders)` will always return the complete list of words (with the `slider` class, anyways), as opposed to you having to maintain said list of words. – Julian H. Lam Nov 16 '12 at 13:45