This question already has answers here:
Use CSS to hide contents on print
(5 answers)
Closed 4 years ago.
I know this question has an Already been asked but I am using Different and Short Approach.
I have print button for printing Invoice in my web page
<button class="print" onclick="window.print()">Print</button>
The Problem is it prints the whole document including print button
is their any way to exclude print button from printing in document
Checkout this Link : https://www.thoughtco.com/how-to-add-a-print-button-4072006
I just have to add
<link rel="stylesheet" type="text/css" media="print" href="print.css">
in my head part of the page
print.css is as below
body {visibility:hidden;}
.print {visibility:visible;}
Also we had to assign class="print" to to html element which we want to print
Thanks to #Clay
change onclick function like this
<button class="print" onclick="this.style.visibility='hidden';window.print();">Print</button>
Related
This question already has answers here:
How do I change the background color with JavaScript?
(22 answers)
Closed 2 years ago.
I'm trying to make a string in JavaScript that can be changed through a button later on. I want this string to contain colors for my index.html to use to change the background. How do I call the variable from JavaScript into HTML while still keeping the ability to change the variable at anytime and having the webpage update to display the changes. (sorry if this is confusing)
example:
script.js
var color = "";
index.html
<!DOCTYPE html>
<html>
<head>
<title>Type</title>
</head>
<body style="background-color:"color";">
<h1><center>Type</center></h1>
<p><center>This is a test sentence</center></p>
</body>
<script src="script.js"></script>
</html>
You could try something like this:
/* This is script.js */
var color = "black";
body {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Type</title>
</head>
<body onload="document.body.style.backgroundColor = color;">
<h1>
<center>Type</center>
</h1>
<p>
<center>This is a test sentence</center>
</p>
</body>
<script src="script.js"></script>
</html>
This sets the color inline, which is (sort of?) what I believe you wanted, except you just use the onload attribute instead of using the style attribute.
You want to bind the background-color CSS property to the JavaScript color variable, but there's no direct way to do that. Instead of updating a JavaScript variable, just update the background-color of the body element.
document.querySelector('body').style.backgroundColor = 'red';
There are a lot of JavaScript frameworks that support binding JavaScript data to DOM elements, but at the end of the day, they're all just copying values from JavaScript into the DOM, the same as we're doing here.
If you really want to have a JavaScript variable, you can have it, then call some function like updateBackgroundColor, that copies the color from the variable into the DOM.
This question already has answers here:
Disable cache for some images
(13 answers)
Closed 5 years ago.
Here's the situation: I need to change the background image of a div in a page at a given time. The following code does exactly that, and also fades the pictures in and out. Problem is, I need to change the images in the directory with frequency. The names never change, but the pictures do. How can I force the browser to refresh content? It won't refresh images even if I manually press f5.
<html>
<head>
<meta charset="UTF-8">
<title>Esquerdo - Monitores BI</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('img').hide();
function test() {
$("#container img").first().appendTo('#container').fadeOut(2000);
$("#container img").first().fadeIn(2000);
setTimeout(test, 7000);
}
test();
});
</script>
<link rel="stylesheet" type="text/css" href="slidestyle2.css">
</head>
<body>
<div id="container">
<img src="vehicles/kicks.jpg" />
<img src="vehicles/gtr.jpg" />
<img src="vehicles/sentra.jpg" />
</div>
</body>
I've searched a lot for a solution, but since I know nothing about jquery, javascript etc and all solutions I've found worked for very different codes, I couldn't adapt anything to my needs. All I know is that the browser keeps the original content of a file with a certain name, so you need to change the name of the file inside the code, make it be always unique. But how can I do that if I'm writing the file name in html?
I'd really appreciate any help.
Add a random value at the end of the URL :
$("#container img").first().attr( "src", "vehicles/kicks.jpg?" + Math.random() )
That'll force the browser to refetch a fresh copy of the image.
This question already has answers here:
Changing the href of a link tag using JavaScript
(2 answers)
Closed 7 years ago.
I have the following HEAD tag
<head>
<title>Test</title>
<link id="css1" href="demo.css" rel="stylesheet" type="text/css">
</head>
What I want to be able to in Javascript is somehow
document.head.children["css1"].href = "demo2.css";
Any ideas, I would like to be able to the change by id as there might be more tags in the head
In a script tag anywhere after that link, you can indeed update its href:
document.getElementById("css1").href = "demo2.css";
Normally, it's best to put your script tags at the end, just before the closing </body> tag. In your case, since you're changing CSS, to avoid having the previous styling "flashing" at the user, you might want it higher up so it's handled sooner, though.
This page shows you how to do that:
DEMO
javascript
function swapStyleSheet(sheet) {
document.getElementById('pagestyle').setAttribute('href', sheet);
}
html
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<button onclick="swapStyleSheet('1.css')">1 Style Sheet</button>
<button onclick="swapStyleSheet('2.css')">2 Style Sheet</button>
<button onclick="swapStyleSheet('2.css')">3 Style Sheet</button>
This question already has answers here:
JavaScript: Inline Script with SRC Attribute?
(3 answers)
Closed 8 years ago.
When I launch this in chrome, nothing appears on the page.
<!DOCTYPE html>
<head><title>test 4000</title><head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
document.writeln("test")
</script>
</body>
</html>
you are inserting code in a script tag that you are also using to load an external script (jQuery). you should either do the one or the other.
<script>
document.writeln("test");
</script>
if you want both do:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
document.writeln("test");
</script>
the reference states:
If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.
you do not need to include jQuery to use document.writeln()
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
If width of the device visiting my site is <320 I want a <h3> to be removed. This is what I've tried with:
HTML:
<head>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<h3 id="title">Title</h3>
</body>
JavaScript:
if (document.documentElement.clientWidth <= 320) {
document.write("Testing");
var h3 = document.getElementById("title");
h3.parentNode.removeChild(h3);
}
The "testing" label is printed on the screen but the <h3>is still there. What's wrong?
At the time the script is executed, the h3 element has not been parsed, so it doesn't exist in the DOM.
Move the part of the script that removes it to after the h3 in the HTML.
Better yet, forget about using JavaScript and use media queries with h3 { display: none; } instead.