What's the best way to toggle a "Please have Javascript enabled" warning?
Currently I've got something like this:
<div id='JSwarning'>ONLY SQUARES DON'T USE JAVASCRIPT</div>
to which I then apply .style.display = "none".
This shows the warning on every page for a little while until it loads. There must be a more graceful way. Can I do it with PHP?
(BTW, get_browser() is not the solution I'm looking for.)
//EDIT
Thanks everyone, that does the trick. Incidentally, to get the page to validate (XHTML 1.0 Strict), I needed to place the child node(s) in a block container.
<script></script>
<noscript>Please enable Javascript.</noscript>
http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.3.1
I think you're after the noscript tag:
<noscript>ONLY SQUARES DON'T USE JAVASCRIPT</noscript>
It's a browser convention, so you don't need to hide it when js is disabled (the browser does this automatically).
use the noscript tag
<script language="javascript">
document.write("Hello World!");
</script>
<noscript>
You need to enable javascript to view this page!
</noscript>
Does you apply this rule when DomContentLoaded is fired?
There is <noscript> too but it seems to me chrome ignores it.
The best way is to … not. Build on things that work.
JavaScript support is not a binary state. People can turn it on. People can turn it off. JS files can fail to load (because a server is down, or blocked). JS can be selectively enabled (e.g. with the Firefox NoScript extension).
Better to use progressive enhancement.
Related
The <noscript> tag can be used to display a message if the user has scripting turned off - but is there any way in which it can be used to contain a conditional (html) statement, or more complicated coding?
Edit: Sorry, perhaps I wasn't clear; I have nothing against the noscript tag itself - but was wondering about the upward limitations of its usage? As far as I have seen, its usage has been merely to tell people to turn scripting on. I'm thinking about potential in terms of accessibility.
What's wrong with <noscript>? It can contain anything you'd want. From entire layouts, to <style> elements to a big fat warning message.
Obviously, you can't use JavaScript inside of it, but aside from that, you can do anything.
You could do this:
<div id="removeIfJS">Sorry, but javascript is disabled</div>
<script>
var sorry = document.getElementById("removeIfJS");
sorry.parentNode.removeChild(sorry);
</script>
Stick to the noscript tag because it's the standard method to solve things. Search engines knows how to deal with it, screen readers know to deal with it and people that have turned javascript off will see a fancy warning/message (with some CSS).
BTW: You cannot do any fancy stuff if scripting is turned off as well.
In a noscript tag you can use all elements that are allowed directly in a body tag. See the link you provided for details.
I have tried to enabled a banner in my opencart shop.
The site is PHP, i basically just need a banner at the top of the page to alert users that don't have JS turned on to turn it on.
i used
<noscript>
<div id="noscript-warning">We reccomend using javascript for the best viewing pleasure ></div>
</noscript>
However this does not seem to be executing.
Not getting feedback from comments, so I'll post possible issues.
You're testing with JavaScript enabled
Your CSS styling of the element is hiding the message
Your CSS styling of other elements is hiding the message
You've posted a modified example that doesn't reflect the actual code
Your trailing > is breaking the layout in whatever browser you're using to test (not likely)
You're attempting to generate the no-script element using JavaScript :P
The <noscript> tag is anecdotally deprecated (http://www.html-5.com/changes/noscript-tag.html), though I doubt that's the problem.
In any case, you can just create a script that removes a "You need Javascript enabled" div.
<div id="jserror">Enable Javascript Please!</div>
<script>
document.getElementById("jserror").style.display = "none";
</script>
Edit: an eventListener isn't even required.
as I'm using Cufon's on my website, but also want to make it look good with JavaScript disabled, I decided to use
<script type='text/javascript'>
document.write("<h1 class='naam'><a class='naam' href='mysite.nl'>MyName</a></h1>");
</script>
<noscript>
<h1 class='other_mockup'><a class='naam' href='mysite.nl'>MyName</a></h1>
</noscript>
This works fine. However, when I validate it, I get this error:
document type does not allow element "h1" here
What to do to fix this? :(
See the specification for differences in script and style elements from HTML 4.
You can't use < and > as data in scripts without some form of escape.
This works fine.
Then you are probably serving the document as text/html instead of application/xhtml+xml so browsers are treating it as HTML.
Was looking through my old question and saw that this one still wasn't solved.
If you want to do the same, use #fontface ( CSS ).
To use it, go to this website. It is really easy to install and works better than Cufon's.
My site heavily depends upon Javascript and if I turn it off my website looks real ugly.
I want to force the user to use Javascript by show him a notification to turn it on, else prompt him that site can't be viewed.
What do I do to achieve this?
Have a look here:
noscript tag
All you can do is test that javascript is turned on or not, and show a notification that the site is best viewed with javascript turned on.
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>
Your browser does not support JavaScript!
</noscript>
Also, feel free to google 'html script tag' and see http://www.w3schools.com/tags/tag_noscript.asp
First off, be warned that forcing the user to do anything is usually considered quite rude. Lots of people keep javascript either disabled entirely or severely restricted precisely because some twerp wanted to use it to force them to do something or look at something.
With that said, you can include some text in <noscript></noscript> tags. That text will only show if the browser doesn't have javascript, or has it disabled.
For your question:
By default show the notification, and with JS + some sort of document/DOM Ready event just remove the notification. Try not to do this on window/onload because then you'll see the notification until ALL resources of that page have been loaded, which takes longer than dom ready. That way, everybody who doesn't have JS will see the message.
But ideally you'd just want to have a website that works with, or without javascript. Maybe unobtrusive javascript is a nice search term for you.
I watched an interesting talk by John Resig (The creator of JQuery) and he even mentions in his video, do not rely on Javascript.
You create a landing page that uses a <noscript> tag to inform the user that your web site doesn't work without Javascript. Then you go and pray $DEITY for forgiveness because you added to the general mire pool that is the web.
I have been using a noscript tag to show a warning when users have JavaScript disabled or are using script blocking plugins like Noscript. The website will not function properly if JavaScript is disabled and users may not figure out why it is not working without the warning.
After the latest Google algorithm shuffle, I have seen the daily traffic drop to about 1/3 of what it was in the previous months. I have also seen pages that were ranking #1 or #2 in the SERPS drop out of the results. After doing some investigating in webmaster tools, I noticed that "JavaScript" is listed as #16 in the keywords section. This makes no sense because the site has nothing to do with JavaScript and the only place that word appears is in the text between the noscript tags.
It seems that Google is now including and indexing the content between the noscript tags. I don't believe that this was happening before. The warning is three sentences. I'd imagine that having the same three sentences appearing at the top of every single page on the site could have a damaging effect on the SEO.
Do you think this could be causing a problem with SEO? And, is there any other method to provide a warning to users who have JavaScript disabled in a way that won't be indexed or read by search engines?
Put the <noscript> content at the end of your HTML, and then use CSS to position it at the top of the browser window. Google will no longer consider it important.
Stack Overflow itself uses this technique - do a View Source on this page and you'll see a "works best with JavaScript" warning near the end of the HTML, which appears at the top of the page when you switch off JavaScript.
<noscript> is not meant for meaningless warnings like:
<noscript>
Oh, no! You don't have JavaScript enabled! If you don't enable JS, you're doomed. [Long explanation about how to enable JS in every browser ever made]
</noscript>
It's meant for you to provide as much content as you can, along with a polite mention that enabling JS will provide access to certain extra features. You'll find that basically every popular site follows this guideline.
I don't think using <noscript> is a good idea. I've heard that it is ineffective when the client is behind a JavaScript-blocking firewall - if the client's browser has JavaScript enabled the <noscript> tag won't activate, because, as far as the browser's concerned, JavaScript is fully operable within the document...
A better method IMO, is to have all would-be 'noscript' content hidden by JavaScript.
Here's a very basic example:
...
<body>
<script>
document.body.className += ' js-enabled';
</script>
<div id="noscript">
Welcome... here's some content...
</div>
And within your StyleSheet:
body.js-enabled #noscript { display: none; }
More info:
Replacing <noscript> with accessible, unobtrusive DOM/JavaScript
Reasons to avoid NOSCRIPT
Somebody on another forum mentioned using an image for the warning. The way I see it, this would have three benefits:
There wouldn't be any irrelevant text for search engines to index.
The code to display a single image is less bulky than a text warning (which gets loaded on every page).
Tracking could be implemented to determine how many times the image is called, to give an idea of how many visitors have JavaScript disabled or blocked.
If you combine this with something like the non-noscript technique mentioned by J-P, it seems to be the best possible solution.
Just wanted to post an interesting tidbit related to this. For a site of mine I have ended up doing something similar to what stack overflow uses, but with the addition of a "find out more" link as my users are not as technical as this site.
The interesting part is that following advice of people aboce, my solution ditched the noscript tag, instead opting to hide the message divs with javascript. But I found that if firefox is waiting for its master password, this hiding of the message is interupted, so I think I will go back to noscript.
If you choose a solution based on replacing the div content (if js is enabled, then the div content gets updated) rather than using a noscript tag, be careful about how google views this practice:
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353
I'm not sure google will consider it deceptive, but it's something to consider and research further. Here's another stackoverflow post about this: noscript google snapshot, the safe way