mootools Slider

alex130

Erfahrenes Mitglied
hallo,
ich hab mir grad von MooTools den Slider heruntergeladen.
Hier ist der Code.
HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="../mootools.js"></script>
	<script type="text/javascript" src="demo.js"></script>
	<title>Fx.Slide Demo</title>
</head>
<body>
	<h1>Fx.Slide</h1>
	<h2>Introduction</h2>
	<p>
		Here goes a nice introduction
	</p>
	<h3 class="section">Vertical</h3>
	<div class="marginbottom">
		<a id="v_slideout" href="#">slide out</a>
		|
		<a id="v_slidein" href="#">slide in</a>
		|
		<a id="v_toggle" href="#">toggle</a>
		|
		<a id="v_hide" href="#">hide</a>
		|
		<a id="v_show" href="#">show</a>
		| <strong>status</strong>: <span id="vertical_status">open</span>
	</div>
	<div id="vertical_slide">
		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>

</body>
</html>

JS:
HTML:
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]);
	});
});

Nun meine Frage, wie muss man die Function umschreiben, damit ich sie anders aufrufen kann. Im moment klickt man auf toggle und dann wird die Function bei dem Div "vertical_slide" angewendet, aber ich will es so haben, dass ich biem Funtion Aufruf übergeben kann, auf welchen Div sie angewendet wird.
Kann mir da bitte jemand helfen?
Danke
 
Hi, ich bin ebenfalls auf dieses Script gestoßen. Würde aber gerne wissen, wie man den Ausganszustand auf "hide" setzen kann.

Im Idealfall wäre es so, dass die Box beim laden der Seite vorerst geschlossen ist.

Hat da jmd eine Idee?


Vielen Dank :)
 
Danke, aber in wiefern hilft mir das jetzt weiter? Ist doch genau das, was ich schon habe oder?

Problematik bei mir ist nur, dass beim Laden der Seite der Kasten ausgeblendet sein soll und man die Option hat ihn ggf einzublenden (wenn man das denn auch will).

taste mich gerade erst an JS ran. wäre also super wenn mir jmd da nen Denkanstoß geben könnte.

vielen Dank :)
 
Was du schon hast, weiß ich nicht, aber lies dir mal die User-Frage in dem Post vor meiner verlinkten Antwort durch, denn im Ausgangszustand (Script-Voreinstellung) sind die Boxen beim Seitenaufruf nicht versteckt.

Ansonsten, wenn du genau das schon hast, versteh ich deine Frage / dein Problem nicht.

mfg Maik
 

Neue Beiträge

Zurück