[JS] Ausgabe von Content nach willkürlichem Prinzip formatieren? [(mit PHP) erledigt]

[Bonzenkind]

Hallo ihr Fähigen!

Ich will in einem HTML-Dokument eine feste Auswahl von Zitaten mit jeweiligem Urheber mittels Javascript zufällig ausgeben. In der Rohform liegt beides (JS-Code, sowie Zitatformatierung) vor.

Zitate werden so formatiert:

<blockquote>
<span class="bqstart">“</span>
Zitatzitatzitat
<span class="bqend">”</span>
</blockquote>
<div class="urheber">
<span class="q">Quelle:</span>Urheber, Jahreszahl
</div>

Die jeweiligen Klassen .bqstart, .bqend und .q hier näher zu erläutern ist wohl redundant; es geht ja nur ums Prinzip. Sollten die CSS-Eigenschaften von Nöten sein, was ich nicht glaube, reiche ich diese selbstverständlich nach.

Da Zitate und Urheber oft sehr unterschiedlich lang sind, kann ich nicht riskieren diese in eine festdefinierte Klasse zu packen, habe mich notgedrungen für eine Tabelle entschieden. Im Endprodukt sieht das ganze dementsprechend so aus:

<div id="zitattabelle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td align="left" valign="top"><blockquote><span class="bqstart">“</span>Zitatzitatzitat<span class="bqend">”</span></blockquote></td>
<td align="right" valign="top" width="10"><div class="urheber"><span class="q">Quelle:</span>Urheber, Jahreszahl</div></td></div>
</table>
</div>

Der JS-Code zur willkürlichen Anzeige der Zitate ist folgender:

<script language="JavaScript">
var indexzitat=new Array() 
indexzitat[0] = "Zitatzitatzitat1";
indexzitat[1] = "Zitatzitatzitat2";
indexzitat[2] = "Zitatzitatzitat3";
indexzitat[3] = "Zitatzitatzitat4";
indexzitat[4] = "Zitatzitatzitat5";
var Q = indexzitat.length;
var whichindexzitat=Math.round(Math.random()*(Q-1));
function showindexzitat(){document.write(indexzitat[whichindexzitat]);}
showindexzitat();
</script> 

Wenn ich jetzt versuche, die Schnippsel zu vereinen kommt da nur Bullshit raus; anstatt "Zitatzitatzitat1" den kompletten Inhalt des zweiten HTML-Blocks auszugeben funktioniert nicht.

Was kann ich da tun? Wie kann ich in Arrays auch HTML- und CSS-Formatierungen vornehmen? Weiß da jemand was? Was mach ich falsch? Danke für jede Antwort - Bonzenkind.

[Dexter]

Da Zitate und Urheber oft sehr unterschiedlich lang sind, kann ich nicht riskieren diese in eine festdefinierte Klasse zu packen

Mhh? Weil Äpfel grün sind brauchst Du eine Tabelle? Versteh ich nicht. Erklär ma.

Ich hab btw trotz Deiner ausführlichen Anfrage überhaupt keine Idee wo Dein Problem ist, und was Du eigentlich genau machen willst.
Du willst per JS zufällig irgendwelche Inhalte des Dom/HTML sicht/unsichtbar machen? Nein? Ja? Warum?

[mario439]

Ich habe das gleiche Problem wie Dexter ich kann auch nicht erkennen was dir Sorgen bereitet...

Damit kannst du in Javascript die <td>'s formatieren:

document.getElementById("id_des_zieles").style. 

und dann das dazugehörige satement natürlich noch dahinter
das könnte dann so aussehen:

document.getElementById("id_des_zieles").style.display ="none"; 

(Ein- und Ausblenden)

document.getElementById("id_des_zieles").style.color ="red"; 

(Schriftfarbe)

document.getElementById("id_des_zieles").style.backgroundColor = "yellow"; 

(Hintergrundfarbe)

document.getElementById("id_des_zieles").style.fontSize = "250%"; 

(Schriftgröße)

Du kannst damit (?fast?) alles machen was man mit CSS machen kann
HIER NOCH MEHR

Also kannst du die Frage noch ein bisschen erläutern dann kann man dir leichter helfen

Gruß Mario

[Kugelfisch23]

Auch ich kann keinen Grund zur Verwendung einer Layout-Tabelle erkennen. Wie genau soll das Ergebnis dargestellt werden? Tabellen sind übrigens auch abgesehen von der Tatsache, dass sie semantisch unpassend sind problematisch, da das genaue Verhalten bei Verwendung einer table-layout-Eigenschaft mit wert auto (der Standardwert) in CSS 2.1 nicht exakt spezifiziert ist - siehe http://www.w3.org/TR/CSS21/tables.ht...o-table-layout. Abgesehen davon würde ich die Anführungszeichen für das blockquote-Element über die :before- und :after-Pseudoelemente generieren (schliesslich zeichnet bereits das blockquote-Element die Inhalte als Zitat aus) und zur Auszeichnung der Quelle ein cite-Element nutzen.

Zu deinem Problem: an welcher Stelle befindet sich das Zitat im Dokument? Bedenke, dass document.write() in HTML-Dokumenten das übergebene Markup direkt nach dem script-Element ausgibt (in XHTML/XML kann document.write() gemäss http://www.w3.org/MarkUp/2004/xhtml-faq.html#docwrite nicht verwendet werden). Du müsstest dein Markup zur Auszeichnung des Zitats demnach entweder mit ausgeben dafür sorgen, dass der Zitattext innerhalb einer bereits vorbereiteten (leeren) Struktur ausgegeben wird. In Letzterem Fall würde es sich aber eher anbieten, die vorhandene Struktur mit IDs zu versehen, darüber das passende Element zur Ausgabe zu adressieren (getElementById()) und dann z.B. eine Text-Node als Kindelement einzufügen oder die innerHTML-Eigenschaft zu verändern.

Alternativ würde sich anbieten, ein zufälliges Zitat direkt serverseitig auswählen und ausgeben zu lassen. Das wäre die bei weitem eleganteste Lösung, da sie ohne JavaScript funktionsfähig ist und nur das tatsächlich angezeigte Zitat übertragen werden muss. Steht dir eine serverseitige Skriptsprache wie z.B. PHP zur Verfügung?

[Bonzenkind]

Ich hatte mir schon gedacht, dass die Idee, layout-Tabellen zu Nutzen hier nicht gerne gesehen ist. Ihr habt ja wohl auch recht. Wahrscheinlich war es einer Kombination aus Unwissenheit und Ungeduld (es nicht ohne hinzubekommen) geschuldet, Tabellen zu nutzen. Dies kam daher, dass ich zunächst ein ausschließlich mit CSS, ohne layout-Tabelle formatiertert Zitat/Urheber-Kombination hatte. Dies sah gut aus. Testweise habe ich ein anderes eingebunden; die Länge von Zitat und Urheberzeile unterschieden sich so stark, dass die width-Angaben der Klassen überhaupt nicht mehr passen. Also dachte ich mir, dass ich die Zitat- und Urheber-Container einfach in eine unverzerrbare Tabelle quetsche, dann kann mir die width-Angabe egal sein. Fertig. Wahrscheinlich war das aber auch einfach völlig wirr gedacht, wie ich gerade feststelle. Verdammt .

Ansonsten hat Kugelfisch wohl ebenso vollkommen recht, mit der Idee das serverbasiert zu realisieren; auf die Idee war ich einfach nicht gekommen.

Ich hab das ganze jetzt mittels...

<?php
  $quotes[] = '<blockquote><span class="bqstart">“</span>Zitatzitastzitat<span class="bqend">”</span></blockquote>';
  $quotes[] = '<blockquote><span class="bqstart">“</span>Zitatdfzitatzitat<span class="bqend">”</span></blockquote>';
  $quotes[] = '<blockquote><span class="bqstart">“</span>Zitatzitdfatzitat<span class="bqend">”</span></blockquote>';
  srand ((double) microtime() * 1000000);
  $random_number = rand(0,count($quotes)-1);
  echo ($quotes[$random_number]);
?>

...gelöst. Danke für's reine Ideeninput .