scriptaculous BlindUp/BlindDown

**stiller** · 14.02.2008 10:09

Hallo

habe den script.aculo.us-Effekt BlindUp/BlindDown eingesetzt. Nun möchte ich aber nicht zwei Buttons für das Anzeigen des Inhaltes und für das Verschwinden haben. Möchte ein Toggle-Effekt. Ist das DIV angezeigt, schliesst es sich, ist es geschlossen öffnet es sich. Wie mache ich das?

Danke für Infos, Gruss
Thomas

**stiller** · 14.02.2008 10:24

.. danke, danke

**steffenk** · 15.02.2008 10:04

oder

Code:

var el = $(element);
if(el.visbile() {
 Effect.Blindup(el);
} else {
 Effect.BlindDown(el);
}

**melanie87** · 22.04.2009 11:53

Hallo Zusammen

Ich kenne mich mit javascript leider nicht besonders gut aus und komme daher nicht mehr weiter. Ich möchte eine Navigation mit Javascript erstellen die am Ende in etwa so aussehen sollte: Vorlage in Flash

Die Startanimation ist nicht so wichtig, damit bin ich bei meiner Lösung eigentlich zufrieden. Probleme macht mir der "blätter-effekt" zwischen den einzelnen Zeilen. Ich habe versucht mit dem blindUP/blindDown einen ähnlichen Effekt zu bekommen, mit dem ich vom "optischen Eindruch" eigentlich auch zufrieden bin. nur funktioniert es technisch gesehen noch nicht, ich hoffe ihr könnt mir da weiterhelfen?

Klicke ich mich von unter her durch die Zeilen funktioniert alles wie gewünscht. Fährt man aber z.B von der 1. Zeile mit der Maus auf die untere zeile 2, entsteht ein unschöner Effekt, da der Cursor beim blindUpEffekt kurz auch auf den Auslöser von Zeile 3 kommt und so natürlich diese Zeile einblenden will. Um diesen Effekt zu verhindern, wollte ich jetzt, jeweils nur die "Schaltflächen" der benachbarten Zeilen einblenden, und so verhindern dass nicht gewollte "Schaltflächen" berührt werden.

Code:

//Nur angrenzende "Openener" einblenden:
for (i = 1; i <= anzLines; i++)
{
	if (i == next && next !=0) {			
		document.getElementById("opener" +next).style.display='block'; 
	}
			
	else if (i == last) {
		document.getElementById("opener" + last).style.display='block'; 
	}
			
	else {
		document.getElementById("opener" + i).style.display='none'; 
	}

}

Anschliessend möchte ich die gewünschte Zeile wieder einblenden:

Code:

	//Gewähltes Objekt einblenden:
	new Effect.BlindDown(line, {duration: 0.25}); 
	document.getElementById(line).style.height='100px;';

Da die Anzahl Zeilen varieren können habe ich es mit einer Schleife versucht, aber irgendwie funktioniert das nicht so wie ich es mir vorgestellt habe. Gebe ich expliziet die "opener-Id" an die aus-/eingeblendet sein sollen, funktioniert es.

Ich verwende Scriptaculous und Prototype Version 1.6.0.3.

Nachfolgend noch mein kompletter Code:

Code:

function toggleMenu(id,anzLines) {	
	line 	 	= "line" + id;
	opener 	= "opener" + id;
	id		= parseInt(id);

	last	= id - 1;
	next	= id + 1;	

	if ($(line).style.display == 'none') {
		// close opened menus
		if (openedMenuId.length != 0)
			menuClose(openedMenuId,opener);
		menuOpen(line,opener,next,last,anzLines);
		// store which menu is currently opened
		openedMenuId = line;
	}
	else {
		menuClose(line,opener);
		// store that all menus are closed
		openedMenuId = '';
	}
}

function menuClose(line,opener) {
	new Effect.BlindUp(line, {duration: 0.25});
	document.getElementById(opener).style.display='block'; 
}

function menuOpen(line,opener,next,last,anzLines) {	
	
	//Alle Elemente ausblenden:
	for (i = 1; i <= anzLines; i++)
	{
		document.getElementById("line" + i).style.display='none';
	}
	
	//Nur angrenzende "Openener" einblenden:
	for (i = 1; i <= anzLines; i++)
	{
		if (i == next && next !=0) {			
			document.getElementById("opener" + next).style.display='block'; 
		}
		
		else if (i == last) 	{
			document.getElementById("opener" + last).style.display='block'; 
		}
		
		else {
			document.getElementById("opener" + i).style.display='none'; 
		}

	}	
	
	//Gewähltes Objekt einblenden:
	new Effect.BlindDown(line, {duration: 0.25}); 
	document.getElementById(line).style.height='100px;';
	 
}


//Offene Zeile bestimmen:
var openedMenuId = "";

HTML

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Objektauflistung</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body onload="new Effect.BlindUp('line1', {duration:.25});  window.setTimeout('Effect.BlindUp(\'line2\', {duration:.25})',500); window.setTimeout('Effect.BlindUp(\'line3\', {duration:.3})',1000); window.setTimeout('Effect.BlindUp(\'line4\', {duration:.3})',1500);">

<div id="objektListe">
    <ul id="line1">
        <li><img src="bilder/1.gif" /></li>
        <li><img src="bilder/2.gif" /></li>
        <li><img src="bilder/3.gif" /></li>
        <li><img src="bilder/4.gif" /></li>
        <li class="last"><img src="bilder/5.gif" /></li>        
    </ul>
    
    <li class="border"><a href="javascript:void(0);" id="opener1" onmouseover="toggleMenu('1','4');" >&nbsp;</a></li>
    
    <ul id="line2">
        <li><img src="bilder/6.gif"/></li>
        <li><img src="bilder/7.gif" /></li>
        <li><img src="bilder/8.gif" /></li>
        <li><img src="bilder/9.gif" /></li>
        <li class="last"><img src="bilder/10.gif" /></li>        
    </ul>
    
    <li class="border"><a href="javascript:void(0);" id="opener2" onmouseover="toggleMenu('2','4');" >&nbsp;</a></li>
    
    <ul id="line3">
        <li><img src="bilder/11.gif" /></li>
        <li><img src="bilder/12.gif" /></li>
        <li><img src="bilder/9.gif" /></li>
        <li><img src="bilder/8.gif" /></li>
        <li class="last"><img src="bilder/2.gif" /></li>        
    </ul>
    
    <li class="border"><a href="javascript:void(0);" id="opener3" onmouseover="toggleMenu('3','4');" >&nbsp;</a></li>
    
    <ul id="line4">
        <li><img src="bilder/11.gif" /></li>
        <li><img src="bilder/12.gif" /></li>
        <li><img src="bilder/9.gif" /></li>
        <li><img src="bilder/8.gif" /></li>
        <li class="last"><img src="bilder/2.gif" /></li>        
    </ul>
    
    <li class="border"><a href="javascript:void(0);" id="opener4" onmouseover="toggleMenu('4','4');" >&nbsp;</a></li>
    
</div>
</body>

Ich hoffe Ich habe mich halbwegs verständlich ausgedrückt und Ihr seht wo der Hacken liegt. Oder gehe ich das falsch an? würdet Ihr einen komplett anderen (evlt. einfacheren?) Weg wählen um auf das gewünschte Resultat zu kommen?

**melanie87** · 22.04.2009 13:32

so sieht es bei mir momentan aus: http://renob.ch/test/

danke schonmal
mel

**steffenk** · 24.04.2009 11:00

schau Dir mal Dein Markup an, validator bemängelt einige nicht geschlossene tags.

zur Startseite vom TP

Thema: scriptaculous BlindUp/BlindDown

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

scriptaculous BlindUp/BlindDown

Problem mit BlindDown/BlindUp

nachtrag:

Aktive Benutzer

Aktive Benutzer