Mootools Fx.Slide – Starts hidden – Slides open when clicked
by Nick Fassolas
This code will make the Fx.Slide start hidden and when the link is clicked it will slide open the hidden division.
Give your JS file or your CSS any filename you want but remember to link them in your html page, I have named them both “horizontal”
Here is the code I used to make it work.
The javascript (horizontal.js):
window.addEvent('domready', function() {
var status = {
'true': 'open',
'false': 'close'
};
//--horizontal
var myHorizontalSlide = new Fx.Slide('horizontal_slide').hide('horizontal');
$('h_slidein').addEvent('click', function(e){
e.stop();
myHorizontalSlide.slideIn('horizontal');
});
$('h_slideout').addEvent('click', function(e){
e.stop();
myHorizontalSlide.slideOut('horizontal');
});
$('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]);
});
});
The CSS (horizontal.css):
h3.section {
margin-top: 1em;
}
#horizontal_slide {
background: #000;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
width:600px;
min-height:700px;
}
div.marginbottom {
margin-bottom: 10px;
}
And finally the html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="horizontal.css" type="text/css" />
<script type="text/javascript" src="../mootools.js"></script>
<script type="text/javascript" src="horizontal.js"></script>
<title>Fx.Slide horisontal start hidden</title>
</head>
<body>
<h3 class="section">Horizontal</h3>
<div class="marginbottom">
<a id="h_slideout" href="#">close</a>
|
<a id="h_slidein" href="#">open</a>
| <strong>status</strong>: <span id="horizontal_status">open</span>
</div>
<div id="horizontal_slide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.
</div>
</body>
Hope it helps you in your endeavors for a creative and exciting design.
Labels: concepts, development, javascript, mootools
posted by Nick Fassolas @ Tuesday, December 02, 2008 | Permanent link here
1 Comments:
Very useful thank you.
Just what I was looking for.
Post a Comment
Links to this post:
Create a Link
<< Home