Einblenden Artikeltext mit Show/Hide Divs und JavaScript

Fragen zur Implementierung und/oder Anpassung von ConPresso 4 werden in diesem Forum diskutiert.
Antworten
mwae
ConPresso-Checker
Beiträge: 102
Registriert: 01.01.1970 01:00
Hat sich bedankt: 22 Mal
Danksagung erhalten: 1 Mal

Einblenden Artikeltext mit Show/Hide Divs und JavaScript

Beitrag von mwae »

Guten Tag

Ich bin über die Möglichkeit der Texteinblendung mit Show/Hide Divs und JavaScript gestolpert.

Nun stellt sich mir die Frage wie ich diesen Code/Aufruf in mine Seiten/Templates einbauen muss.

Codebeispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide Divs und JavaScript</title>
<script type="text/javascript" language="javascript">

function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be attached");
}
}

function togglediv(e)
{
if (!e) return;
var container = document.getElementById(e);
var status = container.style.display;
if (status == 'none')
{
container.style.display = 'block';
} else {
container.style.display = 'none';
}
}

function addListeners()
{
if(!document.getElementById) return;
var toggleButton = document.getElementById('togglebutton');
addEvent(toggleButton,'click', function(event) { togglediv('togglediv') }, false);
}

addEvent(window, 'load', addListeners, false);
</script>
</head>
<style type="text/css" media="screen">
/* <![CDATA[ */
body {
font: 0.7em/160% "Lucida Grande", Verdana, Helvetica, sans-serif;
}
#togglediv {
background: #F9EE98;
border: 1px solid #D9C589;
display: none;
padding: 0.5em 1em;
}
/* ]]> */
</style>


<body>
<p>
Dies ist der Teasertext welcher bei Bedarf mit dem Artkeltext ergänzt wird
<br>
<br>
<a href="#" id="togglebutton">Artikeltext</a></p>
<div id="togglediv">
A div which's visibility can be toggled using Javascript.
<br>
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.
</div>
</body>
</html>


Gruss mwae
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Zuerst mal packst Du Dein Style-Tag mit ins Head-Tag.

Der gesamte Head-Tag kommt in Dein Seiten-Template / global-header.

Und Dein Artikeltemplate könnte dann so aussehen:

Code: Alles auswählen

<p> 
<!-- Text: Teasertext; -->
<br> 
<br> 
<a href="#" id="togglebutton">Artikeltext</a></p> 
<div id="togglediv"> 
<!-- Text: Artikeltext; --> 
</div> 
Allerdings hat Deine Variante den Nachteil, daß es nur einen Artikel pro Rubrik geben darf, da Du mit einer ID arbeitest, die nun mal eindeutig sein muß.

Ein Beispiel für einen mehrfach einsetzbaren und cookiegesteuerten Code findest Du z.B. auf
http://www.manchester-terrier-deutschland.de/home.htm
die "show english version"-Buttons zeigen einen englischen Text.
Durch Klick auf "Show all english versions" am Seitenende wird ein Cookie gesetzt und damit immer alle Texte aufklappt und aufgeklappt gehalten.
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
mwae
ConPresso-Checker
Beiträge: 102
Registriert: 01.01.1970 01:00
Hat sich bedankt: 22 Mal
Danksagung erhalten: 1 Mal

Beitrag von mwae »

Hallo Markus

Elegante Lösung - werde die Umsetzung angehen und dokumentieren.

Gruss und Danke mwae
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Übrigens ist das hier eine noch schickere Lösung, wenn es nur ums auf- und zuklappen geht
http://www.javascriptjunkie.com/example ... de-div.htm
dort wird durch klick auf das Element immer das nächste Element(nextSibling) geöffnet, also völlig ohne IDs oder ähnliches.
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
balu
ConPresso-Entwickler
Beiträge: 1748
Registriert: 01.01.1970 01:00
Hat sich bedankt: 81 Mal
Danksagung erhalten: 133 Mal

Beitrag von balu »

Hiho,

wer viel mit Javascript machen muss, dem empfehle ich übrigens eine Bibliothek wie jquery (http://www.jquery.com). Die Dokumentation ist sehr ausführlich (aber man muss natürlich viel auch ausprobieren). Dafür funktioniert es dann aber auch in so gut wie jedem Browser.

Das ganze Javascript wird dann ziemlich kurz:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide Divs und JavaScript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.artikeltext').before('<a class="togglediv">Artikeltext</a>');
    $('.togglediv').click(function() {
        $(this).next().toggle('slow');
    });
});
</script>
<style>
    a.togglediv {color: blue; cursor: pointer;}
    a.togglediv:hover {text-decoration: underline;}
</style>
</head>
<body>
<p>Dies ist der Teasertext welcher bei Bedarf mit dem Artikeltext ergänzt wird</p>
<br>
<br>
<div class="artikeltext">
A div which's visibility can be toggled using Javascript.
<br>
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vo
</div>
</body>
</html> 
In diesem Fall führt die eine Zeile direkt vor alle Elemente mit class="artikeltext" vollautomatisch den Ein- und ausblende-Text ein.

Die zweite Zeile setzt dann einen click-Event auf diesen "Button" und die Zeile mit toggle() sagt: Das nächste Element im Baum nach dem <a> anzeigen oder verschwinden lassen, je nachdem. Das "slow" ist optional und gibt die Geschwindigkeit an, mit der etwas angezeigt wird.

Wir setzen das jetzt immer öfter ein, weil es einfach eine enorme Vereinfachung von Javascript-Codes ist.

Balu
Bartels.Schöne
ConPresso Support & Development
mwae
ConPresso-Checker
Beiträge: 102
Registriert: 01.01.1970 01:00
Hat sich bedankt: 22 Mal
Danksagung erhalten: 1 Mal

Beitrag von mwae »

Markus und Balu danke für die Inputs.

Mein Wunsch/Anforderung geht eigentlich auch in Richtung wie von dutch platziert http://community.conpresso.de/viewtopic.php?t=4475
Durch das Einbinden der von Balu vorgeschlagen Bibliothek <script src="http://code.jquery.com/jquery-latest.js"></script> und der Anwendung von "toggle" und "slideDown" ergeben sich die folgenden Überlegungen mit einem Template mit den Eingaben:
Rubrikseite:
Titel, Datum, Bild1_Vorschau, Teasertext, Artikeltext_1, weiter

Artikelseite:
Titel, Datum, Bild1, Bild2, Artikeltext_2, zurück

Beim Anklicken von "weiter..." auf der Rubrikseite gelangt man vorerst NICHT auf die Artikelseite, sondern der Teasertext wird durch den Artikeltext und einen Zugang zur jeweiligen Artikelseite mit dem Artikeltext_2 erweitert. Dies kann wahlweise mittels "onClick" ein


"toggle"
<script>
$("button").click(function () {
$("div").toggle();
});
</script>

oder auch

"slideDown"
<script>
$("button").click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("fast");
} else {
$("div").hide();
}
});
</script>

Effekt aufrufen.

Bei der Auswahl des nächsten Artikels könnte wahlweise die orgängige Erweiterung geschlossen werden und beim aktuellen Artikel eingeblendet werden.
Als Option die Variante von Markus mit dem Einblenden der englischen Texte.

Wie bekomme ich das ganze in der flexiblen Art im meine Templates.

Gruss mwae
mwae
ConPresso-Checker
Beiträge: 102
Registriert: 01.01.1970 01:00
Hat sich bedankt: 22 Mal
Danksagung erhalten: 1 Mal

Beitrag von mwae »

Variante "nextSibling"

Aufgrund der Empfehlung von Markus habe ich mal die nextSibling-Variante wie folgt eingebaut:

Seitentemplate:
<script type="text/javascript">
function showContent(vThis)
{
// http://www.javascriptjunkie.com
// alert(vSibling.className + " " + vDef_Key);
vParent = vThis.parentNode;
vSibling = vParent.nextSibling;
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode or Something
vSibling = vSibling.nextSibling;
};
if(vSibling.style.display == "none")
{
vSibling.style.display = "block";
} else {
vSibling.style.display = "none";
}
return;
}

Artikeltemplate:
<!-- start of template "Allgemein"-->
<div class="artikel">
<div class="titel"><!-- Value: Title; --></div>
<div class="textkoerper">
<!-- HTML: Infotext; -->
</div>
<div class="weiterlink"><a onclick="showContent(this)"; style="cursor:pointer";>...weitere Informationen »</a></div>
<div style="margin-top:5px; display:none;">
<div class="textkoerper">
<!-- HTML: Kurztext; -->
</div>
<!-- URL: Weiter Link; starttag; --><div class="weiterlink">weiter »</div></a>
</div>


Gruss mwae
Antworten