Trying to figure out how this code is detecting if js is enabled in the web browser or not. There is no any check or if or anything else. Message is displayed when there is class no-js that is simple. But where the actual checking is made?
<!DOCTYPE html>
<html lang="en" class="no-javascript">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.warning {
display: none;
}
.no-javascript .warning {
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="warning">Enable js</div>
<script>
var elDocument = document.documentElement;
elDocument.className = elDocument.className.replace(/(^|\s)no-javascript(\s|$)/, '$1');
</script>
</body>
</html>
What this code does is display the warning initially, then immediately tries to hide it with Javascript. If Javascript is disabled, the code does not run and it cannot remove the warning, therefore the user sees it.
Be aware that there also is the tag that renders only if JavaScript is not enabled, cf. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
Related
I'm new to coding in HTML, CSS, and JavaScript, so please forgive me if my code is messy and/or incorrect.
I'm trying to make a website that can help people who are feeling mentally down, and for the first page, I added an input box which asks for the user's name, which will then be read in the next page. For example, if I put "Henry", the next page should say "Hello, Henry!" To read the variable in the next page, I used sessionStorage and sessionStorage.getItem("inputVal"). But, for some reason, when I try to log the variable (inputVal) in the first page, the console gives an error that simply says "Uncaught" for a brief moment before clearing when loading to the next page. Then, when I try to log the inputVal on the next page, the console only prints "null". I have scoured numerous forms, but I could not find anything to fix my problem! Have I written the sessionStorage wrong, or is there something else I'm missing? Here is the code for my first file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Feel Happy</title>
</head>
<body>
<b class="welcometofeelhappy">Welcome to FeelHappy :)</b>
<input type="text", id="whatisyourname", placeholder="Please enter your name!", class="whatisyournameinput" required><br>
<form action="pages/landing.html">
<button class="startBtn", type="submit", id="btn1", onclick="getInputValue()"><h2 class="buttontext1">Let's Begin!</h2></button>
</form>
<script>
function getInputValue(){
var inputVal = document.getElementById("whatisyourname").value;
console.log(inputVal)
sessionStorage("inputVal", inputVal)
}
</script>
</body>
</html>
And the code to the second file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="getName()" type="button">Click Me!!</button>
<script>
function getName() {
var inputVal = sessionStorage.getItem("inputVal")
console.log(inputVal)
}
</script>
</body>
</html>
Note: For testing purposes, I put a button to print the code in the console.
sessionStorage("inputVal", inputVal) is not how you write things to the session store. sessionStorage itself is not a function, it's an object that provides methods, like setItem.
You need sessionStorage.setItem("inputVal", inputVal).
In terms of debugging, your browser's console can almost certainly be configured to persist logs after page transitions, which will allow you to see error messages even after you navigate away from the page where the error occurred.
I am trying to read the value of an input text field entered in the Arabic language using javascript.
But as you can see in the screenshot it's not fetching the text in the same way I typed.
The number '123' which is on the right side of the input field is jumping to the left side when I try to read the entered input field value using js code.
Please help me to solve this issue.
Below is the code that I am using:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html:lang(ar){
direction: rtl;
}
</style>
</head>
<body>
<input type="text" dir="rtl" name="" id="textbox">
</body>
</html>
Thanks in advance :)
If you output the Arabic RTL text in the console, it will be shown in the LRT direction. If you output the text in another Html field with RTL set for that field it will display correctly
Here is an example. Output the Arabic text into another field will be displayed correctly.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html:lang(ar){direction: rtl;}
</style>
</head>
<body>
<input type="text" id="inputText" oninput="outputIt()">
<div id="outputText"></div>
</body>
<script>
function outputIt() {
document.getElementById("outputText").innerHTML = document.getElementById("inputText").value;
}
</script>
</html>
I am trying to add CSS property inside the Air-Table iframe but CSS didn't reflect.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe class="airtable-embed" id="calender" src="https://airtable.com/embed/shriqTxajodBzOTYb?backgroundColor=teal&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#calender').on('load', function() {
$("iframe").contents().find("#embedBottomBarContainer").css("display", "none");
});
});
</script>
If I remember correctly, you can only affect the Style of the IFrame if it comes from the same Server as your Website because of the same-origin policy.
So that's probably the problem. You're trying to change the Style of a not same-origin IFrame
I am trying print my page automatically using jQuery.But problem is red dot circle appear.So how to remove them ?3
This is my html file look like
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
Hello From Other side
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
window.onload = function () {
window.print();
}
</script>
</body>
</html>
So i want to remove that red dot circle part like url name and title Name.
Please Try this from this link How to remove the URL from the printing page?
<style media="print">
#page {
size: auto;
margin: 0;
}
</style>
its a browser default behaviour. you should unchecked the header checkbox
when creating a basic html layout as shown below, i keep getting "[violation] avoiding using document write()" error. However when i remove the body tag, the error is gone.
Does anyone know why its happening and is there any alternative for me to use.
Thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Update:
The source tab on chrome developer console, is highlighting the line inside the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script id="bs_script">
//<![CDATA[ document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname)); //]]>
</script>
</body>
</html>
The script tag within the HTML is the issue.
Additionally: Browsersync inserts a document.write() script tag into any first tag, even if that first tag is commented out. So using a different live browser reload solved the issue