I'm trying to avoid adding online styling when JS is being disabled.
For example, I'd like to hide an element in the body when JS is disabled, but i'd like to do it from external CSS only.
I'd like to avoid adding style like below
<noscript>
<style>
...some style
</style>
<p class="no-js">You need Javascript enabled to view all of the content on this page.</p>
</noscript>
<body>
<div>element to hide when js disabled</div>
</body>
Is there an alternative to this?
Thanks!
" I'd like to hide an element in the body when JS is disabled "
You can create a class with display:none, assign it to all elements you want to hide if javascript is disabled, and through javascript remove this class from these elements, if javascript is disabled, then this class will always apply and all elements with this class are not displayed
JS Fiddle
var secrets = document.querySelectorAll('.secret');
for (var i in secrets) {
secrets[i].classList.remove('secret');
}
.secret {
display: none;
}
Try this code:
<noscript>
<style>
#foo {
display:none;
}
</style>
</noscript>
You should use <noscript> tag, for hide an element, in <style> tag make it display:none. there is no way to this with standalone css! but you can do this with javascript or etc, look other answer.
<noscript>
<style type="text/css">
.divtohide {display:none;}
</style>
<div class="divtohide">
Javascript is disabled!
</div>
</noscript>
Alternatively, just use Javascript to hide the div that tells users that they need js enabled (if Javascript is disabled, obviously it cannot hide the div, and it will be shown).
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('nojs').style.display = "none";
});
</script>
Related
My webpage contains a DIV. If Javascript is enabled, I want the DIV to be invisible (display: none;) when the page loads. If JS is disabled, I want it to be visible (display: block;).
I can do:
document.write('<div style="display:none;">...</div>');
or
document.getElementById('foo').style.display = 'none';
With the first code there won't be a DIV if JS is disabled. With the second, the DIV will be visible when the page loads and disappear when the JS is executed.
I'm too stupid to solve this.
Can I put JavaScript inside the <div>-tag to write only the style? Certainly not like this:
<div <script>document.write('style="display:none;"');</script>>
Maybe something like:
<div onLoad="document.write('<div style="display:none;">...</div>');">
Does someone have an idea?
One problem with displaying an element unless JS hides it is that, even with JS on, the element is likely to display until the JS kicks in. So it's often better to have some JS at the top of the file that adds a class to the root element straight away, to get in before the CSS loads. Here's a simple example (in my noob JS):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
(function() {
var root = document.querySelector('html');
root.className = "js";
}());
</script>
<style media="all">
div {width: 500px; height: 200px; background: blue;}
.js div {display: none;}
</style>
</head>
<body>
<div></div>
</body>
</html>
This is much better than using oldfashioned <noscript> and document.write() etc.
EDIT: I should just note that an easier way to target the html element is with document.documentElement. Thus, the code above could be written as—
<script>
(function() {
document.documentElement.className = "js";
}());
</script>
Why don't you just put the <div> in a <noscript>?
<noscript><div style="display:none;">...</div></noscript>
Now you don't even have to use Javascript to deal with it.
I've used the <noscript> tag to hide certain elements when javascript is not enabled; however, it doesn't seem to work.
My document declaration:
<!DOCTYPE html>
At the end of my file I typed the following:
<noscript>
<style type="text/css" scoped> #status {display:none;} </style>
</noscript>
</body>
</html>
But the #status div is still present even after disabling JS. Am I missing something here?
Remove the scoped attribute of the style tag. It's making your CSS apply strictly to the <noscript> tag.
If this attribute is present, then style applies only to its parent element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#Attributes
A simpler to manage solution would be to make the element hidden by default and use this :
<script>document.getElementById('status').style.display='block';</script>
(or an equivalent class based solution)
Try removing the scope of the style, like the code below.
<noscript>
<style type="text/css"> #status {display:none;} </style>
</noscript>
#dystroy's answer is the right way of doing it, because:
<style> elements can't be placed on <body> (except if they have scoped attribute)
<noscript> elements can't be placed on head.
But if you don't want a delay, you can use the following in <head>:
<style id="noScriptSheet" type="text/css">
.onlyScript{ display:none;}
</style>
<script type="text/javascript">
function kill(el){
return el.parentNode.removeChild(el);
}
kill(document.getElementById('noScriptSheet'));
</script>
And add a class to your element:
<div class="onlyScript">Hello world!</div>
Demo: http://jsfiddle.net/TQLfu/
I am adding this answer because this seems to be the most popular SO-question regarding the noscript tag.
It doesn't seem to fire at all with "Sybu JavaScript Blocker". So in case you are testing with that JavaScript blocker try using another JavaScript blocker. When I used "Toggle Javascript" the noscript tag fired without problem. I did not yet discover a way to detect that "Sybu JavaScript Blocker" is being used.
My Testing environment:
Sybu JavaScript Blocker, Version 2.93
Toggle JavaScript, Version 1.3
Chrome, Version 85.0.4183.83
I have this little bit of code for a fade in effect but for some reason firefox is not picking up the which I need because the fade it doesn't work for firefox. What am I missing to get this to work?
<noscript>
</style>
<style type="text/css">
body {display:inherit !important;} /*if they haven't got javascript we need to show the body
</style>
</noscript>
<script type="text/javascript">
$(document).ready(function() { $("body").fadeIn(1500);});
</script>
the css
body {
background-color:#000;
overflow-x:hidden;
-webkit-text-size-adjust:100%;
display:none;}
You can't have a <noscript> tag anywhere but the <body> section of your document, and you can't have a <style> tag anywhere but the <head> section of your document (see this post).
An alternative way to do this would be to make the body tag default to display: visible and set the display property using JavaScript like so:
<body>
<script type="text/javascript">document.body.style.display = "none";</script>
...
</body>
Then get rid of your <noscript> tag completely and remove the display:none; line from your CSS declaration.
The advantage of this is that if the browser doesn't have JavaScript enabled, your <body> tag will be visible, regardless of how the browser handles the <noscript> tag.
I have a AJAX/Javascript intensive webpage and is trying to create a static version of the site using <noscript> tags.
Problem: The elements within the <noscript> tags do not show up, but instead what's on the screen is what's left of the (non-functioning) interface for the original AJAX/JS site. It appears that the contents of <noscript> are being hidden under the original interface's divs.
How can I hide everything outside of the <noscript> section, and only show the contents of <noscript>?
HTML Structure
<body>
<div id="user_interface"></div>
<div id="javascript_portion"></div>
<noscript>
<p>Some static content</p>
</noscript>
</body>
Can be done in two steps:
1) set css for #user_interface and #javascript_portion to display:none
2) set display to block for same selectors somewhere in JS
You could add display:none using CSS to your javascript_portion div. And then remove it using Javascript. That way the Javascript part will only show if javascript is working.
How about writing the other content with Javascript, like:
<body>
<script type="text/javascript">
document.write('<div id="user_interface"></div>');
document.write('<div id="javascript_portion"></div>');
</script>
<noscript>
<p>Some static content</p>
</noscript>
</body>
The noscript tag is like an else section; as in if you have script, do xxx else do the stuff in the noscript tag.
Try something like this (I use jquery below):
<body>
<div id="withScriptBody" style="display:none">
... all stuff that requires java script here.
</div>
<noscript>
... all noscript stuff here
</noscript>
<script>
$(document).ready(function()
{
$("#withScriptBody").css("display", "block");
});
</script>
</body>
<html>
<head>
<script type="text/javascript">
// jquery and javascript functions
</script>
</head>
<body>
<fancy-jquery-ajaxy-html-section>
</fancy-jquery-ajaxy-html-section>
<noscript>
sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
</noscript>
</body>
</html>
I tried surrounding <fancy-jquery-ajaxy-html> with a <script type="text/javascript"></script> but then nothing from that section is displayed even for users with javascript enabled.
But what I want to do is hide that <fancy-jquery-ajax-html> section only if the user doesn't have javascript enabled.
It contains content that is useless to someone without javascript turned on, so it shouldn't be shown at all.
A user with javascript disabled should only see a message saying that the page can't be viewed without javascript.
Is there a way do that?
The easiest way is to hide the section with CSS (e.g. display:none), then show it through Javascript.
EDIT: just a little example
<div>Everyone sees this div</div>
<div id="mydiv" class="hidden">You see this div only with JS enabled</div>
<script type="text/javascript">
$("#mydiv").removeClass("hidden");
</script>
<noscript>
<div>You will see this div only with JS disabled</div>
</noscript>
And, of course, in your CSS:
.hidden
{
display: none;
}
You could hide your fancy section using css:
<div id="fancy_jquery_ajax" style="display: none;">
</div>
then you could use use JavaScript to display the element:
$("#fancy_jquery_ajax").css("display", "block");
I hope that's right, I actually don't use jQuery that much. :S
Another approach would be to generate that HTML using JavaScript, so it can't appear unless JavaScript is running.
What I did is to have my javascript hide the nojsdiv and show maindiv. This way, if you don't have javascript the message shows up.
<body onload="allowlogin()">
<div id="maindiv" style="visibility: hidden;">
...
</div>
<div id="nojsdiv">
The training system requires javascript to be enabled.
</div>
</body>
I prefer to add a class of .js to html tags as soon as jQuery has loaded. This allows my to write css rules that apply only when the user has javascript enabled/disabled. This keeps your show and hide code out of our JS and lets CSS do its job and style the page
Here's how I would approach your problem:
<html>
<head>
<style type="text/css">
.js #fancy_jquery_ajax {display: none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js');
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready
});
</script>
</head>
<body>
<div id = "fancy_jquery_ajax"></div>
<noscript><!-- stuff to say if use had javascript disabled --></noscript>
</body>
</html>
It's important to note that we want to add the class of .js as soon as jQuery has loaded and not add it in our document.ready handler. Otherwise we'd be back to square one.