JavaScript Je nach Aktivierung verschiedene Aktionen

Put001 · 6. Juli 2010

Hi,

ich suche eine Möglichkeit in meinem PHP-Projekt je nach Aktivierung von Javascript unterschiedlichen Inhalt anzuzeigen. D.h. wenn es aktiviert ist, dann soll mein Javascript Carousel angezeigt werden. Wenn Javascript deaktiviert ist, dann nicht. Derzeit ist es so, dass bei deaktivierten JS trotzdem was angezeigt wird, was aber die Anzeige der Seite komplett unbrauchar macht. Ich habe eine Ansatz gehabt:

Code:

<html>
<head>
<script type="text/javascript">
<!--
function chkJsOK()
{
if(document.getElementById) {
document.getElementById("MitJS").style.display  = "block";
document.getElementById("KeinJS").style.display = "none";
}
}
-->
</script>
</head>
<body onload="chkJsOK()">
<div id="KeinJS" style="display:block;">
<h1>Das hier ist ID# JS-OFF, also KEIN Javascript oder Browser spinnt!</h1>
<p> Hier kommt die ganze Seite (und zwar ohne Javascript).</p>
</div
<div id="MitJS" style="display:none;">
<h1>Das hier ist ID# JS-ON, also Javascript OK!</h1>
<p> Hier kommt die ganze Seite (mit Javascript).</p>
</div>
</body>
</html>

Das klappt aber leider nicht, da irgenwie mein Javascript Carousel nicht mehr geht. Aufgerufen wird das Carousel auch über <div id="".... Ich denke, darum klappt das nicht.

Könnt Ihr mir hier weiterhelfen.

Viele Grüße und Danke...

S.o.T. · 6. Juli 2010

Hi,

kurze Frage: Ist dir gar nicht, wie unlogisch es ist, mit JavaScript zu überprüfen, ob JavaScript aktiviert ist? :-D

Die Lösung: Elemente, die mit deaktiviertem JavaScript ausgeblendet werden sollen, bekommen diese Eigenschaft einfach per CSS zugewiesen.

Code:

#div { display: none; }

Das JavaScript wird ja sowieso ausgeführt, sobald JavaScript aktiviert ist, also brauchst du in deinem Skript nicht zu überprüfen, ob es aktiviert ist, sondern einfach nur zu schreiben:

Code:

var div = document.getElementById("div");
if(div) { div.style.display = "block"; }

Edit: Nachdem ich deinen Post noch einmal durchgelesen habe, bin ich mir gar nicht mehr sicher, ob das alles richtig verstanden habe... Sorry. ^^

Fatal Error · 6. Juli 2010

ich kenn da auch noch den <noscript> tag, was da drinn ist wird angezeigt wenn javascript deaktiviert ist.

S.o.T. · 7. Juli 2010

Fatal Error schrieb:
ich kenn da auch noch den <noscript> tag, was da drinn ist wird angezeigt wenn javascript deaktiviert ist.

Da es hier ja ums Lernen geht, erlaube ich mir, dich zu korrigieren und dich auf diese Weise zu einem noch klügeren Menschen zu machen.

Was du meinst, ist nicht "Tag", sondern "Element". Siehe Element, Tag, Attribut, ein für alle Mal!.

kamil02 · 7. Juli 2010

also ich prüfe auch über verschiedene (auch javascript) scripte was der client für flash, js, auflösung etc. hat, auch wenn javascript aus ist.
das ist eine seite, die nach ner sec. auf eine andere weiterleitet wo dann die informationen ausgewertet werden und dann kannst du sogar php-seitig entscheiden was für inhalte du anzeigen möchtest, vl hilfts dir ja.

xkynet · 7. Juli 2010

Um auf S.o.T.s und Fatal Errors Beitrag zurückzukommen:
noscript ist nicht immer valide, je nach doctype. Den Vorschlag, das mit dem display:none zu machen ist zwar der richtige weg, jedoch ein sehr rechenaufwendiger, besonders wenn man viele Divs auf der Seite hat. ich mache das immer so:
1. ich weise dem Body-Element eine Style-Class "nojs" zu.
2. nun kann ich gezielt im css stylen z.B. .nojs div.blablubb {display:none;}
3. sollte JS aktiviert sein, so kann diese Zeile schnell und effektiv die JS-Elemente anzeigen:
document.body.className="";

Put001 · 8. Juli 2010

Hallo,

meine oben angesprochene Lösung funktioniert, aber leider nicht in Opera. Im IE, Chrome und Firefox geht es. Irgendwie hat Opera Probleme mit "display: none;".

@xkynet
Kannst du dein Vorschlag eventuell mal mit Codingbeispielen erläutern?

Viele Grüße und Danke.

xkynet · 8. Juli 2010

Hier das gewünschte Beispiel. Pass es einfach nach deinen Wünschen an:

HTML:

<!doctype html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Test-Seite</title>
    <script type="text/javascript">
		function chkJsOK(){
			document.body.removeAttribute("class");
		}
    </script>
	<style type="text/css">
		.show_nojs, .nojs .requires_js {display:none;}
		.nojs .show_nojs {display:block;}
	</style>
  </head>
  <body class="nojs" onload="chkJsOK()">
    <div class="show_nojs">
      <h1>Diese Seite benötigt Javascript, damit alle Funktionen funktionieren.</h1>
    </div>
    <div class="requires_js">
		<h1>Das hier benötigt JS. Es ist nur sichtbar, wenn JS aktiviert ist</h1>
	</div>
  </body>
</html>

Suche

JavaScript Je nach Aktivierung verschiedene Aktionen

Put001

Gast

S.o.T.

Ensign

Fatal Error

Lt. Junior Grade

S.o.T.

Ensign

kamil02

Cadet 3rd Year

xkynet

Lieutenant

Put001

Gast

xkynet

Lieutenant