[GastForen Web allgemein HTML und CSS / Stylesheets Collapse/Expand-Div

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Collapse/Expand-Div

Sero
Beiträge gesamt: 143

7. Mär 2008, 08:23
Beitrag # 1 von 13
Bewertung:
(10122 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi,

habe unter diesem Link mal ein Collapse/Expand-Div zusammengebastelt:
http://www.sebastianrost.de/test/html/collapse.html.

DAs GAnze funktioniert auf Java Script Basis, siehe hier:
Code
function switchMenu(obj) { 
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}


Beim Laden der Seite wird die Liste im erweiterten Zustand angezeigt
Bei Klick auf den roten Pfeil (rechts) wird die die aktuelle Zeile reduziert. Ich möchte allerdings, das die Liste im reduzierten Zustand geladen wird und bei Klick auf den Pfeil erweitert werden kann.

Vielen Dank für eure Vorschläge

Sero
X

Collapse/Expand-Div

Intermedia
Beiträge gesamt: 1287

7. Mär 2008, 08:50
Beitrag # 2 von 13
Beitrag ID: #340517
Bewertung:
(10117 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Moin,

du mußt die betreffenden DIV mit display:none; vorbelegen.

Gruß Sven


als Antwort auf: [#340512]

Collapse/Expand-Div

Sero
Beiträge gesamt: 143

8. Mär 2008, 03:12
Beitrag # 3 von 13
Beitrag ID: #340661
Bewertung:
(10093 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
He Sven,

danke, es hat funktioniert. Ich musste allerdings in der .js noch folgendes anpassen:
Code
if ( el.style.display != "block" ) { 
el.style.display = 'block';

"none" habe ich durch "block" ersetzt.


Zusätzlich möchte noch einen Link "Alles Erweitern/Reduzieren" einbauen und habe folgendes Skript gefunden, leider bekomme ich das nicht zum laufen

Code
function collapseAll(objs) { 
var i;
for (i=0;i<objs.length;i++ ) {
objs[i].style.display = 'none';
}
}
function pageLoad() {
collapseAll($('myDiv1','myDiv2','myDiv3'));
}
addEvent(window,'load',pageLoad);


Ich denke, ich habe etwas in meiner html falsch gemacht. Schaut mal bitte rein.

Danke
Sero


als Antwort auf: [#340517]

Collapse/Expand-Div

Intermedia
Beiträge gesamt: 1287

8. Mär 2008, 09:40
Beitrag # 4 von 13
Beitrag ID: #340664
Bewertung:
(10083 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Moin,

anknüpfend an deinen Ansatz könnte man es so realisieren:

Code
function collapseAll(objs) {  
var j;
var was;

for (j=0;j<objs.length;j++ ) {

if(!document.getElementById(objs[j]).style.display || document.getElementById(objs[j]).style.display == 'block') was= 'none'; else was = 'block';

document.getElementById(objs[j]).style.display = was;
}
}
function pageLoad() {
collapseAll(Array('myDiv1','myDiv2','myDiv3'));
}


ich würde sowas mit einer Funktion machen.

Gruß Sven


als Antwort auf: [#340661]

Collapse/Expand-Div

Sero
Beiträge gesamt: 143

9. Mär 2008, 01:37
Beitrag # 5 von 13
Beitrag ID: #340710
Bewertung:
(10062 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Sven,

danke für dein Skript. Ich habs mal getestet, aber es scheint nicht zu funktionieren bei mir. Ich denke mal es liegt an der Einbindung in die html. Könntest du mir dahingehend nochmals helfen.
So habe ich es versucht:
Code
<a style="cursor:pointer;" onclick="collapseAll('');" title="alle erweitern">alle erweitern&nbsp;&nbsp; 
<img src="../bilder/sym_arrow_down.gif" width="9" height="9" border="0" alt="alle erweitern"></a>


Danke Sero


als Antwort auf: [#340664]

Collapse/Expand-Div

Intermedia
Beiträge gesamt: 1287

9. Mär 2008, 09:11
Beitrag # 6 von 13
Beitrag ID: #340713
Bewertung:
(10039 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Moin,

Zitat ...aber es scheint nicht zu funktionieren

ist keine vernüftige Fehlerbeschreibung. Wenn du mal die Fehlerkonsole des FF verwenden würdest, stehen dort bestimmt die Fehlermeldungen auch drin

Du rufst die falsche Funktion auf. Das ist die richtige: pageLoad()

Gruß Sven


als Antwort auf: [#340710]

Collapse/Expand-Div

Sero
Beiträge gesamt: 143

10. Mär 2008, 01:49
Beitrag # 7 von 13
Beitrag ID: #340782
Bewertung:
(10019 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Danke, es funktioniert jetzt, es lag an der einbindung der funktion.

Gruß Sero


als Antwort auf: [#340713]

Collapse/Expand-Div

Sero
Beiträge gesamt: 143

25. Apr 2008, 05:58
Beitrag # 8 von 13
Beitrag ID: #347924
Bewertung:
(9651 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

ich habe nocheinmal eine Frage zu diesem Thema. Hier auch der dazugehörige Link:
http://www.sebastianrost.de/...l/test-collapse.html
Wie kann ich auf einfache Art und Weise erreichen (basierend auf meinem Skipt), dass sich das Icon (kleine Pfeil rechts) je nach Zustand verändert - im zusammengeklappten Zustand ist das Icon ein Plussymbol und im erweiterten Zustand ein Minussymbol. Ich habe schon einige Beispiele im Netz gefunden, aber der Quellcode dafür scheint mir ewig lang zu sein.
Anbei das Skript für mein Test-collapse:
Code
// Collapse and Expand 

function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "block" ) {
el.style.display = 'block';
}
else {
el.style.display = '';
}
}

function collapseAll(objs) {
var j; var was; for (j=0;j<objs.length;j++ ) {
if(!document.getElementById(objs[j]).style.display || document.getElementById(objs[j]).style.display == 'block') was= 'none'; else was = 'block';
document.getElementById(objs[j]).style.display = was;
} } function pageLoad() {
collapseAll(Array('expand_1','expand_2','expand_3','expand_4','expand_5')); }


Schöne Grüße und vielen Dank im Voraus für eure Ratschläge
Sero


als Antwort auf: [#340782]

Collapse/Expand-Div

SabineP
Beiträge gesamt: 7586

25. Apr 2008, 08:38
Beitrag # 9 von 13
Beitrag ID: #347931
Bewertung:
(9627 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen


als Antwort auf: [#347924]

Collapse/Expand-Div

Sero
Beiträge gesamt: 143

26. Apr 2008, 22:29
Beitrag # 10 von 13
Beitrag ID: #348179
Bewertung:
(9573 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Sabine,

danke für den link, das Beispiel ist echt gut. Ich habe es mal für meine Zwecke etwas angepasst, siehe hier:
http://www.sebastianrost.de/...l/test-collapse.html
Eine Sache stört mich aber noch:
wie du siehst ist jede 2. Zeile ist grau hinterlegt. Allerdings habe ich diese Eigenschaft direkt im li tag zugewiesen und nicht über meine css. Das ist wirklich nicht optimal, aber ich konnte es nicht anders lösen.
Destweiteren habe ich versucht das PDF Symbol (Downloadlink) rechts in der Zeile anzuordnen, dabei habe ich ein Tabelle verwendet. Mittels div's, u.a. würde es auch gehen, aber diese Variante funktioniert für die gängigen Browser ganz gut.

Könnt ihr mir nochmal weiterhelfen bzw Ratschläge geben. Danke

Sero


als Antwort auf: [#347931]

Collapse/Expand-Div

SabineP
Beiträge gesamt: 7586

26. Apr 2008, 23:07
Beitrag # 11 von 13
Beitrag ID: #348182
Bewertung:
(9563 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sero,

>> wie du siehst ist jede 2. Zeile ist grau hinterlegt.
>> Allerdings habe ich diese Eigenschaft direkt im li tag zugewiesen und nicht über meine css.

Vielleicht klappt das auch mit einer Klasse (ungetestet).

vorher bzw. jetzt:

<li style="background-color:#EFEFEF;">

nachher:

<li class="grau">

.grau{background-color:#EFEFEF}


als Antwort auf: [#348179]

Collapse/Expand-Div

Sero
Beiträge gesamt: 143

27. Apr 2008, 22:36
Beitrag # 12 von 13
Beitrag ID: #348235
Bewertung:
(9512 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Sabine,

das habe ich schon versucht, aber es funktioniert leider nicht auf diesem Weg. Hast du noch nen anderen Tip?

Danke, Sero


als Antwort auf: [#348182]

Collapse/Expand-Div

minou
Beiträge gesamt: 135

29. Apr 2008, 10:52
Beitrag # 13 von 13
Beitrag ID: #348451
Bewertung:
(9454 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sero,

leider habe ich deine E-Mail Adresse auf dem NB, sitze aber am PC.
Ich habe dir das mit dem Hintergrund mal gemacht und auch ein Image, das du rechts ausrichten kannst, ist gesetzt. Brauchst dort also nur das richtige Bild anzugeben.
Das mit dem collapse und expand habe ich aussen vor gelassen, da hast du ja glaub ich schon Lösungen.

Also hier eine HTML Datei, die jede 2. Zeile anders "bemalt". Man könnte höchstens noch die Ausgabe über PHP machen und jedem zweiten Eintrag eine andere Farbe geben. Das ginge sehr einfach mit dem %-Operator (Restwert), oder du machst jede Zeile die gerade ist (z.B. 2:2=1 4:2=2 usw) anders.
Du kannst ja mal schauen; wenn du PHP auch noch einbeziehst, müssten einige Ausgaben auf eben diese Werte in einer Schleife geprüft werden, dann würden Zeile 2,4,6,8 automatisch anders formatiert...
Vor allem bräuchtest du dich dann nicht mehr um Formatierungen zu kümmern. Die Werte würde ich dann aber auch entweder in XML oder einer Datenbank ablegen.

So jetzt aber mal das Skript :-)

Code
<html> 
<head>
<style type="text/css">

body, p, h3 {
padding: 0;
margin: 0;
display: inline;
}


div {
position-relative;
left: 0px;
top: 0px;
padding-right: 100px;
padding-left: 20px;
bottom: 0px; /* Wahrscheinlich überflüssig */
text-align: justify;
border-bottom: 1px dotted black;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
background-color: #cf0;
}



h3 {
padding-left: 20px;
padding-top: 5px;
padding-bottom: 10px;
margin-top: 0;
margin-left: 10px;
}

/* Wahrscheinlich gesamtes div p überflüssig */
div p {
text-align: justify;
}

img {
position: absolute;
margin-top: 8px;
right: 5px;
border: none;

}

div.zweite {
background-color: #ddd;
}



</style>

</head>
<body>


<div>
<h3>Titel</h3>
<a href="#" title=""><img src="pfeil.gif" /></a><br />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae, sodales quis, nibh. Sed vel mi. Ut vehicula nisi quis pede. Duis porta, lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor mi vel odio.
</p>



</div>
<div class="zweite">
<h3>2. Titel</h3>
<a href="#" title=""><img src="pfeil.gif" /></a><br />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae, sodales quis, nibh. Sed vel mi. Ut vehiculaquis
pede. Duis porta, lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor mi vel odio.
</p>



</div>
<div>
<h3>Titel</h3>
<a href="#" title=""><img src="pfeil.gif" /></a><br />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae, sodales quis, nibh. Sed vel mi. Ut vehicula nisi quis pede. Duis porta, lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor mi vel odio.
</p>



</div>
<div class="zweite">
<h3>2. Titel</h3>
<a href="#" title=""><img src="pfeil.gif" /></a><br />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae, sodales quis, nibh. Sed vel mi. Ut vehiculaquis
pede. Duis porta, lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor mi vel odio.
</p>



</div>
</bod>
</html>



P.S. es läuft auch im FF, da ging es ja nicht richtig, auch der IE7 ist getestet.

Gruss

minou


als Antwort auf: [#348235]
(Dieser Beitrag wurde von minou am 29. Apr 2008, 11:11 geändert)
X