zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Auf-/Zuklappen mit JS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.09.2008, 12:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard Auf-/Zuklappen mit JS

Hey folgenden Code habe ich für mich geschrieben:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<script type="text/javascript" language="JavaScript1.2">
var angezeigt = false;

function versteckt() 
{ 
	if (angezeigt)
	{
		document.getElementById('ghost').style.display = 'none';
		angezeigt = false;
		window.document.images['Icon'].src                     = 'minus.png';
    	window.document.getElementById('StatusText').innerHTML = 'schliessen';
	}
	else
	{
		document.getElementById('ghost').style.display = 'block';
		angezeigt = true;
		window.document.images['Icon'].src                     = 'plus.png';
    	window.document.getElementById('StatusText').innerHTML = 'oeffnen';
	}
} 
</script> 
<body>
	<table cellspacing="2" cellpadding="2" border="0"> 
		<tr> 
		    <td style="display : none" id="ghost">
		    	Dieser Bereich kann ein-/ausgeblendet werden!
			</td> 
		</tr> 
		<tr> 
		    <td> 
				<img src="plus.png" style="border-width:0px;" alt="+" name="Icon">
				<a href="" onclick="versteckt(); return false;" id="StatusText">oeffnen</a>
				<br />
				Bla Bla Bla
				<br />
			 </td> 
		</tr> 

	</table>
</body>
</html>
Problem:
Die Änderung des namens für oeffnen/schliessen funktioniert beim 1. Aufruf nicht, danach aendert er es logischerweise immer in den falschen Wert.
Außerdem wird der eingeblendete Text beim 2. Mal seltsamerweise nach rechts eingerückt.

Getestet habe ich mit FF3 und IE7

Das Ganze will ich als Newsscript einsetzen. Wie gestalte ich die JS-Funktion am besten, so dass ich für jede News einen eigenen Button ein/ausblenden habe?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.09.2008, 13:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 888
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Beim ersten Aufruf geht er auch in den else-Zweig der Bedingung, weshalb du vermutlich keine Änderung siehst. Prüfe statt

Code:
if(angezeigt)
doch lieber auf

Code:
if(document.getElementById('ghost').style.display=="none")
und dreh die beiden Bedingungen um.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.09.2008, 14:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard

ja da haste wohl recht

aber das einrücken wird dadurch auch noch nicht gefixt. und wie mache ich das, wenn ich auf einer seite mehrere solcher klapptexte habe?
Mit Zitat antworten
  #4 (permalink)  
Alt 21.09.2008, 14:19
Benutzer
neuer user
 
Registriert seit: 18.08.2008
Beiträge: 50
Sparta8 befindet sich auf einem aufstrebenden Ast
Standard

Ich hatte das mit mootools gelöst. Leider habe ich von JS nicht viel Ahnung und deshalb habe ich jedem Klapptxet auf der Seite eine eigene ID gegeben und dann eine Funktion mit diesen IDs gefüttert. Das geht kann man sicherlich auch schöner lösen, aber es funktionierte recht gut.

Bei mootools hast vorallem den Vorteil, dass es bei sehr vielen Browsern ohne Fehler rennt.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.09.2008, 14:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 888
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von crimi Beitrag anzeigen
aber das einrücken wird dadurch auch noch nicht gefixt.
Liegt vermutlich daran, dass du bei Tabellenzellen nicht "block" als display-Wert zuweisen solltest. "display: table-cell;" wäre das richtige. Was jedoch wiederum der IE6 nicht kennt, dort musst du "block" verwenden.

Zitat:
und wie mache ich das, wenn ich auf einer seite mehrere solcher klapptexte habe?
Für jede der Zellen eine eigene ID vergeben und auf dieser Referenzieren. Das Script müsste dann natürlich entsprechend angepasst werden ("versteckt(objektID);").
Mit Zitat antworten
  #6 (permalink)  
Alt 21.09.2008, 23:44
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<script type="text/javascript" language="JavaScript1.2">
var angezeigt = false;




function versteckt(objektID) 
{ 
	
	ghost = "ghost" + objektID;
	statustext = "StatusText" + objektID;
	if(document.getElementById(ghost).style.display=='none') {
		document.getElementById(ghost).style.display = 'block';
		window.document.getElementById(StatusText).innerHTML = 'schliessen';
 		/*window.document.images['Icon'].src = 'minus.png';*/   	
	}
	else {
		document.getElementById(ghost).style.display = 'none';
		window.document.getElementById(StatusText).innerHTML = 'oeffnen';
		/*window.document.images['Icon'].src = 'plus.png';*/
	}
} 
</script> 

<body>
	<table width="400px"> 
		<caption>TestNews</caption>
		<tr>
			<td>21.09.2008 - 23:23 - von Patrick</td>
		</tr>
		<tr> 
		    <td>
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier 
				steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz 
				viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Short
				body Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text 
			</td> 
		</tr> 
		<tr> 
		    <td>
		    	<div style="display : none" id="ghost01">
		    		Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf-
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, der
					beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra lange 
					Longtext, der beliebig auf- und zu geklappt werden kann! Hier steht dann 
					der ultra lange Longtext, der beliebig auf- und zu geklappt werden kann! 
					Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf- 
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, 
					der beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra 
					lange Longtext, der beliebig auf- und zu geklappt werden kann! Hier 
					steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! 
		    	</div>
				<a href="" onclick="versteckt('01'); return false;" id="StatusText01">oeffnen</a>
			</td> 
		</tr> 
	</table>
		<table width="400px"> 
		<caption>TestNews</caption>
		<tr>
			<td>21.09.2008 - 23:23 - von Patrick</td>
		</tr>
		<tr> 
		    <td>
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier 
				steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz 
				viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Short
				body Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text 
			</td> 
		</tr> 
		<tr> 
		    <td>
		    	<div style="display : none" id="ghost02">
		    		Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf-
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, der
					beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra lange 
					Longtext, der beliebig auf- und zu geklappt werden kann! Hier steht dann 
					der ultra lange Longtext, der beliebig auf- und zu geklappt werden kann! 
					Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf- 
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, 
					der beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra 
					lange Longtext, der beliebig auf- und zu geklappt werden kann! Hier 
					steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! 
		    	</div>
				<a href="" onclick="versteckt('02'); return false;" id="StatusText02">oeffnen</a>
			</td> 
		</tr> 
	</table>
		<table width="400px"> 
		<caption>TestNews</caption>
		<tr>
			<td>21.09.2008 - 23:23 - von Patrick </td>
		</tr>
		<tr> 
		    <td>
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier 
				steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz 
				viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Short
				body Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text 
			</td> 
		</tr> 
		<tr> 
		    <td>
		    	<div style="display : none" id="ghost03">
		    		Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf-
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, der
					beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra lange 
					Longtext, der beliebig auf- und zu geklappt werden kann! Hier steht dann 
					der ultra lange Longtext, der beliebig auf- und zu geklappt werden kann! 
					Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf- 
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, 
					der beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra 
					lange Longtext, der beliebig auf- und zu geklappt werden kann! Hier 
					steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! 
		    	</div>
				<a href="" onclick="versteckt('03'); return false;" id="StatusText03">oeffnen</a>
			</td> 
		</tr> 
	</table>
</body>
</html>
Soweit so gut.

Meine Probleme:
Die Box poppt nur ganz kurz auf und verschwindet direkt danach wieder (kann ich überhaupt nicht nachvollziehen).
Außerdem springt der nach jedem Klick auf oeffenen/schliessen wieder ganz oben an den Seitenbeginn.

Wie änder ich das?

Geändert von crimi (10.12.2008 um 19:45 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 23.09.2008, 15:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard

hat keiner eine idee? :\
Mit Zitat antworten
  #8 (permalink)  
Alt 23.09.2008, 16:27
Benutzer
neuer user
 
Registriert seit: 21.11.2007
Beiträge: 39
Ronnaki befindet sich auf einem aufstrebenden Ast
Standard

da hat das eine mit dem anderen zu tun. Gib den Links als HREF mal ein "#", dann klappt es auch. Momentan wird unmittelbar nach dem JS-Aufruf zum aufklappen die Seite neu geladen, ergo ist alles wieder auf Anfang.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 13:40 Uhr.