Beiträge zum ausklappen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansehen
anzeigen
artikel
beispiel
beleidigung
beliebigen inhalt
blocken
code
display
einsetzen
first
glauben
last
leser
nutzer
person
rein laden
url
vorkommen
zeigen
-
Hallo,
ich möchte in meinem Blog, um Platz zu sparen, es gerne so machen, dass nur die Überschrift angezeigt wird und mann dann auf so etwas wie "ausklappen" klicken muss damit man den Rest des Beitrages sieht, doch es soll nicht so sein, dass eine externe Seite geladen wird, sondern, dass man auf der Seite bleibt und man nun den gesamten Eintrag sieht und das "ausklappen" zu "einklappen" wird und wenn man da rauf klickt soll der Beitrag wieder bis zur Überschrift verschwinden.
Ich hoffe ihr könnt mir helfen! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das könntest du zB mit Css bewerkstelligen.
Einfach im normalen Zustand den Content verbergen und dann bei klick diesen einblenden, bzw die Höhe ändern.
Mit JavaScript geht das sicher auch. -
Schonmal Danke, aber ich glaube, dabei müsste die Seite neu geladen werden und das wollte ich eigentlich nicht...
-
Das funktioniert mit
zum verstecken unddeinelement.style.display = 'none';
zum wieder anzeigen.deinelement.style.display = 'block';
Aber auf der lima-city-Seite selber gibt es ein Beispiel, wie man das besser lösen kann (hier).
Der nötige Config-Code:
rollout.js:(function() { // Configuration var extralist_maxOneOpen = false; // Preparations $$('.extraList > li').each(function(el) { // extralist_close(el); if(!el.hasClass('active')) { var div = el.getElement('div:last-child'); var height = div.getStyle('height').toInt(); div.setStyle('display', 'none'); div.setStyle('height', height); } }); $$('.extraList > li > h4:first-child').each(function(el) { el.setStyle('cursor', 'pointer'); }); // Events $$('.extraList > li > h4:first-child').each(function(el) { el.addEvent('click', function() { var active = el.getParent('ul').getElement('li.active'); if(active != null && extralist_maxOneOpen) extralist_close(active); if(el.getParent().getElement('div:last-child').getStyle('display') != 'block') extralist_open(el.getParent()); else extralist_close(el.getParent()); }); }); // Functions function extralist_open(el) { el.addClass('active'); var div = el.getElement('div:last-child'); var height = div.getStyle('height').toInt(); div.setStyle('height', 0); div.setStyle('display', 'block'); div.tween('height', height).get('tween').chain(function() { div.setStyle('height', ''); }); } function extralist_close(el) { el.removeClass('active'); var div = el.getElement('div:last-child'); var height = div.getStyle('height').toInt(); div.tween('height', 0).get('tween').chain(function() { div.setStyle('display', 'none'); div.setStyle('height', height); }); } })();
mootols.js
und ein Beispiel zur Anwendung:<html> <head> </head> <body> <ul class="extraList"> <li> <h4>Ein Menüpunkt</h4> <div> <p>Und sein viel zu langer Inhalt der unbedingt versteckt werden muss um nicht zu viel Platz zu verschwenden wenn er angezeigt wird. Deshalb muss der Benutzer mit herumklicken genervt werden.</p> </div> </li> <li> <h4>B. Deutsches Recht</h4> <div> <p>Das Schreiben von nationalsozialistischer Propaganda oder Verharmlosung nationalsozialistischer Verbrechen oder Beleidigungen bzw. abwertende Aussagen gegenüber Minderheiten ist verboten. Das Schreiben von Themen oder Beiträgen, die mit pornographischen, gewaltverherrlichenden oder sonstigen verherrlichenden Inhalten zu tun haben, ist verboten. Das Schreiben von illegalen Inhalten bzw. Inhalten, die gegen das deutsche Recht verstoßen, sowie das Schreiben von Links, die auf illegale Seiten bzw. Seiten, die gegen das deutsche Recht verstoßen, verweisen, sind verboten.</p> </div> </li> <li> <h4>C. Beleidigung</h4> <div> <p>Beleidigungen in jeglicher Form gegenüber sämtlichen Personen, Institutionen oder sonstigen Einrichtungen sind verboten.</p> </div> </li> </ul> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="rollout.js"></script> </body> </html> -
Wenn man 20 Artikel auf der Startseite anzeigen möchte aber der Nutzer sich nur einen Artikel ansehen möchte, dann entsteht unnötiger Traffic von 19 anderen Artikeln.
Wenn du es wirklich ohne Reload haben möchtest, dann solltest du
* auf ein Fallback achten
* evtl. AJAX einsetzen
* darauf achten, dass es möglich ist, Artikel zu verlinken.
https://gist.github.com/1039320
Das könnte man ein wenig anpassen (sofern du Kenntnisse in jQuery hast). -
carl-schoeneich schrieb:
Schonmal Danke, aber ich glaube, dabei müsste die Seite neu geladen werden und das wollte ich eigentlich nicht...tillpro schrieb:
Soll die Seite also auf einmal mit allen Artikeln geladen werden, oder sollen die Artikel erst geladen werden, wenn sie gebraucht werden? Ohne das zu wissen wird es mehr ein Ratespiel...
Wenn man 20 Artikel auf der Startseite anzeigen möchte aber der Nutzer sich nur einen Artikel ansehen möchte, dann entsteht unnötiger Traffic von 19 anderen Artikeln.
Wenn die Artikel erst geladen werden sollen wenn sie gebraucht werden: AJAX einsetzen. -
Also, die Artikel sollten alle mitgeladen werden!!!
-
Dann solltest du Das hier nehmen: https://www.lima-city.de/board/action:jump/1051945. Dabei musst du dir allerdings ein eigenes Stylesheet einfallen lassen, damit das ansehbar aussieht.
Dabei werden alle Beiträge geladen, aber ausgeblendet. Sieh dir als Beispiel einfach die lima-city-Hilfe an. -
Das ist allerdings sehr unpraktisch!
-
tillpro schrieb:
Etwas genauer bitte!
Das ist allerdings sehr unpraktisch!
Was ist unpraktisch? -
* Es ist nicht möglich Beiträge zu verlinken
* Es werden Beiträge geladen, die nicht benötigt werden
* Nutzer ohne JavaScript sehen die Beiträge gar nicht -
tillpro schrieb:
Das ist vom TE beabsichtigt.
* Es werden Beiträge geladen, die nicht benötigt werden
tillpro schrieb:
Ohe JavaScript werden ganz einfach alle Beiträge von Anfang an dargestellt. Sie können dann allerdings nicht versteckt werden.
* Nutzer ohne JavaScript sehen die Beiträge gar nicht
Du hast bestimmt die Beispielseite schon gesehen und verstanden. Es wird bei einer ul eine spezielle class gesetzt, daraufhin wird es zu der Liste mit den ausklappbaren Beiträgen. Ohne JavaScript wird das deshalb als ganz normale ul dargestellt, ohen irgendwelchen Veränderungen.
tillpro schrieb:
Und was wolltest du wie verlinken? In den DIVs kannst du einen beliebigen Inhalt rein laden, also was willst du mehr?
* Es ist nicht möglich Beiträge zu verlinken
Ich verstehe dein Problem nicht... -
Beim zweiten Punkt habe ich mir schlichtweg dein Script nicht richtig angesehen, entschuldige.
Den ersten kann ich jedoch nicht verstehen. Warum sollen alle Artikel mitgeladen werden? Das ist doch unsinnig?!
Und was wolltest du wie verlinken? In den DIVs kannst du einen beliebigen Inhalt rein laden, also was willst du mehr?
Das soll doch schließlich ein Blog sein… Und dann kann es doch mal vorkommen, dass ein Leser einen Artikel verlinken möchte/einer anderen Person zeigen möchte. Und das geht so nicht einfach… Und dadurch verliert der BLog hinterher Leser
Beitrag zuletzt geändert: 27.3.2012 11:23:16 von tillpro -
tillpro schrieb:
Den ersten kann ich jedoch nicht verstehen. Warum sollen alle Artikel mitgeladen werden? Das ist doch unsinnig?!
carl-schoeneich schrieb:
Also, die Artikel sollten alle mitgeladen werden!!!
carl-schoeneich will es so haben...
tillpro schrieb:
Da hast du recht, es ist etwas komplizierter... aber trotzdem noch machbar.
Und was wolltest du wie verlinken? In den DIVs kannst du einen beliebigen Inhalt rein laden, also was willst du mehr?
Das soll doch schließlich ein Blog sein? Und dann kann es doch mal vorkommen, dass ein Leser einen Artikel verlinken möchte/einer anderen Person zeigen möchte. Und das geht so nicht einfach? Und dadurch verliert der BLog hinterher Leser -
Also ICH finde das alles so iO!!!!!
-
tillpro schrieb:
Das soll doch schließlich ein Blog sein… Und dann kann es doch mal vorkommen, dass ein Leser einen Artikel verlinken möchte/einer anderen Person zeigen möchte. Und das geht so nicht einfach… Und dadurch verliert der BLog hinterher Leser
Ziele innerhalb einer Seite lassen sich mit Ankern anspringen, was ein durchaus gängiges Verfahren ist. Das ein-/ausblenden übernimmt in diesem Fall, wenn gewünscht, auch wieder javascript, oder es wird vom User manuell geleistet, der die Artikelüberschrift präsentiert bekommt und, zum Öffnen, den Titel anklicken muß.
-
Ich weiß :) Aber das muss man dann auch einbauen. (Ich kenne mich mit mootols.js nicht aus, aber es würde wohl reichen, nach dem Laden der Seite zu prüfen und beim Klick auf einen Listenpunkt entsprehcend einen Anker zu setzen…)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
