I'm using the following javascript to print a page then I want to redirect after either canceling or accepting the print.
<script type="text/javascript">
window.print();
window.location.replace("URL");
</script>
Everything works but when I add the window.location it adds a full blank page before the pages I'm printing.
you need to add a property in CSS #page{margin:0}
you can try this code :
<!DOCTYPE html>
<html>
<head>
<title>tp</title>
<style type="text/css">
#page{
margin: 0mm;
}
*{
padding: 0;
margin: 0;
background: red;
}
</style>
</head>
<body>
<p>test</p>
<script type="text/javascript">
window.print();
window.location.replace("http://www.google.com");
</script></body>
</html>
Although I didn't solve the problem, I fixed it by having the page open in a new tab so I can avoid a redirect altogether.
Related
I am trying to pass a circle made with CSS from one HTML page to another. First the circle is green. After clicking a button the circle becomes red. I want the same green circle of the other html page to becomes red like in the first page.
Here is the code of the first HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<style>
#first{
height:20px;width:20px;
border-radius:50%;
border-width: 5px;
background-color: green;
}
</style>
<script>
function passvalues(){
const first=document.getElementById("first");
localStorage.setItem("firstvalues",first);
return false;
}
</script>
</head>
<body>
<div id="first"></div>
<input type="button" value="click here" onclick="doSomeThing()">
<script>
function doSomeThing(){
document.getElementById("first").style.backgroundColor='red';
}
</script>
<form action="second-page.html">
<input type="submit" value="Click" onclick="passvalues()"/>
</form>
</body>
That's the code of the second HTML page (Second-page.html):
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<style>
#first{
height:20px;width:20px;
border-radius:50%;
border-width: 5px;
background-color: green;
}
</style>
</head>
<body>
<div id="first"></div>
<span id="first"></span>
<script>
document.getElementById("first").innerHTML=localStorage.getItem("firstvalues");
</script>
</body>
</html>
When I run this code I get on the second page a green circle and [object HTMLDivElement] inside of it. I think something is wrong with the function innerHTML.
You can avoid to use JavaScript including one single class in your index.css that use :active to change the color of the circle when clicked.
That's a simple example that you can arrange to your needs:
<html>
<body>
<button class="btn">Click me</button>
<style>
.btn{
background:black;
color:white;
border:0;
margin:1rem;
}
.btn:active{
background:red;
}
</style>
</body>
</html>
One good idea is to activate the styling after a button is clicked with JavaScript so you don't have to pass the function to the other page, instead you can activate this class with onother button placed on second page.
In this example I've changed the background of the button,
instead of changing button's style you can apply the class directly to the circle.
I hope this answer is usefull for you, if not, please tell me I would give you mnore help!
Your best.
What you are trying to store here is the div as an object.
Instead try storing the Html itself of that div. Use:
localStorage.setItem("firstvalues", first.outerHTML)
Note:
Ids should be unique to the page. When you put the content of the first page's #first in the second page's #first, you create two elements of the same id. Have different ids in both to avoid conflicts.
You are submitting a form to another page. So why not use the standard method of passing data in a GET parameter?
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>
I am trying to identify elements by their tag name, but have trouble executing the toggle property using javascript. Perhaps I am not using toggle() correctly, please explain what I am doing wrong.
<!DOCTYPE html>
<html>
<head>
<style>
h1{
position: relative;
float:left
}
</style>
<script>
var x=document.getElementsByTagName("button");
var hello=document.getElementsByTagName("h1");
x.onclick=function(){
hello.toggle(
function(){hello.style.visibility:visible};
function(){hello.style.visibility:hidden};
)
}
</script>
</head>
<body>
<h1>hello</h1>
<button>Toggle between hide() and show()</button>
</body>
</html>
toggle() is a jquery function that shows hidden elements and vice versa.
To use it you need to add jquery in your html
e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
and then with jquery you can add an event listener to the button:
$('button').click(function() {
$('h1').toggle();
});
I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/
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>