CODEWITHSUNDEEP
javascriptloopsmootoolsslide
Захар Joe
Захар Joe

Reputation: 693

Best way to manipulate many sliding objects with moo tools's Fx.Slide

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?

Upvotes: 1

Views: 195

Answers (1)

Nils
Nils

Reputation: 2061

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/

Upvotes: 1

Related Questions