h3.section {
margin-top: 1em;
}
#vertical_slide, #horizontal_slide {
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
window.addEvent('domready', function() {
var status = {
'true': 'open',
'false': 'close'
};
//-vertical
var myVerticalSlide = new Fx.Slide('vertical_slide');
$('v_slidein').addEvent('click', function(e){
e.stop();
myVerticalSlide.slideIn();
});
$('v_slideout').addEvent('click', function(e){
e.stop();
myVerticalSlide.slideOut();
});
$('v_toggle').addEvent('click', function(e){
e.stop();
myVerticalSlide.toggle();
});
$('v_hide').addEvent('click', function(e){
e.stop();
myVerticalSlide.hide();
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
$('v_show').addEvent('click', function(e){
e.stop();
myVerticalSlide.show();
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
// When Vertical Slide ends its transition, we check for its status
// note that complete will not affect 'hide' and 'show' methods
myVerticalSlide.addEvent('complete', function() {
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
//--horizontal
var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});
$('h_slidein').addEvent('click', function(e){
e.stop();
myHorizontalSlide.slideIn();
});
$('h_slideout').addEvent('click', function(e){
e.stop();
myHorizontalSlide.slideOut();
});
$('h_toggle').addEvent('click', function(e){
e.stop();
myHorizontalSlide.toggle();
});
$('h_hide').addEvent('click', function(e){
e.stop();
myHorizontalSlide.hide();
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
$('h_show').addEvent('click', function(e){
e.stop();
myHorizontalSlide.show();
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
// When Horizontal Slide ends its transition, we check for its status
// note that complete will not affect 'hide' and 'show' methods
myHorizontalSlide.addEvent('complete', function() {
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
});
Fx.Slide Demo
Fx.Slide
Introduction
Here goes a nice introduction
Vertical
slide out
|
slide in
|
toggle
|
hide
|
show
| status: open