Fx.slide using Mootools and CakePhp

Using Fx.slide in Cakephp is very easy. In this tutorial, I assume you know how the MVC works and how to create one.

First, include the javascript in the head section of the default.ctp file. There are only two javascript files. They are the mootools.js( core ) and slider.js. Put these files inside /app/webroot/js.

echo $this->Html->script('mootools');
echo $this->Html->script('slider');

In the index.ctp file, create a link that will serve as the clickable element in order to slide the element in and out.

echo $html->div('', $html->link('Toggle', '#', array( 'id' => 'v_toggle' ) ) )

Next, create a div element. This will contain the content that we will slide.

echo $html->div('', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', array('id' =>'vertical_slide' ));

And the mootools slider script…

window.addEvent('domready', function() {
	var slider = new Fx.Slide('vertical_slide');
	$('v_toggle').addEvent('click', function(e){
		e.stop();
		slider.toggle();
	});
});