Seattle web design, development and marketing: consider the possibilites

30 Days of Mootools 1.2 Tutorials – Day 23 – Fx.Slide

Displaying elements with Fx.Slide

Welcome to day 23 of 30 days of Mootools 1.2 tutorials. If you haven’t already, be sure to check out the rest of our mootools series. Continuing with our tutorials about the Fx plugins, we are going to take a look at Fx.Slide. This plugin lets you display content by sliding it into view. It is very simple to use and makes a great addition to your UI toolkit.

The Basics

Like all the other classes we have looked at, the first thing you need to do is initiate a new instance of the Fx.Slide class and apply it to an element.

First, lets set up our html for the slide element.

<div id="slide_element" class="slide">Here is some content to slide.</div>

And our css doesn’t need to be anything fancy.

.slide {
	margin: 20px 0;
	padding: 10px;
	width: 200px;
	background-color: #DAF7B4;
}

Finally, we initiate a new instance of Fx.Slide and pass it our element variable.

var slideElement = $('slide_element');
 
var slideVar = new Fx.Slide(slideElement, {
	//Fx.Slide Options
	mode: 'vertical', //default is 'vertical'
 
	//Fx Options
	transition: 'sine:in',
	duration: 300,
 
	//Fx Events
	onStart: function(){
		$('start').highlight("#EBCC22");
	}
});

Since Fx.Slide is an extension of Fx, you can use any of the Fx options and events, but Fx.Slide does come with a set of options itself.

Fx.Slide options

There are only two Fx.Slide options, ‘mode’ and ‘wrapper.’ Frankly, I have never found myself using ‘wrapper’ (I have never come across the need), but ‘mode’ is what determines whether you want to slide horizontally or vertically.

mode

Mode gives you two choices, ‘vertical’ or ‘horizontal’. Vertical reveals from top to bottom and horizontal reveals from left to right. There are no options to go from bottom to top or from right to left, tho I understand that hacking the class itself to accomplish this is relatively simple. In my opinion, it’s an option I would like to see standard, and if anyone has hacked the class to allow this options, please drop us a note.

wrapper

By default, Fx.Slide throws a wrapper around your slide element, giving it ‘overflow’: ‘hidden’. Wrapper allows you to set another element as the wrapper. Like I said above, I am not clear on where this would come in handy and would be interested to hear any thoughts (thanks to horseweapon at mooforum.net for helping me clear this up).

Fx.Slide methods

Fx.Slide also features many methods for showing and hiding your element.

.slideIn()

As the name implies, this method will fire the start event and reveal your element.

.slideOut()

Slides your element back to the hidden state.

.toggle()

This will either slide the element in or out, depending on its current state. Very useful method to add to click events.

.hide()

This will hide the element without a slide effect.

.show()

This will show the element without a slide effect

override mode with methods

Each of the methods above also accept ‘mode’ as an optional parameter, letting you override anything set in the options.

slideVar.slideIn('horizontal');

Fx.Slide shortcuts

The Fx.Slide class also provides some handy shortcuts for adding the effect to an element.

.set(’slide’);

Instead of initiating a new class, you can create a new instance if you ’set’ slide on an element.

slideElement.set('slide');

setting options

You can even set options with the shortcut:

slideElement.set('slide', {duration: 1250});

.slide()

Once the slide is .set(), you can initiate it with the .slide() method.

slideElement.slide('in');

.slide will accept:

‘in’
‘out’
‘toggle’
’show’
‘hide’

…each corresponding to the methods above.

Example

That pretty much covers the basics. The example below uses most of what we learned above, displays a few different types of slides, and provides some indicator divs so you can watch the events.

First, set up the html.

<div id="start" class="ind">Start</div>
<div id="cancel" class="ind">Cancel</div>
<div id="complete" class="ind">Complete</div>
<br /><br />
 
<button id="openA">open A</button>
<button id="closeA">close A</button>
<div id="slideA" class="slide">Here is some content - A. Notice the delay before onComplete fires.  This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.</div>
 
<button id="openB">open B</button>
<button id="closeB">close B</button>
<div id="slideB" class="slide">Here is some content - B. Notice how if you click me multiple times quickly I "chain" the events.  This slide is set up with the option "link: 'chain'"</div>
 
<button id="openC">toggle C</button>
<div id="slideC" class="slide">Here is some content - C</div>
 
<button id="openD">toggle D</button>
<div id="slideD" class="slide">Here is some content - D. Notice how I am not hooked into any events.  This was done with the .slide shortcut.</div>
 
<button id="openE">toggle E</button>
 
<div id="slide_wrap">
<div id="slideE" class="slide">Here is some content - E</div>
</div>

Now, our css. We can keep it pretty simple.

.ind {
	width: 200px;
	padding: 10px;
	background-color: #87AEE1;
	font-weight: bold;
	border-bottom: 1px solid white;
}
 
.slide {
	margin: 20px 0;
	padding: 10px;
	width: 200px;
	background-color: #DAF7B4;
}
 
#slide_wrap {
	padding: 30px;
	background-color: #D47000;
}

Finally, our mootools javascript:

window.addEvent('domready', function() {
	//EXAMPLE A
	var slideElement = $('slideA');
 
	var slideVar = new Fx.Slide(slideElement, {
		//Fx.Slide Options
		mode: 'horizontal', //default is 'vertical'
		//wrapper: this.element, //default is this.element
 
		//Fx Options
		link: 'cancel',
		transition: 'elastic:out',
		duration: 'long',
 
		//Fx Events
		onStart: function(){
			$('start').highlight("#EBCC22");
		},
 
		onCancel: function(){
			$('cancel').highlight("#EBCC22");
		},
 
		onComplete: function(){
			$('complete').highlight("#EBCC22");
		}
	}).hide().show().hide(); //note, .hide and .show do not fire events
 
	$('openA').addEvent('click', function(){
		slideVar.slideIn();
	});
 
	$('closeA').addEvent('click', function(){
		slideVar.slideOut();
	});
 
 
 
	//EXAMPLE B
	var slideElementB = $('slideB');
 
	var slideVarB = new Fx.Slide(slideElementB, {
		//Fx.Slide Options
		mode: 'vertical', //default is 'vertical'
 
		//Fx Options
		//notice how chaining lets you click multiple time
		//then mouse away and the effects will keep going
		//for every click
		link: 'chain',
 
		//Fx Events
		onStart: function(){
			$('start').highlight("#EBCC22");
		},
 
		onCancel: function(){
			$('cancel').highlight("#EBCC22");
		},
 
		onComplete: function(){
			$('complete').highlight("#EBCC22");
		}
	});
 
	$('openB').addEvent('click', function(){
		slideVarB.slideIn();
	});
 
	$('closeB').addEvent('click', function(){
		slideVarB.slideOut();
	});
 
	//EXAMPLE C
	var slideElementC = $('slideC');
 
	var slideVarC = new Fx.Slide(slideElementC, {
		//Fx.Slide Options
		mode: 'vertical', //default is 'vertical'
		//wrapper: this.element, //default is this.element
 
		//Fx Options
		//link: 'cancel',
		transition: 'sine:in',
		duration: 300,
 
 
		//Fx Events
		onStart: function(){
			$('start').highlight("#EBCC22");
		},
 
		onCancel: function(){
			$('cancel').highlight("#EBCC22");
		},
 
		onComplete: function(){
			$('complete').highlight("#EBCC22");
		}
	}).hide();
 
	$('openC').addEvent('click', function(){
		slideVarC.toggle();
	});
 
 
	$('slideD').slide('hide');
 
	$('openD').addEvent('click', function(){
		$('slideD').slide('toggle');
	});
 
	//EXAMPLE C
	var slideElementE = $('slideE');
	var slideWrap = $('slide_wrap');
 
	var slideVarE = new Fx.Slide(slideElementE, {
		//Fx.Slide Options
		//mode: 'vertical', //default is 'vertical'
		wrapper: slideWrap //default is this.element
	}).hide();
 
	$('openE').addEvent('click', function(){
		slideVarE.toggle();
	});
});

Start

Cancel

Complete

Here is some content – A. Notice the delay before onComplete fires. This is due to the transition effect, the onComplete will not fire until the slide element stops “elasticing.” Also, notice that if you click back and forth, it will “cancel” the previous call and give the new one priority.

Here is some content – B. Notice how if you click me multiple times quickly I “chain” the events. This slide is set up with the option “link: ‘chain’”

Here is some content – C

Here is some content – D. Notice how I am not hooked into any events. This was done with the .slide shortcut.

Here is some content – E

To Learn More…

Fx.Slide is a versatile and incredibly useful plugin. To learn more, check out the Fx.Slide docs, the Fx.Morph and Fx docs.

Also, be sure to check our tutorials on Fx.Morph and the Fx options and events.

Download a zip of the final example

Along with everything you need to get started.

Tomorrow’s Tutorial

Will post a link once it is published

Questions, Comments or Suggestions

I wanted to get this one in before we got away from the basics, as its such a commonly used plugin. As always, hope you find this useful and let us know if you have any questions, comments or suggestions.

Tags: 30 days of mootools, Fx.Slide, javascript, Mootools 1.2, mootools plugins

This entry was posted on Wednesday, December 10th, 2008 at 7:19 pm and is filed under Mootools 1.2, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

38 Responses to “30 Days of Mootools 1.2 Tutorials – Day 23 – Fx.Slide”

Matt S says:

December 19, 2008 at 1:36 pm

Thank you very much for this!!!

Reply
Sukru Boztepe says:

December 24, 2008 at 3:51 am

Can you make a tutorial to show how to achieve the following web sites’ effects?

http://melissahie.com/

http://www.annekejanneke.be/#go_nieuws
without the scroll bar and with the floating menu.

Sincerely,

SukruB

Reply
Dan says:

January 4, 2009 at 2:53 pm

@SukruB
Yeah, that’s quite an interesting effect.. but without the menu where i can switch from sections, i find hard to navigate it freely.

Waiting for the next turorial!

Reply
Oliver says:

January 6, 2009 at 2:16 pm

Hi!
I don’t know but all of this effects don’t work if I copy your source codes.

Can sombody help me please?

Thanks,
Oliver

Reply
Bounga says:

January 8, 2009 at 3:09 am

Hi, great tutorials. Really interesting.

I noticed that your “mooforum.net” is broken.

Sincerely,

Nico.

Reply
J says:

January 8, 2009 at 8:50 am

These tutorials are exactly what the Mootools community needs!!

Reply
Schaapjeblaat says:

January 21, 2009 at 3:03 am

@SukruB:

Very nice effect indeed! I haven’t realy took al good look into it yet, but I think the effect you mean is achieved with smoothscroll. See the url below for some more info!

http://davidwalsh.name/smooth-scroll

Reply
IMoogle Portlets says:

January 21, 2009 at 12:39 pm

Hi… i like a lot your tutorials… when the number 24? It’s long time you don’t publish….

Reply
Eric Nickus says:

February 2, 2009 at 8:02 am

Im a java programmer and a ‘newb’ to mootools, … but aren’t there a couple of mistakes on the comments in the javascript?

Reply
Eric Nickus says:

February 2, 2009 at 8:05 am

also, I have never seen the )}.hide();
syntax … pretty slick

Reply
Eric Nickus says:

February 2, 2009 at 8:27 am

One Last thing and I’m done talking- – (I don’t want much help since javascript is so much fun and I lost most of my hair already anyways) but I have put the html in standards mode and my javascript isn’t working, should I worry about the DOCTYPE declaration being the cause of it? How important is that declaration?
(Im not showing my code because i don’t want any help with my code).
Eric Nickus

Reply
Troy says:

February 2, 2009 at 7:46 pm

@8 – As soon as we can!

@9 – It’s possible there are mistakes in the comments, drop me a note letting me know what you found and i’ll be sure to update the tutorial.

Reply
Simon says:

February 24, 2009 at 1:00 am

Thanks for a brillant intro to Mootools. I can’t wait to start using it!

Regarding future tutorials – ‘d love to see something on list, tables and trees.

Thanks again!

Reply
Jakob says:

February 27, 2009 at 3:10 am

Hi,

thank you very much for the tutorials since yet. They helped me really to get in Mootools.

Look forward to see the next parts – what I am really waiting for is the one about Request – which you already mentioned.
Jakob

Reply
Zoran says:

March 29, 2009 at 7:30 am

Thanks for these nice tutorials, but when are the next coming? I as PHP developer found MooTools very easy to learn compared to other javascript libraries, i was wondering also if you will put some tutorials about using Ajax with MooTools and PHP.
Thank you again for the tutorials

Reply
Lauren says:

March 31, 2009 at 4:00 pm

We definitely have more in the works. Please be patient with us, we haven’t abandoned the project

Reply
Mike Hankey says:

May 3, 2009 at 4:22 pm

Thanks for the series. Just sinking my teeth into Javascript and Ajax and looks like MooTools will be a great addition to the tool kit.
I look forward to the rest of the series.

Reply
Jumanji says:

May 17, 2009 at 10:56 pm

thank you guys for wonderful tuts….

Reply
setti says:

June 7, 2009 at 10:36 am

hi..

i have a long vertical page and use fx slide to switch between elements

the layout is like this:

A (Login) – hidden on load
B (Home)
C (Articles)
D (Contact)

I have navigation on the right side of the page.
when i click on link A to B or vice versa, it appears correctly,

but when i click on link C, contents D overlaps C

is this supposed to be like this? been trying to figure out this for 3 days now

also, is there any way we can get the status of the slider (slide in or out status) ?

Reply
alex hawley says:

June 16, 2009 at 11:58 am

I copied over the source code. there is a javascript error when you close the ‘A’ slide. How do you fix that?

Reply
Alfonso says:

June 18, 2009 at 3:23 pm

Hello,

Im new to programing and all this stuff, i got a question i got a site running and implemented the fx.slide option and is working perfectly my question is how do i do to call the toggle() metod in a regular javascript funtion.

Reply
proglammer says:

July 9, 2009 at 11:28 pm

hi there!
once again, thanks for great tuts!
do you plan to post the last 7 lessons of your tutorial or its not time for that now?

Reply
jam, andy jam says:

July 14, 2009 at 12:58 am

Thanx for sharing your knowledge. I find it very useful

Reply
MooTools Tutorials and Resources Round-Up « Tech7.Net says:

July 28, 2009 at 7:19 pm

[...] Fx.Slide [...]

Reply
MooTools Tutorials and Resources Round-Up » Shai Perednik.com says:

July 28, 2009 at 11:09 pm

[...] Fx.Slide [...]

Reply
AMB Album » MooTools Tutorials and Resources Round-Up says:

July 29, 2009 at 12:25 am

[...] Fx.Slide [...]

Reply
Shopping Mall » MooTools Tutorials and Resources Round-Up says:

August 4, 2009 at 3:12 am

[...] Fx.Slide [...]

Reply
Stephen says:

August 4, 2009 at 3:25 pm

does anyone know how to do a text scroller with up and down buttons using mootools.

like

http://sandbox.leigeber.com/contentslider/slider.html

I have manage to use the Scroller Class. But that is based on mouse position.

Reply
MooTools??????????? | CssRainBow.cn says:

August 13, 2009 at 12:22 am

[...] Fx.Slide [...]

Reply
A word about MooTools- Anastacia says:

August 17, 2009 at 6:57 am

[...] Fx.Slide [...]

Reply
MooTools???????????? | CssRainBow.cn says:

October 18, 2009 at 1:37 am

[...] Fx.Slide [...]

Reply
Alexandre says:

October 29, 2009 at 3:08 am

It seems the projet is abandoned…

:/

Reply
Lauren says:

October 29, 2009 at 12:41 pm

The project is not abandoned. When we have a lull we will finish it up. We’ve got to keep our clients happy, they pay the hosting bills

Reply
Michael says:

November 11, 2009 at 7:20 am

I ran into a little snag when trying to use Fx.Slide. My idea was to put something on top of an image and have it slide down when someone moused over the said image.

Suffice to say, it wasn’t working out how I had planned. It kept creating the wrapper and it was affecting my CSS. I eventually got it working with my wrapper, but had to do a little work around. I attempted the following:

new Fx.Slide(‘myelement’,{wrapper: $(‘mywrapper’)});

which didn’t work. It ended up creating a wrapper inside of my wrapper with the same end result. I had to do the following:

$(‘myelement’).store(‘wrapper’,$(‘mywrapper’));

That was the fix and it’s working now. Just figured I’d share my findings.

Reply
proglammer says:

December 2, 2009 at 11:25 pm

one of the best tuts of yours, because plenty of example and everything explained.

are you planning to do some more mootorials? after all, it’s a “30 days or Mootools 1.2″ series

Reply
Telling mootools Fx.Slide to start hidden « Michael Lauden says:

December 4, 2009 at 3:40 pm

[...] wouldn’t have to search Google for 30 minutes. The results I found were either a ridiculously complicated fix, to pay for a ‘solution‘ or just mean forum-sters “owning a [...]

Reply
jules says:

February 2, 2010 at 3:18 pm

is there a way for my problem:

if i click on “toggleC” then “toggleC” opens. and when i click on “toggleD” is it possible to close “toggleC” and open “toggleD”….
you know what i mean?!

if i click on “A” than open “A” .. and if i click on “B” than close “A” and open “B” …

please tell me how!

Reply
Chris says:

February 10, 2010 at 7:43 pm

For someone unfamiliar with the Mootools library but an avid learner and experienced programmer, “you had me at hello.”

The way this tutorial begins is a sell for the rest of it, and it only gets better. This one is one of the best thus far.

Thank you.

Reply

Individual and
Team Mootools
training.

Contact Us

Our Services

Design

Development

Marketing

Client Testimonials

30 Days of Mootools 1.2 Tutorials – Day 23 – Fx.Slide

Displaying elements with Fx.Slide

The Basics

Fx.Slide options

mode

wrapper

Fx.Slide methods

.slideIn()

.slideOut()

.toggle()

.hide()

.show()

override mode with methods

Fx.Slide shortcuts

.set(’slide’);

setting options

.slide()

Example

To Learn More…

Download a zip of the final example

Tomorrow’s Tutorial

Questions, Comments or Suggestions

38 Responses to “30 Days of Mootools 1.2 Tutorials – Day 23 – Fx.Slide”

Leave a Reply

Individual and Team Mootools training.

Contact Us

Article Categories

Our Services

Design

Development

Marketing

Client Testimonials

30 Days of Mootools 1.2 Tutorials – Day 23 – Fx.Slide

Displaying elements with Fx.Slide

The Basics

Fx.Slide options

mode

wrapper

Fx.Slide methods

.slideIn()

.slideOut()

.toggle()

.hide()

.show()

override mode with methods

Fx.Slide shortcuts

.set(’slide’);

setting options

.slide()

Example

To Learn More…

Download a zip of the final example

Tomorrow’s Tutorial

Questions, Comments or Suggestions

38 Responses to “30 Days of Mootools 1.2 Tutorials – Day 23 – Fx.Slide”

Leave a Reply

Individual and
Team Mootools
training.