| Autor |
Nachricht |
pensil
Threadersteller
Dabei seit: 04.09.2007
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 11.09.2007 13:14
Titel CSS/Javascript Divs Ein und Ausklappen :: Verständnisfrage |
  |
|
Ola`
ich habe mir eine Liste mit CD Titeln erstellt die mir beim Klick auf die jeweilige CD die entsprechende Trackliste darunter Anzeigt. Dies habe ich bisher so gelöst, dass ich alle Daten (Trackliste und mehr.) erst bei Klick via AJAX aus der Datenbank hole und dann unter dem CD Titel einblenden lasse.
Nun würde ich aber gerne das ganze so gestalten, dass immer nur von einer CD die Daten geholt und Angezeigt werden können, sprich: Beim Klick auf eine andere CD müsste dann der angezeigte DIV mit der Trackliste aus und eben an anderer stelle wieder eingeblendet werden.
Ich habe bisher einige versuche gemacht im DOM bei jedem Klick auf eine CD alle Eltern-Knoten zu Durchsuchen und dann den der Kinder hat (ausgeklappte Trackliste!) entsprechend wieder auszublenden und den neuen ein zu blenden.
Doch ist dies bei einer Anzeige von 50-100 CDs pro Seite doch nicht wirklich soooo toll.
Vielleicht hat ja jemand eine Idee wie man es "besser" machen könnte, also ich bin für alles offen 
Danke schon mal im voraus.
Gruß
pen
Zuletzt bearbeitet von pensil am Di 11.09.2007 13:15, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Di 11.09.2007 14:55
Titel
|
|
|
Ist das Reiner Text?
Warum ist es so schlimm wen die liste offen bleibt? Auf und zu klappen auf click fände ich Persönlich eh besser.
Wenn das nur Text und das Oben beschriebene Clicken OK ist kenne ich ne CSS Lösung. Das hab ich mal bei nem FAQ gemacht müsste mal bisseel suchen.
Wen das nämlich nur Text ist kann man den Text Leicht mit Hide verstecken. und Bei bedarf Einblenden. Wen Bilder dazukommen is das aber zu viel was vor geladen Werden muss.
Ich schau Gleich mal.
|
|
| |
|
|
|
Anzeige
|
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
|
| |
|
|
pensil
Threadersteller
Dabei seit: 04.09.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 11.09.2007 15:04
Titel
|
|
|
Gude Mark-Korb
Das was du beschreibst mache ich ja schon > display: none/block in einer Javascript Funktion.
Und bisher ist es auch so das via onClick die Liste mit den Infos angezeigt wird.
Auch klappt es dass eben immer nur "eine" Info angezeigt wird und die andere Info die noch Offen ist dann ausgeblendet wird.
Ich sehe eben nur bei der von mir oben beschriebenen Möglichkeit das Problem eines Flaschenhalses da eben bei jedem onClick erstmal der ganze DOM Baum durchsucht werden muss, und das ist bei ca. 100 Einträgen pro Seite doch ne gewisse Last.
Meine Frage war eher nach Alternativen.
Dennoch Danke für deine Antwort 
Ich sehe halt nur das Problem
Zuletzt bearbeitet von pensil am Di 11.09.2007 15:05, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Di 11.09.2007 15:41
Titel
|
|
|
Kann man nicht sogar ne Lade Struktur Schreiben? also das erst der Sichtbaren Teile und dann einfach der Gesamte unter Baum Hinterher?
Ps. Ich weiß jetzt natürlich nicht wie viel kb das Gesamt sind.
Pss. bin Designer kein Programmierer kenne mich nur ganz wenig mit Java und Ajax aus
|
|
| |
|
|
pensil
Threadersteller
Dabei seit: 04.09.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 11.09.2007 15:49
Titel
|
|
|
Hello Mark-Korb
Also erstmal das ist Javascript 
Ich nehme ja schon Last weg indem ich nicht "alle" Informationen hole und nur "verstecke", von daher ist es ja "eigentlich" auch okay so, nur sehe ich zur Zeit bei ca. 6000 Gleichzeitigen Zugriffen wie hoch die Last durch die verschiedenen Javascripte ist.
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 11.09.2007 19:13
Titel
|
|
|
Mal ein Beispiel auf die schnelle um das Prinzip zu verdeutlichen:
| 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=iso-8859-1" />
<title>pensil</title>
<script type="text/javascript">
function toggle(obj) {
obj.style.display = (obj.style.display != 'none' ? 'none' : '' );
}
window.onload = function() {
var paragraphs = document.getElementsByTagName('p');
var tmp = null;
for(var i=0; i<paragraphs.length; i++) {
paragraphs[i].style.display = 'none';
paragraphs[i].previousSibling.previousSibling.onclick = function() {
(tmp != null) ? tmp.style.display = 'none' : '';
toggle(this.nextSibling.nextSibling);
tmp = this.nextSibling.nextSibling;
}
}
}
</script>
</head>
<body>
<h1>ToggleList</h1>
<h2>Headline 1</h2>
<p>Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1</p>
<h2>Headline 2</h2>
<p>Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2</p>
<h2>Headline 3</h2>
<p>Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3</p>
<h2>Headline 4</h2>
<p>Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4</p>
</body>
</html> |
|
|
| |
 |
|
pensil
Threadersteller
Dabei seit: 04.09.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 12.09.2007 14:01
Titel
|
|
|
Hallo m,
also ich habe es bisher so gemacht:
| Code: |
function displayCDInfo(btn) {
var id = btn.id.split('-');
var liste = $('CDListe');
for(var i=0;i<liste.childNodes.length;i++) {
if(liste.childNodes[i].nodeType == 1) {
var info = liste.childNodes[i].childNodes[5];
$(info.id).style.display = 'none';
}
}
$('info-'+id[1]).style.display = 'block';
return false;
}
<ul id="CDListe">
<li id="cd-1" onclick="displayCDInfo(this);">
Bad Religion Stranger Than Fiction (1994)<br/>
<ul class="cd_info" id="info-1">
<li><img class="cover" src="cover/1881248.jpg" alt="" border="0" /></li>
<li><div class="panel">[editieren] [Löschen]</div></li>
<li><strong>Label:</strong> Atlantic Records</li>
<li><strong>Veröffentlichung:</strong> 1994</li>
<li><strong>Format(e):</strong> LP, CD</li>
<li><strong>Genre(s):</strong> Punkrock</li>
<li><strong>Anzahl der Titel:</strong> 18</li>
<li><strong>Laufzeit:</strong> 38m28s</li>
</ul>
</li>
<li>
....
</li>
</ul>
|
Leider gibt es beim IE6 im JS Teil Probleme weshalb ich das ganze dann so aufgebaut habe:
| Code: |
function displayCDInfo(btn) {
var id = btn.id.split('-');
if(document.all && window.offscreenBuffering) {
if($('info-'+id[1]).style.display == 'none') {
$('info-'+id[1]).style.display = 'block';
}else{
$('info-'+id[1]).style.display = 'none';
}
}else{
var liste = $('CDListe');
for(var i=0;i<liste.childNodes.length;i++) {
if(liste.childNodes[i].nodeType == 1) {
var info = liste.childNodes[i].childNodes[5];
$(info.id).style.display = 'none';
}
}
$('info-'+id[1]).style.display = 'block';
}
return false;
} |
Schlussendlich kommt man wohl nicht drum herum den Baum bei jedem Klick durchsuchen zu lassen 
Vielleicht hat aber noch wer eine andere Möglichkeit parat
mfg
pen
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[Javascript] Divs ein- und ausblenden
[JavaScript] Divs dynamisch anzeigen
Höhe eines divs mit javascript bestimmen.
Problem CSS Menü ausklappen
CSS Menü ausklappen Vertikal
Navigationsmenü soll bei Klick ausklappen
|
|
Willkommen auf dem Portal für Mediengestalter
