...

View Full Version : A script to check if javascript enabled with a disabling DIV



telmessos
12-28-2010, 02:26 PM
Hi all,

I am writing an administration panel for a web site. I want to check if the client's browser javascript enabled and if it is not enabled, a warning DIV comes telling the client to enable javascript and disable the actual page (make the actual page non-usable). Is there a way to do that?

Thanks in advance
telmessos

abduraooft
12-28-2010, 02:45 PM
There's a <noscript> (http://htmldog.com/reference/htmltags/noscript/) tag in html.

telmessos
12-28-2010, 03:29 PM
is it possible to view the "No javascript warning DIV window" which disables the content of the page with <noscript> tag ???

Philip M
12-28-2010, 03:36 PM
<p align="center"><font color="#CC0033" size="3" face="Arial"><b>Sorry! &nbsp It appears that your browser does not support JavaScript,<br> or JavaScript has been disabled, possibly by your network administrator.

Obviously any features of the page which require JavaScript will be unusable if Javascript is disabled. And you cannot use disabled Javascript to reveal or hide some div or message.

telmessos
12-29-2010, 08:18 AM
thanks PhilipM,

I found noscript already before opening a thread in this forum. When I use noscript tags, the message appears on the top the page but also the content of the page (menus, body, header etc) appears. I do not want the page visitors reach or edit that content without javascript enabled. Otherwise they will be able to click on the menu which is made with javascript functions or submit forms which is normally validated with javascript. As you may understand this is not an ideal situation.

I hope there's an alternative way for it.

Thanks again
telmessos

abduraooft
12-29-2010, 08:35 AM
I do not want the page visitors reach or edit that content without javascript enabled. The only way is to dynamically create all other HTML using javascript.

Philip M
12-29-2010, 09:42 AM
Or to redirect users who have Javascript enabled to a different page.

abduraooft
12-29-2010, 09:48 AM
I do not want the page visitors reach or edit that content without javascript enabled. Otherwise they will be able to click on the menu which is made with javascript functions or submit forms which is normally validated with javascript.
FYI: You've to adopt a progressive enhancement (en.wikipedia.org/wiki/Progressive_enhancement) strategy while developing a web page which means your page can serve the basic content and functionality for everyone.

oesxyl
12-29-2010, 11:25 AM
thanks PhilipM,

I found noscript already before opening a thread in this forum. When I use noscript tags, the message appears on the top the page but also the content of the page (menus, body, header etc) appears. I do not want the page visitors reach or edit that content without javascript enabled. Otherwise they will be able to click on the menu which is made with javascript functions or submit forms which is normally validated with javascript. As you may understand this is not an ideal situation.

I hope there's an alternative way for it.

Thanks again
telmessos
this a design problem and an abuse of javascript. If you need javascript to control access to some elements in the page or you validate forms only with javascript you are in trouble because this a server side scripting job. The solution is to redesign the page.

http://onlinetools.org/articles/unobtrusivejavascript/index.html

PS: AFAIK noscript element doesn't exists in html5, just in case you intend to use it.

best regards and happy holidays

telmessos
12-29-2010, 02:59 PM
Thanks to all answering people.

First of all, of course I am not planning to make the validation of the information only by Javascript. I will also validate the information using PHP. My concern is, instead of server side validations, using Javascript event driven validations (like on click of a button etc) as they look more user friendly.

Redirecting the visitor to a second page for validation is not a good option for me. I would like to check if the page is functioning which Javascript or no content to be displayed if the Javascript disabled. All pages contains Javascripts. So once the visitor comes to my page he/she must know that page needs Javascript and can't do anything without it. So it saves the time of everybody. That is my main problem.

A friend of mine suggested a solution which seems fine for my problem. I wanted to share it with everybody. It is an idea of creating a wrapper division with display:none style setting and make the display option block with Javascript. So if the browser has no Javascript support, only the no script section out of the wrapper division will be shown and the other content will not be displayed.

That seems ok to me. But if you have any other ideas, I would be happy to hear it.

Thanks again
telmessos

rnd me
12-29-2010, 11:40 PM
add a class to <body>, "noscript"

then add a script block at the end of your body tag:

<script> document.body.className= document.body.className.replace("noscript", "");</script>

now, you can easily style the whole document in css by appending ".noscript " to any selector to make it toggle only in the non-javascript view.


ex:


.noscript form { display: none; }
.noscript #disabledScriptWarning { display: block; }


it's easier to reuse and maintain this code than hard coding specific IDs in javascript; the only thing to adjust is css, and you can do several things at once with a list of selectors...

oesxyl
12-29-2010, 11:47 PM
add a class to <body>, "noscript"

then add a script block at the end of your body tag:

<script> document.body.className= document.body.className.replace("noscript", "");</script>

now, you can easily style the whole document in css by appending ".noscript " to any selector to make it toggle only in the non-javascript view.


ex:


.noscript form { display: none; }
.noscript #disabledScriptWarning { display: block; }


it's easier to reuse and maintain this code than hard coding specific IDs in javascript; the only thing to adjust is css, and you can do several things at once with a list of selectors...
what you do if a user disable your css or use a browser like lynx, :)

best regards

rnd me
12-29-2010, 11:54 PM
what you do if a user disable your css or use a browser like lynx, :)

best regards

nothing; don't cater to horses on highways...

DanInMa
12-30-2010, 05:07 PM
nothing; don't cater to horses on highways...

best. post. ever.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum