I thought this simple setup would work and use the alternate link to print test.pdf. But in the print preview I see the current page and not test.pdf???
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="alternate" media="print" href="http://localhost/mydomain.com/test/test.pdf">
<script>
window.print();
</script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
[edit]
the closest I got only seems to work in Chrome (I like to skip the print preview and auto print, but the --kiosk doesn't seem to play along with following code):
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function ($) {
function print(url)
{
var _this = this,
iframeId = 'iframeprint',
$iframe = $('iframe#iframeprint');
$iframe.attr('src', url);
$iframe.load(function () {
callPrint(iframeId);
});
}
//initiates print once content has been loaded into iframe
function callPrint(iframeId) {
var PDF = document.getElementById(iframeId);
PDF.focus();
PDF.contentWindow.print();
}
print('http://localhost/mydomain.com/tests/test.pdf');
});
</script>
</head>
<body onload="">
<div>TODO write content</div>
<iframe id="iframeprint" src=""></iframe>
</body>
</html>
You can't do this to a pdf file. But you can do this to an html file.
Something like this:
function print() {
var w = window.open('', 'width=400, height=400');
w.document.body.innerHTML = "HTML";
w.print();
}
<button onclick="print()">Print another file</button>
You can see it here: http://output.jsbin.com/kefoxo
The full code: (Tested on Google Chrome)
http://jsbin.com/kefoxo/edit?html,js
Related
I've been learning HTML, CSS & javascript these last few weeks. All the previous coding experience I've had is with C++ from my CS courses so I'm new to front end development.
I wrote some javascript in the HTML index page and the functions work properly. However, when I add it into an external .js file, the program stops working.
Here's the index.html 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="/style.css"/>
<title> Progress Bar </title>
</head>
<body>
<audio id="music" src="trax/coldWorld.wav" controls></audio>
<div class="progress_bar" id="progress_bar">
<div class="progressed" id="progressed"></div>
</div>
</body>
<script src="/audio.js"></script>
</html>
The .js file:
var music = document.getElementById('music');
var progressed = document.getElementById('progressed');
var progress_bar = document.getElementById('progress_bar');
music.ontimeupdate = function(e) {
progressed.style.width = Math.floor(music.currentTime *100 / music.duration) + "%";
}
progress_bar.onclick = function(e) {
music.currentTime = ((e.offsetX / progress_bar.offsetWidth) * music.duration);
}
You can try moving the script tag inside the body tag and correcting the relative path
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<script src="./audio.js"></script>
</body>
</html>
console.log('hello test');
//alert("yoyo");
//Variables
//var b = '';
//change the element of html
document.getElementById('someText').innnerHTML = 'Hey there';
I learn the basic javascript tutorial from YouTube Clever Programmer but it seems like my javascript cannot work although I follow 100% exactly the same code as his type.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="someText"></p>
<script src="home.js">
//alert('test');
</script>
</body>
</html>
Typo in innerHTML. document.getElementById('someText').innnerHTML needs to be document.getElementById('someText').innerHTML = 'Hey there';
I have a site that should first load external js codes before it executes code in the dom but i wont work. Everytime my external codes load after the js in the body tag what caused problems like undefined classes and variables
index.html
<!DOCTYPE html>
<html lang="en">
<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>Site</title>
<link rel="stylesheet" href="./style.css">
<script src="./project/load.js"></script>
</head>
<body>
<h1>project</h1>
<div id="project"></div>
<script src="./script.js"></script>
</body>
</html>
./project/load.js
window.onload = function() {
var links = ["./project/script1.js", "./project/script2.js", "./project/script3.js"];
for(var link of links) {
var script = document.createElement("script");
script.src = link + "?0";
script.setAttribute("onerror", "reload(this)");
document.head.append(script);
}
}
I tried also with 'addEventListener('DOMContentLoaded', function() {...});' but it did work either.
I hope you can help me.
EDIT 1:
request order
./project/load.js
./script.js
./project/script1.js
./project/script2.js
./project/script3.js
Load your javascript with defer attribute. Replace your HTML with below. The "defer" attribute allows the javascript is run only after the page loading is complete. Meaning the DOM is available
<!DOCTYPE html>
<html lang="en">
<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>Site</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>project</h1>
<div id="project"></div>
<script src="./project/load.js" defer></script>
<script src="./script.js" defer></script>
</body>
</html>
References and further read
https://www.sitepoint.com/introduction-jquery-deferred-objects/
https://www.w3schools.com/tags/att_script_defer.asp
Here is what i've done. Please look at this below
HTML
<!DOCTYPE html>
<html lang="en">
<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>Site</title>
</head>
<body>
<h1>project</h1>
<div id="project"></div>
<script src="load.js" defer></script>
<script src="script.js" defer></script>
</body>
</html>
Javascript - load.js
(function(){
var dom = document.getElementById("project");
if( dom !== null ){
dom.innerHTML = "<p>Iam load.js " + new Date().toString() + "</p>";
console.log("Iam load.js " + new Date().toString());
}
})();
Javascript - script.js
(function(){
var dom = document.getElementById("project");
if( dom !== null ){
dom.innerHTML = dom.innerHTML + "<p>Iam script.js " + new Date().toString() + "</p>";
console.log("Iam script.js " + new Date().toString());
}
})();
Output
You can see that the order in which i've added the script loads first.
Here is the code I am attempting to use and embed in a Google Sites page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Please follow the link below</title>
<script>
var urls = [
"http://www.kittenwar.com/",
'http://heeeeeeeey.com/',
'http://eelslap.com/',
'http://www.staggeringbeauty.com/',
'http://www.omfgdogs.com/',
'http://burymewithmymoney.com/',
'http://www.fallingfalling.com/',
'http://ducksarethebest.com/',
'http://www.republiquedesmangues.fr/',
'http://www.trypap.com/',
];
function goSomewhere() {
var url = urls[Math.floor(Math.random()*urls.length)];
window.location = url; // redirect
}
</script>
</head>
<body>
</body>
</html>
How do I make this work so that a button will appear in my Google Sites page that will randomly assign you to one of the listed array of links?
By adding a simple button and calling the javascript function. And you need to do some adjustments in your google sites account. You can refer this link to do the changes accordingly in your account.
http://www.thelandscapeoflearning.com/2014/05/did-you-know-google-sites-no-longer.html
AND
https://help.mofuse.com/hc/en-us/articles/226313408-Redirect-Setup-Google-Sites
var urls = [
"http://www.kittenwar.com/",
'http://heeeeeeeey.com/',
'http://eelslap.com/',
'http://www.staggeringbeauty.com/',
'http://www.omfgdogs.com/',
'http://burymewithmymoney.com/',
'http://www.fallingfalling.com/',
'http://ducksarethebest.com/',
'http://www.republiquedesmangues.fr/',
'http://www.trypap.com/',
];
function goSomewhere() {
var url = urls[Math.floor(Math.random() * urls.length)];
window.location = url; // redirect
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Please follow the link below</title>
</head>
<body>
<button onclick="goSomewhere();">Redirect</button>
</body>
</html>
In body
<button onclick="goSomewhere();">Click me</button>
$("#video").attr('src', idea(ads));
$(".heading").text(idea(ads));
var ads = ["https://youtu.be/nSZtxXNjmLA", "https://www.youtube.com/watch?v=D2pOkm4opVU"];
function idea(el) {
return el[Math.floor(Math.random() * el.length)];
}
So I am using the function idea to randomise it. The iframe has an id of video.
1 - Move var ads to the first line
2 - Link jquery in yout html https://learn.jquery.com/about-jquery/how-jquery-works/
<script src="https://code.jquery.com/jquery-git.js"></script>
var ads = [
"youtu.be/nSZtxXNjmLA",
"youtube.com/watch?v=D2pOkm4opVU",
"youtu.be/WElPhX5Pb6I",
"youtu.be/78mNZeDaMtk"
];
$("#video").attr('src', idea(ads));
$(".heading").text(idea(ads));
function idea(el) {
return el[Math.floor(Math.random() * el.length)];
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Demo</title>
</head>
<body>
<h1 class="heading"></h1>
<video src=""></video>
<script src="https://code.jquery.com/jquery-git.js"></script>
</body>
</html>