Detecting if javascript is enabled

Archives Yii 1.0.x Discussions
1

I didn't see anything in the documentation about this, so I assume that Yii doesn't have any magic to help with it.

What are your preferred methods for determining if javascript is enabled? There's the option of using a hidden field in a form, but that doesn't work if the user comes straight to a page. There's the option of using an redirect if javascript is enabled, but that's just plain inefficient. There's the option of having an AJAX call to set a variable in the controller, but then the entire page needs to wait for the request to be finished. I'm not sure what else, besides that.

… and I know about graceful degrading, but suppose I want to choose whether to serve up JS Google Maps, or static Google Maps? Or if I need to know if a page can use AJAX to interact with a database…

2

You shouldn't need to know this from the server side if you write good javascript.

For instance, have the browser render static google maps.  Then use javascript to hide the static google map and replace it with the JS one.  Then, if javascript fails, nothing goes wrong, they just see the static google map.

I'm sure google maps would already have a recommended mechanism for this…

3

In an application of mine, the user must login in order to use it. The application also relies on Javascript, so a simple action in order to force the user enable Javascript in their browser it to have the login form render with the display:none css style (it does not show on page) and on the onload event of page, change it to display:block (which makes it appear). If the user has Javascript turned off, they also see a warning message and cannot continue until they enable Javascript. Use this as an example for your technique.

4

If you must have JavaScript enabled to use a website (quite a few do) then I suggest this.

In your main layout file, wrap all your content into a div and give it a style of display:none and an id of content. Above your content div have another div with an id of jswarning and a nice message like "You need to have JavaScript enabled". Then write some JQuery or any other JS framework to unhide the content div and hide the js warning div. If the use dosn't have JS they won't see the content div and will just see the JS warning div. Something like this:

HTML Code:



<html>


  <head>...</head>


  <body>


    <div id="jswarning">Enable JavaScript!</div>


    <div id="content" style="display:none"> My Page content goes here</div>


  </body>


</html>

JavaScript (JQuery):



$(document).ready(function() {


  $("#content").show();


  $("'#jswarning").hide();


});

Or you could remove the js warning div from the DOM completely, what ever you prefer.

Hope that helps you out :)

Chris

5

Quote

If you must have JavaScript enabled to use a website (quite a few do) then I suggest this.

In your main layout file, wrap all your content into a div and give it a style of display:none and an id of content. Above your content div have another div with an id of jswarning and a nice message like "You need to have JavaScript enabled". Then write some JQuery or any other JS framework to unhide the content div and hide the js warning div. If the use dosn't have JS they won't see the content div and will just see the JS warning div. Something like this:

HTML Code:



<html>


  <head>...</head>


  <body>


    <div id="jswarning">Enable JavaScript!</div>


    <div id="content" style="display:none"> My Page content goes here</div>


  </body>


</html>

JavaScript (JQuery):



$(document).ready(function() {


  $("#content").show();


  $("'#jswarning").hide();


});

Or you could remove the js warning div from the DOM completely, what ever you prefer.

Hope that helps you out :)

Chris

That's what I proposed in my message.