Code valide aber Darstellungsproblem

[ServusBenny]

Hallo,
ich hab ein Frage bezüglich der Darstellung eines Javascripts.
Leider habe ich in diesem Gebiet sehr wenig Ahnung.

Ich habe ein Script, welches beim Klick auf einen Link eine Toolbox anzeigt. Der Inhalt der Box habe ich im Code eingefügt.
Beim Test auf Validität kamen sehr viele Fehlermeldungen. Ich durfte kein "<" im Code haben.
Jetzt habe ich alle Zeichen umgeschrieben zu &amp;lt; aber leider wird nun der Code, anstatt des ursprünglichen Inhalts in der Toolbox mehr angezeigt.

Das ist natürlich blöd, der Code ist zwar jetzt valide, aber mein Toolboxscript funktioniert nicht wirklich.
Ich habe mir nun überlegt, ob man diesem Problem vielleicht mit einem Script entgegenwirken kann, dass im Code das Zeichen &amp;lt; steht aber als "<" ausgegeben wird.
Dies könnte natürlich auch völliger Schwachsinn sein, hab da einfach keine Ahnung. Vielleicht muss ich auch was ganz anderes machen.

Ich hab den Link mit dem validen Code und den Link mit der "richtig" dargestellten Seite angefügt.

Seite mit validen Code
Seite mit richtiger Darstellung

Es wäre echt super, wenn mir geholfen werden könnte, da ich auf validen Code nicht verzichten möchte.
Vielen Dank bereits im voraus für euer Bemühen.

Schöne Grüße
Benjamin

[Cheatah]

Hi,

Beim Test auf Validität kamen sehr viele Fehlermeldungen. Ich durfte kein "<" im Code haben.

stünde der JavaScript-Code in einem <![CDATA[ ... ]]>-Bereich, wäre dies anders.

Cheatah

[ServusBenny]

Hi,

stünde der JavaScript-Code in einem <![CDATA[ ... ]]>-Bereich, wäre dies anders.

Mmmhhh, das hört sich so an, als wäre evtl. eine Lösung möglich. Die Frage ist nur, wo ich das <![CDATA[ ... ]]> in meinen Code schreibe.
Das Javascript ist voll in mein HTML-Code eingebunden und ich weiß nicht, wie ich diesen auslagern kann.

[Gunnar Bittersmann]

@@ServusBenny:

Die Frage ist nur, wo ich das <![CDATA[ ... ]]> in meinen Code schreibe.

Die Antwort.

(Einzeilige Kommentare tun es auch, siehe </archiv/2007/11/t162468/#m1058660>)

Das Javascript ist voll in mein HTML-Code eingebunden und ich weiß nicht, wie ich diesen auslagern kann.

Das Wissen.

Live long and prosper,
Gunnar

[ServusBenny]

Nach dem Lesen der Tipps muss ich meine Frage neu formulieren, da ich, glaube ich, ein weiteres Problem habe.
Ich habe davon gesprochen, dass mein Javascript voll im HTML-Code drin ist. Und ich muss dass umdrehen in "dass in meinem Javascript HTML-Code ist.

Deshalb weiß ich leider immer noch nicht, wo und wie ich das <![CDATA[ ... ]]> einbinden kann, oder ob das überhaupt funktioniert.

Hier sind nochmal die beiden Links zur besseren Veranschaulichung:
(Eines der kleinen Bildchen anklicken ...)

Valider Code durch Auskommentierung von Zeichen
Seite wie sie dargestellt werden sollte

[ChrisB]

Hi,

Nach dem Lesen der Tipps muss ich meine Frage neu formulieren, da ich, glaube ich, ein weiteres Problem habe.
Ich habe davon gesprochen, dass mein Javascript voll im HTML-Code drin ist. Und ich muss dass umdrehen in "dass in meinem Javascript HTML-Code ist.

Welchen Unterschied soll das machen?

Deshalb weiß ich leider immer noch nicht, wo und wie ich das <![CDATA[ ... ]]> einbinden kann

Was hast du denn am Beispiel, das du an der verlinkten Stelle vorfindest, nicht verstanden?

MfG ChrisB

[ServusBenny]

Hi,

Ich habe davon gesprochen, dass mein Javascript voll im HTML-Code drin ist. Und ich muss dass umdrehen in "dass in meinem Javascript HTML-Code ist.

Welchen Unterschied soll das machen?

Ich dachte, dass ich den HTML-Code demnach rausmachen muss und via css evtl. wieder zuweisen müsste. Bin mir aber nicht sicher ob das so geht, und mach da schon x-Stunden rum.

Deshalb weiß ich leider immer noch nicht, wo und wie ich das <![CDATA[ ... ]]> einbinden kann

In keinen Beispielen ist javascript mit html so kombiniert, dass innerhalb dem Script HTML verwendet wird. Somit bin ich wieder bei dem oberen Teil und der Frage ob ich das HTML ausgliedern muss. Und in wiefern ich dann den Scriptcode schreibe, da ich in Javascript so gut wie keine Ahnung habe.

MfG ChrisB

[noscript]

In keinen Beispielen ist javascript mit html so kombiniert, dass innerhalb dem Script HTML verwendet wird.

das ist egal, mach es einfach so wie in den Beispielen vorgeschlagen mit CDATA und verwende deinen alten JavaScript-Code!

[ServusBenny]

Also auf jeden Fall schon mal vielen Dank für die ganze Hilfe. Ich seh, dass ich soweit nicht mehr entfernt bin von der Lösung. Aber eine ganz entscheidene Frage gibt es da noch ...

das ist egal, mach es einfach so wie in den Beispielen vorgeschlagen mit CDATA und verwende deinen alten JavaScript-Code!

Und zwar weiß ich einfach nicht, wo mein Code genau anfängt und wo er aufhört. Dadurch, dass die Scriptanweisung in dem HTML drin ist, weiß ich nicht, wo genau ich das

<script type="text/javascript">
/* <![CDATA[ */
  ...
/* ]]> */
</script>

hinpacken soll.

[ChrisB]

Hi,

Und zwar weiß ich einfach nicht, wo mein Code genau anfängt und wo er aufhört.

Wer soll's sonst wissen, wenn nicht du?

Dadurch, dass die Scriptanweisung in dem HTML drin ist,

Vielleicht beschreibst du mal, was du darunter genau verstehst - dass die "Scriptanweisung in dem HTML drin ist".

Wir gingen hier wohl bisher davon aus, dass es sich um einen <script>-Bereich im Head oder Body handelt - und dann sollte sich diese Frage

weiß ich nicht, wo genau ich das

<script type="text/javascript">
/* <![CDATA[ */
  ...
/* ]]> */
</script>
hinpacken soll.

ja wohl eigentlich kaum stellen.

MfG ChrisB

[ServusBenny]

Hi,

Und zwar weiß ich einfach nicht, wo mein Code genau anfängt und wo er aufhört.

Wer soll's sonst wissen, wenn nicht du?

Ja gut, das ist eigentlich ein wahres Wort. Da kann ich nichts dagegen sagen und lass das mal so stehen.

Dadurch, dass die Scriptanweisung in dem HTML drin ist,

Vielleicht beschreibst du mal, was du darunter genau verstehst - dass die "Scriptanweisung in dem HTML drin ist".

Wir gingen hier wohl bisher davon aus, dass es sich um einen <script>-Bereich im Head oder Body handelt - und dann sollte sich diese Frage

weiß ich nicht, wo genau ich das

<script type="text/javascript">
/* <![CDATA[ */
  ...
/* ]]> */
</script>
hinpacken soll.

ja wohl eigentlich kaum stellen.

Also im Head-Bereich würde sie sich nicht stellen und wenn das Script gebündelt im Bodybereich wäre wahrscheinlich auch nicht, aber bei mir ist das eben so verschachtelt und deshalb komm ich meinen Null-Kenntniseen einfach nicht weiter, auch nicht mit zahlreichem Probieren.

Wie gesagt der Code ist einsehbar mithilfe der Links in den oberen Postings.

Grüße Benny

[ChrisB]

Hi,

Also im Head-Bereich würde sie sich nicht stellen und wenn das Script gebündelt im Bodybereich wäre wahrscheinlich auch nicht, aber bei mir ist das eben so verschachtelt und deshalb komm ich meinen Null-Kenntniseen einfach nicht weiter, auch nicht mit zahlreichem Probieren.

Hm ... und mit solchen "Null-Kenntnissen" bietest du Webdesign als Dienstleistung an ...?

Wie gesagt der Code ist einsehbar mithilfe der Links in den oberen Postings.

Gut, also geht es um den onclick-Krempel - da ist CDATA natuerlich wirklich nicht einsetzbar.

Allerdings ist die Umsetzung sowieso reichlich fragwuerdig. Die Inhalte sind, da sie ausschliesslich per onclick ins Dokument reingesetzt werden, sowohl fuer Suchmaschinen als auch fuer andere Nutzer ohne JavaScript nicht zugaenglich.

Vorschlag:
Bringe die Informationen gleich im HTML-Quelltext unter, formatiere sie entsprechend, und blende sie zunaechst aus.
Per onclick machst du dann nur diese Ausblendung rueckgaengig, in dem du entweder style-Eigenschaften direkt, oder indirekt ueber Aenderung der Klasse aenderst, so dass sie wieder sichtbar werden. Das ist eine wesentlich "schoenere" Loesung, und erfordert auch keinen HTML-Code *im* JavaScript.

(Wenn du dich wirklich "Webdesigner" schimpfen willst, dann waer's natuerlich auch mal an der Zeit, den Code mal grundsaetzlich aufzuraeumen - "nur" valide ist naemlich nur der rein technische Aspekt, der sagt aber darueber, ob der Code auch *sinnvoll* ist, noch gar nichts aus.
Sowas wie

<p><b>Printdesign</b>

waere gerne eine Ueberschrift, und deine einzelnen Referenzen-Bildchen waeren dann auch gut in einer Liste untergebracht, ebenso wie die Navigationslinks am unteren Seitenende.)

MfG ChrisB

[ServusBenny]

Hi,

Hm ... und mit solchen "Null-Kenntnissen" bietest du Webdesign als Dienstleistung an ...?

Die Null-Kenntnisse beziehen sich auf Javascript, aber ich gebe zu, dass ich bestimmt nicht so viel Ahnung habe, wie viele hier im Forum, dennoch denke ich, dass ich "gute" Webseiten erstellen kann. Für "kleinere" Aufträge kann ich somit eine durchaus interessante Alternative zu großen Webdesigner-Unternehmen sein. Zudem musste ich mehr oder weniger ein Unternehmen gründen, damit ich meinem Vater eine Schulhomepage auf Rechnung machen konnte. Jetzt schau ich eben mal, ob vielleicht noch mehr geht ... Ansonsten, ich studiere Lehramt und bin hoffentlich bald im Schuldienst dann quäle ich auch niemand mehr hier mit meinen "Null-Kenntnissen" :-)

Allerdings ist die Umsetzung sowieso reichlich fragwuerdig. Die Inhalte sind, da sie ausschliesslich per onclick ins Dokument reingesetzt werden, sowohl fuer Suchmaschinen als auch fuer andere Nutzer ohne JavaScript nicht zugaenglich.

Na, also gut, das kleine Engelchen hat ja schon immer auf meiner Schulter gemeckert, dass ich das so nicht machen sollte, aber mir hats in dem Moment einfach gefallen, aber egal, die Seitennutzer sind wichtiger, also verwerfe ich diese Idee.

(Wenn du dich wirklich "Webdesigner" schimpfen willst, dann waer's natuerlich auch mal an der Zeit, den Code mal grundsaetzlich aufzuraeumen - "nur" valide ist naemlich nur der rein technische Aspekt, der sagt aber darueber, ob der Code auch *sinnvoll* ist, noch gar nichts aus.
Sowas wie

<p><b>Printdesign</b>
waere gerne eine Ueberschrift, und deine einzelnen Referenzen-Bildchen waeren dann auch gut in einer Liste untergebracht, ebenso wie die Navigationslinks am unteren Seitenende.)

Da bin ich grad dran, aber danke für die Tipps und den Hinweis. Alles andere habe ich ja schon oben geschrieben.

Also trotzdem vielen Dank für die schnellen Beiträge und die Tipps. Ich werde wohl nochmals eine NAcht druchschaffen müssen, aber mit Kaffee geht alles :-)

Schönen Abend
Gruß Benny

[molily]

Hallo,

Nach dem Lesen der Tipps muss ich meine Frage neu formulieren, da ich, glaube ich, ein weiteres Problem habe.
Ich habe davon gesprochen, dass mein Javascript voll im HTML-Code drin ist. Und ich muss dass umdrehen in "dass in meinem Javascript HTML-Code ist.

Ich glaube, da läuft was grundsätzlich falsch, deshalb beschreibe ich mal eine ganz anders Lösung, anstatt dir zu zeigen, wie du den HTML-Code letztlich doch wieder ins JavaScript packst. Da kommt nämlich letztlich auch nichts besseres heraus.

Siehe es einmal so: Du hast Teile des Dokuments, du willst du einblenden, wenn der Anwender auf eine Schaltfläche klickt. Ja, dieses HTML sollte erst einmal Teil des Dokuments sein. Ganz normal irgendwo im Dokument stehen. Ohne JavaScript wäre es bestenfalls sichtbar. Wenn JavaScript verfügbar ist, wird die Interaktivität hinzugefügt.

Jetzt müsstest du dir eine sinnvolle HTML-Struktur überlegen, mit der du das realisieren kannst. Nun, welche Struktur hat dein Dokument denn? Ich würde sagen, eine solche:

<h1>Referenzen</h1>  
   <h2>Webdesign</h2>  
      <h3>Die Webseite der Schule in Bergatreute</h3>  
         <p>... Beschreibung ...</p>  
      <h3>Die Reisewebseite von INAustralINA</h3>  
         <p>...</p>  
      <h3>Die Privatseite des Inhabers von Webdizain</h3>  
         <p>...</p>  
   <h2>Printdesign</h2>  
      <h3>...</h3>  
        ... Und so weiter, ich denke, du hast es verstanden.  

Das sieht doch schon sehr aufgeräumt aus. Diese h3-Unterabschnitte können wir nun mittels JavaScript verstecken und beim Klick auf einen Link als »Tip« einblenden.

Also brauchen wir eine Art Navigation, die wir später umstylen, sodass sie so aussieht, wie deine horizontale Bilder-Liste, und mit der nötigen JavaScript-Logik versehen werden:

<h2>Webdesign</h2>  
  
<ul id="webdesign-navigation">  
<li id="link-bergatreute"><a href="#bergatreute">Die Webseite der Schule in Bergatreute</a></li>  
<li>... dasselbe für INAustralINA ...</li>  
... usw.  
</ul>  
  
<div id="bergatreute">  
   <h3>Die Webseite der Schule in Bergatreute</h3>  
   <p>...</p>  
</div>  
  
usw.

Das könnte erstmal der HTML-Code sein, dann bauen wir schrittweise CSS und JavaScript hinzu.

Erstmal verstecken wir den Unterabschnitte, aber nur wenn JavaScript aktiv ist (siehe unten):

body.javascript-aktiv #bergatreue { display:none; }

Dann bauen wir die Navigation um:

#webdesign-navigation, #webdesign-navigation li { margin:0; padding:0; list-style-type:none; }  
#webdesign-navigation li { float:left; }  
#webdesign-navigation a { display:block; }  
#link-bergatreute a { width:44px; height:44px; background-image:url(/images/site_ghwrsb.jpg); overflow:hidden; padding-top:50px; }

Und so weiter, das nur als schnelles ungeprüftes Beispiel des Konzepts. Das soll nur sagen, dass man aus der obigen Listennavigation mit einigen Standardkniffen die gleiche Darstellung wie jetzt zaubern kann.

Nun zum Hinzufügen der JavaScript-Interaktivität nach dem erfolgreichen Laden des Dokuments:

function init () {  
   // Setze body-Klasse, damit die CSS-Regeln aktiv werden  
   document.body.className = "javascript-aktiv";  
   // Hole alle a-Elemente in der Navigation  
   var links = document.getElementById("webdesign-navigation").getElementsByTagName("a");  
   // Durchlaufe sie  
   for (var i = 0, a; a = links[i]; i++) {  
      // Füge jedem einen Event-Handler zu  
      a.onclick = openTooltip;  
   }  
}  
  
window.onload = init;  
  
// Event-Handler  
function openTooltip () {  
   // Bestimme Ziel-ID anhand des href-Attributs  
   var id = this.getAttrbute("href").substring(1);  
   // Da steht dann jetzt beim ersten Link »bergatreute« drin  
   // Rufe eine Funktion aus der Tooltip-Bibliothek auf, übergebe ihr die ID  
   TagToTip(id);  
   // Unterbreche Standard-Event-Handling  
   return false;  
}

Das ist jetzt auch nur Konzept-Code, da muss sicher mehr gemacht werden. Und wenn man einige Tools wie Helferscripte, Bibliotheken oder Frameworks verwendet, ist das viel einfacher und flexibler umsetzbar. Aber das kommt mit der Zeit, wenn man an die Grenzen stößt. (Ich habe z.B. mit IDs gearbeitet. Man will den CSs- und JavaScript-Code natürlich nicht wiederholen für die mehreren IDs. Es gibt JavaScript-Helferscripte zum Ansprechen von Elementen aufgrund gewisser Kriterien, z.B. getElementsByClassName.)

Nun, was haben wir damit erreicht:
Eine relativ saubere Trennung von HTML, CSS und JavaScript. Alle Inhalte stehen ordentlich ausgezeichnet und strukturiert im Dokument. Die Formatierungen und die letztliche Darstellung der Referenzenliste kann komplett im CSS gesteuert werden. Die Inhalte sind ohne JavaScript zugänglich, denn die JavaScript-Logik schaltet sich optional hinzu. JavaScript-Interaktivität und CSS-Formatierungen lassen sich unabhängig vom HTML ändern.
Die Theorie dahinter nennt sich »Unobtrusive JavaScript« bzw. das Layermodell:
http://aktuell.de.selfhtml.org/weblog/javascript-einsatz

Mathias