Hi,
I want to check whether the user have enabled javascript on their browser or know if not then give an alert msg.
You would just put the message as some html. When the page loads, you would use javascript to hide that little bit of html from them.
You can embed a flash file that contains alert message. Use javascript to hide the flash file. If the javascript does not work, alert message will be shown. 
Thaty will not work for the large number of people who have JavaScript but not Flash.
For those of us that are too new to javascript, could someone explain how I can either display a warning or provide an alternative when javascript is disabled on the browser?
I have a javascript menu. If someone does not have javascript enabled, how can I display a substitute html menu.
Don’t think of of the regular html page as an alternative. Javascript is the alternative here.
Make your webpage work properly as javascript did not exist. Then, once that is done, you can add some javascript that will enhance the already working webpage. You might be able to just add some enhancements to the existing html elements, or you may opt to simply replace large portions of the webpage with new stuff.
If you want to display a message to user with js disabled, to inform them they’re missing useful functionality without js, you just put the message into the html. You then try to hide the message with js.
<p id="js_disabled_message">u have no js</p>
<script>
document.getElementById('js_disabled_message').style.display = 'none';
</script>
The <noscript> tag also exists
Thanks!
That gives me what I need to put some HTML menu at the top of my pages.
this is not very nice. there’s a standard method of degradation you should use for those without javascript.
- use the <noscript> … </noscript> tag, you can display any text within and style it via css. won’t eval unless js is disabled.
- your menu needs to be semantic anyway, i.e. one that the browser (and any search engine spiders) can read from the source code. the javascript should typically be applied ‘ON TOP’ of that to make it all look / work nicer.
there are plenty of examples of javascript menu scripts with a semantic markup / degradation options, look on google. also, steer clear of any dynamic drive etc stuff that has the menu configured in a javascript array.
There is never a need to use <noscript> tags with browsers more recent than IE4 and Netscape 4. All that is needed is to use JavaScript to hide anything in the page that you don’t want those with javaScript enabled to see. This is way more flexible than <noscript> since you can actually test for the browser supporting specific JavaScript commands using feature sensing and only hide the HTML when the features that your JavaScript requires to work are actually supported properly by the browser.
yes there is. for starters, there are plenty of people that browse with javascript disabled (almost 3% on one of my clients’ shop sites). then, there are people that browse through lynx or their mobile browsers, etc etc.
All i am saying is you should NOT design your site to function around javascript, javascript should be a way to compliment your site’s functionality instead. using noscript is more semantic way of catering for users that don’t have javascript, i guess.
and yes, I believe that in a thing such as a minimum requirements for visiting a webpage won’t go amiss… I also believe people should not use IE6 and be forced to upgrade, just as I believe in the tooth fairy… The reality is, you can do any of that on sites that don’t matter such as blogs, info sites etc - but you need to consider the potential paying customers on any business site…
That doesn’t require <noscript> at all. Just put the code in your page without the noscript tag and then use JavaScript to hide it when JavaScript is enabled. That way yu have far better control and can even hide inline elements rather than just block elements.
The only place where <noscript> would actually be useful is wrapped around a <link> tag in the head of the page to hide a CSS file from JavaScript enabled browsers but as you can only use noscript in the body it is an absolutely useless tag.
For example instead of using noscript to control which of two sentences appears like this:
<div id="script"></div>
<noscript><p>JavaScript is <b>not</b> supported.<p></noscript>
<script type="text/javascript">
document.getElementById('script').innerHTML = "<p>JavaScript is supported</p>";
</script>
We can shorten the code by getting rid of the noscript tag completely and still achieve the same result like this:
<p>JavaScript is <b id="script">not </b>supported.<p>
<script type="text/javascript">
document.getElementById('script').style.display = 'none';
</script>
As you can see the code without the noscript tag is much simpler to do exactly the same thing and also has the flexibility to do things that can’t be done with the noscript tag at all such as testing if ajax is available.
sure, i totally get it - but still think that the noscript block is a more semantic way of handling things. it won’t get rendered on-screen unless it has to. doing things your way requires adjustments for users that DO have javascript enabled. for starters, you need to use inline js which is a bad practice. alternatively, you need a domready/onload handler that can hide your warning messages instead, something that can cause a flicker / visible change in the user’s experience.
consider
<noscript><div id="warning">you need to have javascript enabled to use this site. javascript is cool .... <img src='index.php?js=false' border='0' width='1' height='1' /></div></noscript>
with css accompanying and setting warning like a modal view or whatever - scary red message, you get the picture. it also lets your processor know the user is w/o javascript so alternative browsing can be enabled for subsequent page views
as for testing for features on js - enabled browsers, that’s what frameworks are for
To get awy from flickering, you could always do:
<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="js-only.css">');
</script>
er, this is probably worse as it will slow down the site rendering.
first, you use inline js, then you do document.write which will pause all rendering and reinit the dom to evaluate what came up, then the css reapplied would also go through all available dom elements and apply changes as needed.
remember these best practices (from google labs):
- Inline scripts block rendering in the entire page;
- Inline scripts block downloads;
- Stylesheets followed by inline scripts can make your pages twice as slow;
it’s like using a sledgehammer to take out a nail
My example several posts above uses neither inline JavaScript nor document.write statements for either variant. In both cases the actual script tag content goes in a separate file and is only included inline in the example so you can see what line of code is required in each case. The script tag can go at the bottom of the body (the usual place to put unobtrusive JavaScript).
The version without the noscript tag is both shorter and more semantic since noscript has no semantic value. Just imageine how much longer the noscript version would need to be to change one word in a paragraph ten lines long considering that noscript is a block tag and therefore you’d have to substitute the entire paragraph rather than the one word.
Also it probably isn’t just support for JavaScript that you need to test for but support for some specific part of JavaScript (such as Ajax). The noscript version cannot be adapted to test for support for anything beyond basic JavaScript and Netscape 2 would pass that test.
Stephen,
Based on what I read here and what I have been doing with my site, I put my javascript menu, my standard menu and the JavaScript to hide the standard menu all in a single nav.php file. This provides me a single spot to edit everything associated with site navigation.
Now I read your message “The script tag can go at the bottom of the body (the usual place to put unobtrusive JavaScript).” Am I making an error to include the unobtrusive JavaScript in my nav.php file?
No. With unobtrusive JavaScript the script tag itseld has to go somewhere. There are two places people use - either immediately before the </head> tag or immediately before the </body> tag. When you place the script tag at the end of the HTML you don’t need to use an onload event handler (or any other special processing) for the code to be able to update all the page since at that point the whole of the HTML has already loaded and is accessible. That also avoids the need to wait for all the image files to finish loading before your JavaScript can run.