How to remove unwanted content like url while print automatically in jquery - javascript

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

Related

How do you add a badge to a website's bookmark icon?

For example on chrome, the WhatsApp Web bookmark icons shows your current message count, Reddit has a red dot and even LinkedIn displays the icon with a blue dot on the top left corner when you have notifications. A point in the right direction on how to achieve this will be greatly appreciated.
It is possible to dynamically change the icon of a favorite by changing the href of favicon.
<!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>Dynamic favicon</title>
<link rel="icon" id="favicon" href="./icons/icon_without_dot.png" type="image/png" />
</head>
<body>
<h1>Dynamic favicon</h1>
<button onclick="toggleFavicon()">Change favicon</button>
<script>
const favicon = document.getElementById("favicon");
function toggleFavicon() {
if (favicon.getAttribute("href") == "./icons/icon_without_dot.png") {
favicon.setAttribute("href", "./icons/icon_with_dot.png");
}else{
favicon.setAttribute("href", "./icons/icon_without_dot.png")
}
}
</script>
</body>
</html>

How do I source files on a custom html tag?

I am trying to create my own computer language but can't get the src attribute to work. Is there a way to get the source code to "paste" to the inner text of the element?
<!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>
<h1 id="p"></h1>
<space-lang src="Testing.txt">
</space-lang>
</head>
<body>
<script src="space.js">
</script>
</body>
</html>

Unable to read the value of input text in arabic language in the same way I typed in Javascript

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>

What is wrong with my JavaScript DOM code to print a simple text?

I have to print "Hello, Mars", but something is wrong. I've tried to add paragraph.appendChild(text) too but it not works.
<!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>
<script>
const body = document.getElementById("body")
const paragraph = document.createElement("p")
const text = document.createTextNode("Hello, Mars")
body.appendChild(paragraph)
</script>
</body>
</html>
Two things here:
Firstly, you never add text to the created paragraph, which would be done by adding this:
paragraph.appendChild(text);
Secondly, using getElementById() you are selecting an item that would have id="body", not the <body> element on your page. You can get the body using document.body as follows:
const body = document.body;

Detecting js using class and document.documentElement

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

Categories