Problem mit FX.Slide Bild für "toggle" und änderbar

dwex

dwex

Erfahrenes Mitglied
Hallo Leute,

ich experimentiere für ein Projekt gerade mit FX.Slide.
Jetzt möchte ich zwei Div übereinander positionieren, sodass das obere ein Bild enthält mit der Überschrift der Box und einem Pfeil nach unten. Darunter soll die Box (Navigation) angezeigt werden. Das funktioniert auch bestens.

Jetzt zu meinem Problem:
In der Demo gibt es ja einen Status für "open" und "close" der angezeigt wird wenn die Box entweder geöffnet oder geschlossen ist. Jetzt war meine Idee genau dieses durch eine Grafik zu ersetzen und auf die Grafik einen Link zum öffnen oder schliessen der Box zu setzen. Leider funktioniert es nicht so wie ich es gemacht habe (also die Box wird nicht aus- bzw. eingeblendet - kann mir bitte einer Sagen warum das nicht geht?

Hier der Ursprungsquelltext:
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="./includes/demo.css" type="text/css" />
	<script type="text/javascript" src="./includes/mootools.js"></script>
	<script type="text/javascript" src="./includes/demo.js"></script>
	<title>Fx.Slide Demo</title>
</head>
<body>

<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>: <div id="vertical_status">open</div>
	</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>
Dazu das JS:
Code: 
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]);
	});
});
Das ganze habe ich dann wie folgt abgeändert:
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="./includes/demo.css" type="text/css" />
	<script type="text/javascript" src="./includes/mootools.js"></script>
	<script type="text/javascript" src="./includes/demo.js"></script>
	<title>Fx.Slide Demo</title>
</head>
<body>

<body>
	<h1>Fx.Slide</h1>
	<h2>Introduction</h2>
	<p>
		Here goes a nice introduction
	</p>
	<h3 class="section">Vertical</h3>
	<div class="marginbottom">
		<div id="vertical_status"><a id="v_toggle" href="#"><img src="allgemein_open.jpg" border=0></a></div>
	</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>
und das JS so:
Code: 
window.addEvent('domready', function() {
	var status = {
		'true': '<img src="allgemein_open.jpg">',
		'false': '<img src="allgemein_closed.jpg">'
	};

	//-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]);
	});
});
Vielen Dank für euere Hilfe im voraus!
 
Hi,

du greifst in deinem Script auf IDs von Elementen zu, die überhaupt nicht existieren (z.B. v_hide, v_show, h_slidein usw.).

Sonst funktioniert es bei mir tadellos.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück