Einblenden Artikeltext mit Show/Hide Divs und JavaScript
-
- 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
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
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
- MarkusR
- Handbuchversteher
- Beiträge: 7362
- Registriert: 01.01.1970 01:00
- Hat sich bedankt: 111 Mal
- Danksagung erhalten: 934 Mal
- Kontaktdaten:
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:
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.
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>
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
ConPresso-Module
Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!
Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
- MarkusR
- Handbuchversteher
- Beiträge: 7362
- Registriert: 01.01.1970 01:00
- Hat sich bedankt: 111 Mal
- Danksagung erhalten: 934 Mal
- Kontaktdaten:
Ü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.
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
ConPresso-Module
Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!
Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
- balu
- ConPresso-Entwickler
- Beiträge: 1748
- Registriert: 01.01.1970 01:00
- Hat sich bedankt: 81 Mal
- Danksagung erhalten: 133 Mal
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:
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
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>
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
ConPresso Support & Development
-
- ConPresso-Checker
- Beiträge: 102
- Registriert: 01.01.1970 01:00
- Hat sich bedankt: 22 Mal
- Danksagung erhalten: 1 Mal
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
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
-
- ConPresso-Checker
- Beiträge: 102
- Registriert: 01.01.1970 01:00
- Hat sich bedankt: 22 Mal
- Danksagung erhalten: 1 Mal
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
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