// der php hacker

// archiv

JavaScript Detection mit JavaScript und CSS

Geschrieben am 29. Dez 2009 von Charles

Seit dem Web 2.0 haben sich User Interface designs geändert. Sehr viele Leute haben heut zu tage eine Seite die ohne JavaScript nicht mehr auskommt. Deshalb sollte man immer überprüfen ob der Benutzer der Webseite sein JavaScript im Browser aktiviert hat, oder nicht , falls dieser Fall besteht muss ja auch ein Fehlermeldung ausgegeben werden. Und wie das geht zeige Ich euch heute.

Wir haben bei diesem Unterfahren drei verschiedene Teile. Den JavaScript teil, den HTML teil und den CSS Teil. Fangen wir mit dem HTML Teil an.

HTML

<!DOCTYPE html>
<html>
 <head>

 <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
 </head>
 <body>
 <noscript>
Please enable JavaScript in your Major browser ( Firefox, Safari , Opera, Intenet Explorer 8 or Chrome )
 </noscript>

 <div id=“container“>
<div id=“header“></div>
<div id=“content“></div>
<div id=“footer“></div>
</div>
</body>
</html>

Dies ist unser einfaches HTML Gerüst. Das Tag „noscript“ ist dazu gedacht wenn im Browser kein JavaScript aktiviert ist eine Fehlermeldung herauszugeben.
Nun binden wir unser CSS ein.

CSS

@media all
{
   div#container
  {
     display:none;
  }
}

Durch diese CSS deklaration wird nun garnichts gezeigt was in diesem Element mit inbregriffen ist.

Nun kommen wir zum JavaScript part. Um diesen Part umzusetzen nehmen wir das JavaScript Framework jQuery. Dort nun wiederum setzen wir eine zweite CSS Regel. Das sieht dann folgend aus

JavaScript / jQuery

$(document).ready(function()
{
 $('div#container').css({'display':'block'});
 }
);

Wenn unser Dokument geladen ist wird auch die seite angezeigt falls JavaScript aktiviert ist in unserem Browser.

So jetzt sin wir schon so gut wie fertig. Nur stylen wir nun noch ein wenig das Noscript Element
CSS

noscript
{
 width:50%;
 margin-top:25%;
 margin-left:25%;
 text-align: left;
 height:50%;
 width:50%;
 padding: 5px 20px 5px 45px;
 border-top: 2px solid #ffd324;
 border-bottom: 2px solid #ffd324;
 background:#fff6bf;
}

So wenn nun kein JavaScript im Browser aktiviert ist wird uns eine Fehler Meldung ausgegeben.

Danken möchte ich noch Sven(@fate__) für seine kleine Hilfestellung. Und über konstruktive Kritik freue ich mich natürlich :)

Geschrieben in CSS, Javascript 4 Kommentare

#001
29. Dez 2009

Bevor man das tut, sollte man sich allerdings fragen, ob man wirklich möchte, dass die Webseite ohne JavaScript nicht funktioniert. Ich habe jedenfalls ehrlich gesagt bisher kaum eine Webseite gesehen, deren grundsätzliche Funktionalität nicht auch ohne JavaScript hätte gegeben sein können.
Gleich als erstes Beispiel möchte ich diese Website selbst anbringen: Warum ist für sowas Simples wie das Abgeben eines Kommentars JavaScript erforderlich?

Warum man für das simple Einblenden eines Containers gleich jQuery, welches potenzielle Inkompatibilitäten mit sich bringt, einbinden soll, erschließt sich mir auch nicht.


#002
29. Dez 2009
Cem Derin

Hier jedenfalls habe ich den Submit-”Button” mit JS versehen, weil ich zu dem Zeitpunkt des erstellens schlicht und ergreifend zu faul war, das CSS für den Button zu schreiben. Und bisher habe ich einfach keine Lust oder Zeit gefunden das zu ändern.


#003
30. Dez 2009
d^

Nettes Posting, wenn du noch an Deiner Rechtschreibung bzw. an deinem Satzbau feilst ist alles im grünen Bereich. ;-)


#004
30. Dez 2009
Charles

@d^ danke für deinen Kommentar, ja ich würde gerne noch den post updaten aber dazu hab ich im moment leider die Rechte nicht.

Regards – Charles

// kommentieren

// senden
theme von mir, software von wordpress, grid von 960 grid system. funktioniert in allen browsern, aber der safari bekommt das mit der schrift am schönsten hin.