How to detect if browser JavaScript is off and display a notice - javascript

I need to check if browser JavaScript is off, then display a error div instead of the body, how can I do this?

You'll need to do it the other way around - so to speak - you'll have to output everything, and then hide/ remove the error div using Javascript.
It's called Progressive Enhancement.

<html class="no-js">
<head>
<style>
.error,
.no-js #container {
display: none;
}
.no-js .error {
display: block;
}
</style>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, '');
</script>
</head>
<body>
<div id="container">
rest of page
</div>
<div class="error">
sorry, no javascripty, no sitey!
</div>
</body>
</html>
Of course, this is usually a bad idea, but I hope you've already considered that.

in the body you can add :
<noscript>
Here the html to display when javascript is off
</noscript>

#roryf's solution is a good approach, although it is dependent on jQuery, and if the domloaded event fires a little late you can get a 'flash' of the no-js content.
The following will remove the html.no-js class before the body has rendered:
<!DOCTYPE html>
<html class="no-js">
<head>
<script>
if (document.documentElement) {
var cn = document.documentElement.className;
document.documentElement.className = cn.replace(/no-js/,'');
}
</script>
</head>

Related

Add CSS to Javascript source in HTML header?

I have an html which calls a Javascript. I cannot edit the source script, so would like to edit the CSS styling of some elements in the HTML header.
<head>
<script src="someJavascript.js"></script>
</head>
So basically I would need to translate the following Javascript line into html and add it to the script tags somehow.
document.querySelector('[title="MyTitle"]').style.display = "none"
Could somebody tell me if that is even possible? And if so, how? Thanks!
Edit:
I tried to implement the instructions, but it does not do what I want.
What am I doing wrong?
Maybe I should elaborate more. The html gets embeded as an iframe into another site. It loads a 3D model viewer and in the body the corresponding 3D file. I want to hide one of the buttons in the 3D viewer's interface.
<!DOCTYPE html>
<meta name="viewport" content="user-scalable=0"/>
<html>
<head>
<title></title>
<script src="https://viewer.marmoset.co/main/marmoset.js">
<style>
[title="Layer Views"] {
display: none;
}
</style>
</script>
</head>
<body>
<script>
marmoset.embed( 'My3DModel.mview', { width: 800, height: 600, autoStart: false, fullFrame: true, pagePreset: false } );
</script>
</body>
</html>
You can use CSS selectors.
<style>
[title="MyTitle"] {
display: none;
}
</style>
<div title="MyTitle">MyTitle</div>
<div title="SomethingElse">SomethingElse</div>

Removing/editing HTML tags from local file

I want to remove/edit several HTML tag in a file.
Minimal example: I have this input HTML file on my disk
<!DOCTYPE html>
<html clang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.remove-tag { color: #FF0000; }
.remove-div { color: #0000FF; }
</style>
</head>
<body>
<p>Hello world!</p>
<div class="remove-tag">
<p>I just want to remove the open/close div tags</p>
</div>
<div class="remove-div">
<p>I want the remove the div and all its content</p>
</div>
</body>
</html>
I want to process it so that I get this
<!DOCTYPE html>
<html clang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.remove-tag { color: #FF0000; }
.remove-div { color: #0000FF; }
</style>
</head>
<body>
<p>Hello world!</p>
<p>I just want to remove the open/close div tags</p>
</body>
</html>
What's the easiest/most straightforward way to do it in your opinion? I hope to be able to write some sort of script to locally run on a given file to get the output. Or have some software that does it given a list of rules to follow.
I'm quite confident with regex/sed/..., but using these tools is a big NO NO for playing with HTML tags (and can understand why).
I've read about javascript (getElementsByClassName(), ...). Made some preliminary steps with javascript, installing Node.js. I can't even open a document to retrieve the elements... Looks like I have to install/import jsdom. I'm kinda stuck...
Read about jQuery. Seen several commands examples, but I don't get how to run them on local files. In generl, I'm a completely noob about jQuery.
Read about HTML parsers. Python seems to have a HTML parser library that I can use to accomplish the task.
Also hoped for a HTML parser software; doesn't look like there is any.
Any other hints?
try this script:
<script>
var removeTag= document.getElementsByClassName('remove-tag');
for(var i=0; i<removeTag.length;i++){
var innerHTML = removeTag[i].innerHTML;
let div = document.createElement('div');
div.innerHTML = innerHTML;
insertAfter(div,removeTag[i]);
removeTag[i].remove();
}
var removeDiv= document.getElementsByClassName('remove-div');
for(var i=0; i<removeDiv.length;i++){
removeDiv[i].remove();
}
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
</script>

Chrome text-decoration line-through prevents click

I am programming a web app where clicking on a bit of text should toggle the line-through css style. This works on Firefox, but the click event seems not to fire in Chrome once the style has been applied.
HTML:
<script>
$(document).ready({
$(".liner").click(toggleStrikethrough);
});
<div class="liner">
Hello World
</div>
JS (note that I've used jQuery because that's what I'm using in the app, but a vanilla solution would be acceptable as well):
function toggleStrikethrough()
{
if($(this).css("text-decoration") != "line-through")
$(this).css("text-decoration","line-through");
else
$(this).css("text-decoration","");
}
JS Fiddle
In CSS3, text-decoration has multiple parts. In your particular case, the read $(this).css("text-decoration") returns line-through solid rgb(0, 0, 0).
Instead, try changing the if condition to $(this).css("text-decoration-line") to get only the line style part of the text decoration.
I tried to solve your problem using different way. I think it was succeeded. you can use below mention code to get same output that you want.
$('div').bind('click',function(){
$(this).toggleClass('liner');
});
.liner{
text-decoration:line-through;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Exzmple</title>
<style>
</style>
</head>
<body>
<div class="liner">Hello World</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I used bind , toggleClass methods for this. As a result js code was simple and it could run efficiently.

Add a class name to element immediately this element is loaded

I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#js-hidden').hide();
})
</script>
There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.
Can I hide that earlier? This solution is so bad for me, JS user can´t see this element.
PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)
$(document).ready makes it happen after full page loaded you can use
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<div id="js-hidden"></div>
<script>
$('#js-hidden').hide();
</script>
Simplest thing:
<style>
.js-hidden {
display: none;
}
</style>
<noscript>
<style>
.js-hidden {
display: block;
}
</style>
</noscript>
Since you cannot use onload event on div I guess the best solution is put your js right after that div...

jQuery: addClass to HTML5 DOM

I am having an issue today when adding a class to an HTML5 DOM object. Sorry if this is a newbie question. :P
Ex:
<!DOCTYPE html>
<html>
<head>
<title>stackoverflow example</title>
<style>
.centercontent {
width:100%;
max-width:1080px;
margin:0 auto;
}
</style>
</head>
<body>
<header>
<!-- All direct children of BODY should be centered on the page; however, children should not be added to .centercontent -->
<h1>Site Name</h1>
</header>
<section>
<p>Hello World</p>
</section>
<footer>
© no one 2012
</footer>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.j"></script>
<script>
$("body > *").addClass("centercontent");
</script>
</html>
I believe that it is my JS; however, I have never used addClass before. Thank you all very much for your time. :)
Have a good day!
write simply
body > * {
width:100%;
max-width:1080px;
margin:0 auto;
}
as a straight CSS rule in the head section: looking at your example jQuery seems not really necessary for this task.
This selector is also valid in the CSS block and it works fine (not on IE<=6).
You are not using a $(document).ready(function() {...}); with your jquery. Try this:
$(document).ready(function() {
$("body > *").addClass("centercontent");
});
Also you are missing an s at the end of your script reference
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.j"></script> // original
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> // fixed

Categories