javascript und noscript elemente

[Jochen Stevens]

Hallo,

wenn der Browser kein java script unterstuetzt, kann man ja im element <noscript/> angeben, was in diesem fall angezeigt werden soll.

Nun ist es aber so, dass ich auch gerne einen Teil ausblenden moechte, sofern java srcitp nicht unterstuetzt wird. Und zwar geht es um ein dropdown feld, das nur mit java script funktioniert. Diese soll nicht angezeigt werden wenn keine Java script dem Browser zur verfuegung steht.

Meine naive idee funktionierte nicht:

<script>
 <form>
  <select ......>
   <option
  </select>
 </form>
</script>
<noscript>
 <a href="..."/>
<noscript>

Kann mir jemand weiterhelfen? Gruss, J.

[snoot]

Nun ist es aber so, dass ich auch gerne einen Teil ausblenden moechte, sofern java srcitp nicht unterstuetzt wird. Und zwar geht es um ein dropdown feld, das nur mit java script funktioniert. Diese soll nicht angezeigt werden wenn keine Java script dem Browser zur verfuegung steht.

Blende das Feld doch via CSS von vorn herein aus (syle="visibility: hidden") und mittels onload-Funktion mit Javascript wieder ein (style.visibilit = 'visible';).

[Auge]

Hallo

»» Nun ist es aber so, dass ich auch gerne einen Teil ausblenden moechte, sofern java srcitp nicht unterstuetzt wird. Und zwar geht es um ein dropdown feld, das nur mit java script funktioniert. Diese soll nicht angezeigt werden wenn keine Java script dem Browser zur verfuegung steht.

Blende das Feld doch via CSS von vorn herein aus (syle="visibility: hidden") und mittels onload-Funktion mit Javascript wieder ein (style.visibilit = 'visible';).

Dann funktioniert das Formularelement dennoch nicht. Die Alternativen heißen also nicht ausblenden und einblenden, sondern weglassen und einfügen (natürlich per JavaScript).

Tschö, Auge

[molily]

<script>
<form>
  <select ......>
   <option
  </select>
</form>
</script>

Du kannst HTML-Elemente in diesem script-Element mittels http://de.selfhtml.org/javascript/objekte/document.htm#write@title=document.write erzeugen.

Mathias

[suit]

Du kannst HTML-Elemente in diesem script-Element mittels http://de.selfhtml.org/javascript/objekte/document.htm#write@title=document.write erzeugen.

Wobei document.write in XHTML (ausgeliefert als application/xhtml+xml bzw. application/xml) nicht funktionieren wird. Aus dem Grund sind ggf. andere Möglichkeiten (z.B. http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML) interessanter, document.write sollte man sich garnicht mehr angewöhnen.

[molily]

Du kannst HTML-Elemente in diesem script-Element mittels http://de.selfhtml.org/javascript/objekte/document.htm#write@title=document.write erzeugen.

Wobei document.write in XHTML (ausgeliefert als application/xhtml+xml bzw. application/xml) nicht funktionieren wird.

Ja, aber wer will das und wer tut das schon? Die Gegenwart ist HTML-kompatibles XHTML und die Zukunft wird eher HTML 5 sein.

Aus dem Grund sind ggf. andere Möglichkeiten (z.B. http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML) interessanter, document.write sollte man sich garnicht mehr angewöhnen.

document.write ist nicht schön, aber XHTML ist das schlechteste Argument. Mit document.write verschweißt man JavaScript-Logik mit dem HTML-Dokument, sinnvoll wäre aber eine Trennung unter dem Konzept des Unobtrusive JavaScript.

innerHTML ist aber wiederum das Gegenteil. Ich sehe allerdings auch keinen Fortschritt darin, eine Menge nicht-variablen HTML-Code in einem ausgelagerten JavaScript unterzubringen und den dann beim Laden direkt ins Dokument rüber zu schieben. Dass das in XHTML funktioniert, ist im Grunde auch nur ein Hack.

Wenn man diese Dropdown-Navigation unobtrusive schreiben will, hat man im Grunde zwei Möglichkeiten:

1. Man macht daraus ein vollwertiges Formular, das im Falle von deaktiviertem JavaScript ein serverseitiges Script ansteuert, ihm eine URL übermittelt, sodass das Script einfach zu dieser weiterleitet.

Nachteile:
Man »versteckt« Hyperlinks hinter einer komplizierten Aufklapp-Logik. Diese Links sind schlecht zugänglich, man missbraucht ein Formularfeld für eine Linkliste, nur um die Aufklapp-Logik zu bekommen.

Vorteile:
Es ist ein browsereigenes Widget, was ziemlich zuverlässig bedienbar ist. Es ist dem Benutzer vertraut, funktioniert robust, ist mit der Tastatur ansteuerbar.

2. Die klassische Unobtrusive-Lösung: Man bringt im HTML-Code nur eine Linkliste unter und macht bei aktiviertem JavaScript automatisch eine Aufklapp-Navigation daraus.

Nachteile:
Anstelle einer JavaScript-Codezeile tritt eine eigene Wissenschaft, das Script wird umfangreich und kompliziert. Es ist ziemlich schwer, so ein Widget zugänglich und gut bedienbar zu machen, es ist nie so robust bedienbar wie ein select. Es ist viel Styling notwendig, um es nach einem Aufklapp-Widget aussehen zu lassen.

Vorteile:
Das Markup ist simpel und gut abwärtskompatibel. Die Links sind, wenn man es richtig macht, immer zugänglich.

Diese beiden Alternativen halte ich nicht unbedingt für besser als die hier beschriebene, die document.write und noscript mit einer abwärskompatiblen Linkliste verwendet. Diese Lösung ist einfach, recht robust, und die Vermischung von JavaScript und HTML hält sich in Grenzen.

Mathias

[ChrisB]

Hi,

2. Die klassische Unobtrusive-Lösung: Man bringt im HTML-Code nur eine Linkliste unter und macht bei aktiviertem JavaScript automatisch eine Aufklapp-Navigation daraus.

Nachteile:
Anstelle einer JavaScript-Codezeile tritt eine eigene Wissenschaft, das Script wird umfangreich und kompliziert. Es ist ziemlich schwer, so ein Widget zugänglich und gut bedienbar zu machen, es ist nie so robust bedienbar wie ein select. Es ist viel Styling notwendig, um es nach einem Aufklapp-Widget aussehen zu lassen.

Man könnte auch aus der Linkliste dynamisch ein Select-Feld generieren, welches die Funktionalität analog zur Verfügung stellt.

MfG ChrisB

[EKKi]

Mahlzeit Jochen Stevens,

Meine naive idee funktionierte nicht:

Natürlich nicht - dazu ist sie zu naiv. Du solltest als Grundlage IMMER validen Code schreiben:

<script>

<http://de.selfhtml.org/html/referenz/attribute.htm#script@title=Hier fehlt das "type"-Attribut.>

<form>
  <select ......>
   <option
  </select>
</form>

<http://de.selfhtml.org/html/referenz/elemente.htm#script@title=Innerhalb eines <script>-Elements hat HTML-Code nichts zu suchen.>

</script>
<noscript>

Hier öffnest Du ein <noscript>-Element ...

<a href="..."/>
<noscript>

... und hier öffnest Du das nächste - das geht nicht.

Kann mir jemand weiterhelfen? Gruss, J.

Du selbst - indem Du validen Code schreibst ... z.B. indem Du in SELFHTML zu den von Dir benutzten Elementen die korrekte Syntax nachschlägst.

MfG,
EKKi

[Gunnar Bittersmann]

@@Jochen Stevens:

Nun ist es aber so, dass ich auch gerne einen Teil ausblenden moechte, sofern java srcitp nicht unterstuetzt wird.

Gib mit JavaScript dem 'body' (oder 'html') [1, 2] die Klassenzugehörigkeit "js" und steuere die Sichtbarkeit der betreffenden Elemente mit Nachfahrenselektor:

form {display: none}  
.js form {display: block}

(solange noch Browser im Umlauf sind, die
:not(.js) form {display: none}
nicht verstehen, und das kann bei der Halbwertszeit von IEs noch eine ganze Weile dauern)

[1] http://www.webkrauts.de/2008/12/14/sehr-sehr-schnelle-seiten-website-performance-best-practice-teil-2/
[2] http://forum.de.selfhtml.org/archiv/2009/1/t182266/#m1206029 ff.

Live long and prosper,
Gunnar