Pixelpost

xact · #11 02-29-2008, 03:18 PM

Don't forget

HTML Code:

window.addEvent('domready', function() {
	// HERE IS WHAT YOU READ IN JS CODE
});

It's a must, as moo creators explained here: http://demos.mootools.net/

For your example, do like this:

your .html:

HTML Code:

<html><head>
......
bla-bla-bla-dummy-content
......

 <script type="text/javascript" src="templates/my_template/scripts/mootools.js"></script>

window.addEvent('domready', function() {

//-vertical
 
var mySlide = new Fx.Slide('test');
 
$('slidein').addEvent('click', function(e){
	e = new Event(e);
	mySlide.slideIn();
	e.stop();
});
 
$('slideout').addEvent('click', function(e){
	e = new Event(e);
	mySlide.slideOut();
	e.stop();
});
 
$('toggle').addEvent('click', function(e){
	e = new Event(e);
	mySlide.toggle();
	e.stop();
});
 
$('hide').addEvent('click', function(e){
	e = new Event(e);
	mySlide.hide();
	e.stop();
});
 
 
//--horizontal
 
var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
 
$('slidein2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.slideIn();
	e.stop();
});
 
$('slideout2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.slideOut();
	e.stop();
});
 
$('toggle2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
});
 
$('hide2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.hide();
	e.stop();
});

});
</head>


<body>
......
bla-bla-bla-dummy-content
......




<h3 class="section">Fx.Slide Vertical</h3>
 
<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a>
 
<div id="test">
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.
</div>
 
<h3 class="section">Fx.Slide Horizontal</h3>
 
<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>
 
<div id="test2">
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.
</div>


......
bla-bla-bla-dummy-content
......

</body>
</html>

And .css looks like this:

HTML Code:

#test {
	background: #222;
	color: #fff;
	padding: 10px;
	margin: 20px;
	border: 10px solid pink;
}
 
#test2 {
	background: #222;
	color: #fff;
	padding: 10px;
	margin: 20px;
	border: 10px solid pink;
}

Good luck!

harem · #12 02-29-2008, 10:40 PM

thank you everyone and xact, i had forgot this code :

window.addEvent('domready', function() {
// HERE IS WHAT YOU READ IN JS CODE
});

but i have 1 problem now, i made a new button:

<a id="hide" href="#">hide</a> | <a id="show" href="#">show</a>

and it works fine, but how can i do both things with same button? like toggle, but not effect, just show and hide?

i hope someone can help me with that.

and how to hide it from the start whe you are loading the page? then later you can show it?

xact · #13 03-01-2008, 10:41 AM

For showing with no effect:

HTML Code:

$('show').addEvent('click', function(e){
	e = new Event(e);
	mySlide.show();
	e.stop();
});

To hide an element from the beginning, after declaring it as "var", you only have to hide it, like this:

HTML Code:

............
var mySlide = new Fx.Slide('test');
mySlide.hide();
.............

I don't know yet how to do it with the same button. If I have the time I'll dig a little to find out.

harem · #14 03-01-2008, 11:02 AM

thank you very much!

i will be waiting until you find out, if not, its okay, i will use toggle, but toggle sucks in firefox,

but in explorer very nice! :b first time explorer do something cool!

tapi · #15 06-05-2008, 07:11 PM

hi kevin..
where i have to put that code?
in the head or just where i want to show/hide?

Quote:

Originally Posted by kevincrafts

I'm a big fan of jquery - but to just simple show/hide without any sort of effect can be done without any library.

document.getElementById('comments').style.display = 'block'; to show

document.getElementById('comments').style.display = 'none'; to hide

Pixelpost

Authentic Photoblog Flavour