... eine Fortsetzung eines Artikels mit DIV einblenden?

[PTV]

Ich bin dabei bei einzurichten, das bei längeren Artikeln eine Option "Fortsetzung" erscheint. Per Klick darauf erhält man den Rest des Artikels innerhalb eines DIV's angezeigt. Mittels eine Javascripts klappt das auch schon super (http://www.mr38bsmsv0cml.webpage.t-com.de/test/), leider aber nicht mehr mehr, wenn innerhalb der Fortsetzung z.B. ein Bild eingebunden oder ein externen Link eingebaut ist.

Hier das Javascript:

Code Auswählen Erweitern

function schalten( targetId )
{
  if (document.getElementById)
  {
    var target  = document.getElementById( targetId );

    if (target.style.display == "")
    {
      target.style.display = "none"
    }
    else
    {
      target.style.display = ""
    }
  }
}

function einblenden( targetId )
{
  if (document.getElementById)
  {
    var target  = document.getElementById( targetId );

    target.style.display = ""
  }
}

function ausblenden( targetId )
{
  if (document.getElementById)
  {
    var target  = document.getElementById( targetId );

    target.style.display = "none"
  }
}
Hier der Code zum Aufrufen der Zusatzfunktion:

Code Auswählen Erweitern

Fortsetzung = <div class="mehrbutton"><a onclick="schalten('{VALUE}');return false;" href="#">Fortsetzung</a></div><div class="mehr" style="display: none" id="{VALUE}">{VALUE}</div>
Unter dem Link http://www.mr38bsmsv0cml.webpage.t-com.de/test/ habe ich mal das Besipiel angelegt.

Weis jemand Rat?

Sonst Respekt an die Entwickler. Das CMS ist wirklich toll!

[Moondancer]

Hallo   ,

Hier der Code zum Aufrufen der Zusatzfunktion:

Code Auswählen Erweitern

Fortsetzung = <div class="mehrbutton"><a onclick="schalten('{VALUE}');return false;" href="#">Fortsetzung</a></div><div class="mehr" style="display:none" id="{VALUE}">{VALUE}</div>

probiere mal das:

Code Auswählen Erweitern

Fortsetzung = <div class="mehrbutton"><a onclick="schalten('{VALUE}');return false;" href="#">Fortsetzung</a></div><div class="mehr" style="display:none;" id="{VALUE}">{VALUE}</div>
und gib bei allen HTML Tags wo die doppelten Anführungsstriche verwendet werden die einfachen Hochkommas ' an

das ID Attribut soll wirklich so gefüllt werden?  - auch da kann es Probleme geben

id="{VALUE}"

bye
Dirk

[PTV]

Leider hat Deine Version nicht funktioniert. Ich habe aber auch die Vermutung das der Grund eine unglückliche Verschachtelung der Anführungszeichen und der Hochkommas ist.

das ID Attribut soll wirklich so gefüllt werden?  - auch da kann es Probleme geben

Das war mein wagemutiger Versuch dem DIV eine eindeutige ID zu geben. Wenn ich eine feste ID festlege öffnen sich ja alle Artikel.

[Moondancer]

Ich habe aber auch die Vermutung das der Grund eine unglückliche Verschachtelung der Anführungszeichen und der Hochkommas ist.

ja da bin ich mir ebenfalls sicher das dies zu den Konflikten führt

der generierte Code zeigt dies deutlich:
<div class="mehrbutton">
<a onclick="schalten('<img src="kategorien/10_Willkommen/dateien/mozilo.jpg" alt="Bild mozilo.jpg" />');return false;" href="#">Fortsetzung</a>
</div>

entweder Du escapst den HTML Code des Bildes mit " oder Du änderst beim onclick- Event die Anführungsstriche, das es nachher so aussieht:

<div class="mehrbutton">
<a onclick='schalten('<img src="kategorien/10_Willkommen/dateien/mozilo.jpg" alt="Bild mozilo.jpg" />');return false;' href="#">Fortsetzung</a>
</div>

inwiefern diese ID von jedem Browser akzeptiert wird, muss man sehen
bye
Dirk

[azett]

Jau, da wird das JavaScript einfach nicht mit Anführungszeichen im zu versteckenden Text umgehen können. Vermutlich hilft eine Anfrage beim Autor des Scripts, du wirst ja sicher nicht der erste sein, der über das Problem stolpert.

Die IDs würde ich, um es sauber zu machen, einfach manuell durchnumerieren.

[PTV]

Vielen Dank für Eure Tipps. Leider klappt es wohl mit diesem Script einfach nicht. Es ist übrigens eine "Copy Paste Collage" aus einer SELFHTML Vorlage.

Das "escapen" der Anführungszeichen klappt im eignen Zusatzelement nicht da "" einfach immer weg ersetzt wird.

Grundsätzlich nochmal zum Sinn des Versuches: Der Artikelautor soll in der Fortsetzung die ganze Palette der CMS Syntax (also nicht nur ein Bild sondern auch ein Link u.s.w.) verwenden können ohne HTML Kenntnisse haben zu müssen.

Nunja. Ich werde wohl einen neuen Versuch mit der folgenden Funktion probieren:
http://aktuell.de.selfhtml.org/artikel/ ... #beispiel1

[stefanbe]

Mach doch einfach eine versteckte Inhaltseite und dann [seite=hier gehts weiter|versteckte Inhaltseite].

Wenn ich das alles richtig verstanden habe

mfg. stefanbe

[PTV]

Mach doch einfach eine versteckte Inhaltseite und dann [seite=hier gehts weiter|versteckte Inhaltseite].

Das ist dann die "Notlösung". Schöner wäre es wenn man sich zum anlegen einer kurzen Fortsetzung nicht erst durch's Hauptmenü kämpfen müsste.

[stefanbe]

Schöner wäre es wenn man sich zum anlegen einer kurzen Fortsetzung nicht erst durch's Hauptmenü kämpfen müsste

Versteckte Inhaltseiten werden garnicht im Menue angezeigt.
Das [seite=hier gehts weiter|versteckte Inhaltseite] in die Inhaltseite, als Link erscheint "hier gehts weiter".

mfg. stefanbe

[PTV]

Versteckte Inhaltseiten werden garnicht im Menue angezeigt.

Das ist mir bewußt. Ich sehe es aber aus der Sicht dessen, der den Artikel anlegt. Dieser muß im Admin Hauptmenu eine neue Seite anlegen und bei Löschung des Artikel auch daran denken, daß dieser aus zwei Teilen auf unterschiedlichen Seiten besteht.

[stefanbe]

Naja das ist aber besser als darauf zu hofen das der Besucher JavaScript an hat.
Grad in grossen Firmen dürfen die Mitarbeiter kein JavaScript benutzen und die Barrierefrei leidet da auch.

mfg. stefanbe

[azett]

Schau dir mal die JS-Funktion toggle() an, mit der beim Bearbeiten eines Eintrags in moziloWiki die Smileys ein- und ausgeblendet werden; du findest sie in der Datei buttons.js. Genutzt wird sie in der Funktion getFormatToolbar() in der index.php des Wikis.

[azett]

Habs mal probiert, ist nicht schwer.

Diese Datei legst du als toggle.js ins verwendete Layoutverzeichnis (z.B. layouts/mozilCMS-nbsp~2009):

Code Auswählen Erweitern

/*
 * @objDisplayToggle = kann ein string oder ein DOM-Objekt sein
 * @objTextToggle = kann ein string oder ein DOM-Objekt sein
 * @showText = Text der angeizeigt werden soll, wenn das objDisplayToggle sichtbar ist
 * @hideText = Text der angeizeigt werden soll, wenn das objDisplayToggle versteckt ist
 *
 * toggle("ID des Objekts oder Objekt selber was angezeigt/versteckt werden soll"[ , "ID des Objekts oder Objekt selber bei dem sicher der Text ändern soll", "Text der angezeigt werden soll wenn das Objekt sichtbar", "Text der angezeigt wird wenn das objekt versteckt ist"]);
 */
function toggle(objDisplayToggle, objTextToggle, showText, hideText) {
// Falls die übergebenen objekte strings sind wird angenommen das es sich um die ID des Elements handelt
if (typeof(objDisplayToggle) == "string") {
objDisplayToggle = document.getElementById(objDisplayToggle);
}
if (typeof(objTextToggle) == "string") {
objTextToggle = document.getElementById(objTextToggle);
}
   
// Fehler abfangen falls objDisplayToggle nicht gefunden wurde
if (objDisplayToggle == null) {
alert("Das zu ändernde Objekt wurde nicht gefunden.");
return;
}

// Sichtbarkeit des objDisplayToggle ändern
if (objDisplayToggle.style.display == "none") { // objDisplayToggle Sichtbar
// Definition Inlineelemente (String muss mit | beginnen und enden)
var inline = "|a|abbr|acronym|applet|b|basefont|bdo|big|br|button|cite|code|del|dfn|em|font|i|img|ins|input|iframe|kbd|label|map|object|q|samp|script|select|small|span|strong|sub|sup|textarea|tt|var|";
if (inline.indexOf("|"+objDisplayToggle.nodeName.toLowerCase()+"|") >= 0) {
objDisplayToggle.style.display = "inline"; // objDisplayToggle als Inline-Element anzeigen
} else {
objDisplayToggle.style.display = "block"; // objDisplayToggle als Block-Element anzeigen
}
} else {
objDisplayToggle.style.display = "none"; // objDisplayToggle verstecken
}

// Wenn ein objTextToggle angegeben wurde
if (objTextToggle != null) {
if (objDisplayToggle.style.display == "none") {
objTextToggle.replaceChild( document.createTextNode(hideText) , objTextToggle.firstChild ); // Text hideText anzeigen, das das obj unsichtbar ist
} else {
objTextToggle.replaceChild( document.createTextNode(showText) , objTextToggle.firstChild ); // Text showText anzeigen, da das obj sichtbar ist
}
}
}In der template.html des verwendeten Layouts bindest du das Script ein:

Code Auswählen Erweitern

<head>
...
<script src="layouts/{LAYOUT_DIR}/toggle.js" type="text/javascript"></script>
...
</head>Dann erstell ein benutzerdefiniertes Syntaxelement:

Code Auswählen Erweitern

verstecktesdiv = <a href="#" onclick="toggle('{DESCRIPTION}', this, 'verstecken', 'weiterlesen...');">weiterlesen...</a><div id="{DESCRIPTION}" style="display:none;">{VALUE}</div>Jetzt laß uns das in eine Inhaltsseite einbauen (zur Verdeutlichung gleich mal mehrere zu toggelnde Absätze - beachte die verschiedenen IDs):

Code Auswählen Erweitern

[----]
Der Teaser-Text mit ein paar Infos...mehr gibts nach dem Klick auf "Weiterlesen".
[verstecktesdiv=id1|Das ist nun der Text, der nach dem Klick zum Vorschein kommt. Der kann z.B. auch [link=Links|http://www.test.de] enthalten - oder irgendwelche anderen Syntaxelemente.]
[----]
Der Teaser-Text mit ein paar Infos...mehr gibts nach dem Klick auf "Weiterlesen".
[verstecktesdiv=id2|Das ist nun der Text, der nach dem Klick zum Vorschein kommt. Der kann z.B. auch [link=Links|http://www.test.de] enthalten - oder irgendwelche anderen Syntaxelemente.]
[----]
Zu beachten:

• Die ID für das zu toggelnde DIV darf nicht rein-numerisch ("1") sein, die HTML-Spezifikation verlangt einen Buchstaben am Anfang (deswegen "id1"). (Zitat: "ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ('-'), underscores ('_'), colons (':'), and periods ('.').")
• Der getoggelte Text ist aktuell nur mit aktiviertem JavaScript erreichbar! Eventuell sollte man das DIV nicht fest per
  Code Auswählen Erweitern
  style="display:none;" unsichtbar machen, sondern per JavaScript - dann würde bei deaktiviertem JS der Text einfach angezeigt werden (weil das JS ihn ja nicht unsichtbar machen konnte, wenn es nicht aktiviert ist).

[PTV]

Ja super! Klappt prima! Selbst mit Inhalten. Vielen Dank! Genau so hab ich mir vorgestellt.

Der getoggelte Text ist aktuell nur mit aktiviertem JavaScript erreichbar! Eventuell sollte man das DIV nicht fest per

Code Auswählen Erweitern

style="display:none;" unsichtbar machen, sondern per JavaScript - dann würde bei deaktiviertem JS der Text einfach angezeigt werden (weil das JS ihn ja nicht unsichtbar machen konnte, wenn es nicht aktiviert ist).

Daran zu denken was passiert wenn JavaScript nicht aktiviert ist, ist natürlich toll. Was muss ich denn da im JavaScript ändern damit die Fortsetzung ausgeblendet wir wenn Sie im CSS standardmäßig eingeblendet wird?

[PTV]

Bei meinen Experimenten habe ich festgestellt das folgende Änderung nützlich ist:

Code Auswählen Erweitern

verstecktesdiv = <a href="#{DESCRIPTION}" onclick="toggle('{DESCRIPTION}', this, 'verstecken', 'weiterlesen...');">weiterlesen...</a><div id="{DESCRIPTION}" style="display:none;">{VALUE}</div>
Dabei habe ich beim Link zu "#" die {DESCRIPTION} angehangen. Wenn das nicht passiert springt man immer zum ersten Link "#" auf der Seite. Also bei mehreren Artikeln weg von dem eigentlichen Ziel. Somit wir also das Link Ziel eindeutiger.