kostenloser Webspace werbefrei: lima-city


Beiträge zum ausklappen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c*************h

    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!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. t********g

    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.
  4. Autor dieses Themas

    c*************h

    Schonmal Danke, aber ich glaube, dabei müsste die Seite neu geladen werden und das wollte ich eigentlich nicht...
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Das funktioniert mit
    deinelement.style.display = 'none';
    zum verstecken und
    deinelement.style.display = 'block';
    zum wieder anzeigen.



    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&uuml;ber Minderheiten ist verboten. Das Schreiben von Themen oder Beitr&auml;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&szlig;en, sowie das Schreiben von Links, die auf illegale Seiten bzw. Seiten, die gegen das deutsche Recht versto&szlig;en, verweisen, sind verboten.</p>
    				</div>
    			</li>
    			<li>
    				<h4>C. Beleidigung</h4>
    				<div>
    					<p>Beleidigungen in jeglicher Form gegen&uuml;ber s&auml;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>
  6. 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).
  7. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    carl-schoeneich schrieb:
    Schonmal Danke, aber ich glaube, dabei müsste die Seite neu geladen werden und das wollte ich eigentlich nicht...
    tillpro schrieb:
    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.
    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 die Artikel erst geladen werden sollen wenn sie gebraucht werden: AJAX einsetzen.
  8. Autor dieses Themas

    c*************h

    Also, die Artikel sollten alle mitgeladen werden!!!
  9. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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.
  10. Das ist allerdings sehr unpraktisch!
  11. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    tillpro schrieb:
    Das ist allerdings sehr unpraktisch!
    Etwas genauer bitte!
    Was ist unpraktisch?
  12. * 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
  13. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    tillpro schrieb:
    * Es werden Beiträge geladen, die nicht benötigt werden
    Das ist vom TE beabsichtigt.

    tillpro schrieb:
    * Nutzer ohne JavaScript sehen die Beiträge gar nicht
    Ohe JavaScript werden ganz einfach alle Beiträge von Anfang an dargestellt. Sie können dann allerdings nicht versteckt werden.

    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:
    * Es ist nicht möglich Beiträge zu verlinken
    Und was wolltest du wie verlinken? In den DIVs kannst du einen beliebigen Inhalt rein laden, also was willst du mehr?

    Ich verstehe dein Problem nicht...
  14. 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
  15. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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:
    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
    Da hast du recht, es ist etwas komplizierter... aber trotzdem noch machbar.
  16. Autor dieses Themas

    c*************h

    Also ICH finde das alles so iO!!!!!
  17. 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ß.

  18. 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…)
  19. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!