There is a link that opens a random image from unsplash. Here it is: https://source.unsplash.com/random/1920x1080
I intend to open ten tabs with random images. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-7">
<style>
body{margin:0px;color:#252430;background-color:#fff}
p{margin-top: 10em; font-size: 2em;}
</style>
<script>
function openitall(){
var i;
for(i=1;i<=10;i++){
window.open("https://source.unsplash.com/random/1920x1080","_blank");
}
}
</script>
</head>
<body onload="openitall()">
<p align=center>I am a page opening ten random images in new tabs.</p>
</body>
</html>
But that way I get ten same images. So I am thinking of a delay:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-7">
<style>
body{margin:0px;color:#252430;background-color:#fff}
p{margin-top: 10em; font-size: 2em;}
</style>
<script>
function openitall(){
setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),3000);
setTimeout(window.open("https://source.unsplash.com/random/1920x1080","_blank"),6000);
setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),3000);
setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),6000);
setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),9000);
setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),12000);
setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),15000);
setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),18000);
setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),21000);
setTimeout(window.open("https://source.unsplash.com/random/1920x1080", "_blank"),24000);
}
</script>
</head>
<body onload="openitall()">
<p align=center>I am a page opening ten random images in new tabs.</p>
</body>
</html>
But that doesn't help either. All the tabs are immediately opened without any delay. Could you please help?
EDIT: posting this:
Here it is without the parenthesis:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-7">
<style>
body{margin:0px;color:#252430;background-color:#fff}
p{margin-top: 10em; font-size: 2em;}
</style>
<script>
function myOpen(){
window.open("https://source.unsplash.com/random/1920x1080", "_blank");
}
function openitall(){
for(var i=1;i<=10;i++){
setTimeout(myOpen,5000);
}
}
</script>
</head>
<body onload="openitall()">
<p align=center>I am a page opening ten random images in new tabs.</p>
</body>
</html>
And it still does not work..
please try like this code:
function openitall(){
var counter = 0;
var myTimer = setTimeout(function(){
if(counter == 5){
clearTimeout(myTimer);
}else{
window.open("https://source.unsplash.com/random/1920x1080","_blank");
counter++;
}
}, 5000);
}
Or you need to adjust setTimeout code like below:
setTimeout(function(){window.open("https://source.unsplash.com/random/1920x1080", "_blank")},3000);
Related
When I press start button the background color of browser window should change . First it should turn to red for 30 seconds then to yellow for 5 seconds and then to green for 30 seconds.It should happen atleast once.
//Below is HTML file :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Traffic Light</h1>
<div>
<button id="btn1">Start</button>
</div>
</body>
<script src="TrafficLightJS.js"></script>
</body>
</html>
//Below is Javascript file:
const colors=["red","yellow","green"];
const btn=document.getElementById("btn");
//const color=document.querySelector(".color");
btn.addEventListener("click",function()){
setInterval(function()) {
document.body.style.background=colors[0];
},30000);
setInterval(function()) {
document.body.style.background=colors[1];
},5000);
setInterval((function()) {
document.body.style.background=colors[2];
},30000);
}
//CSS File is below:
.red
{
background-color:red;
}
.yellow
{
background-color:yellow;
}
.green
{
background-color:green;
}
I'm Tring to get a user to chose with 2 buttons, which site will be presented in iframe tag.
Option1.html does work as default, but Option1.html & Option2.html do not work with user button.
When Clicking the buttons, I Get the default browser error "Can’t reach this page".
Please Take into account, that I a beginner with HTML and JS.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "Option1.htm";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "Option2.htm";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
Ok first make a folder and put this code in that and make another html document named same as given in your code...
Or see this
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "index.html";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "index2.html";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
This will be the main page...
And this will be inbdex.html. When user clicks option1 then this will be shown...
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Stopwatch</title>
</head>
<body>
<div>Seconds: <span id="time">0</span></div>
<input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
<input type="button" id="stopTimer" value="Stop Timer" onclick="stop();"><br/>
<script>
var timeElapsed = 0;
var timerID = -1;
function tick() {
timeElapsed++
document.getElementById("time").innerHTML = timeElapsed;
}
function start() {
if(timerID == -1){
timerID = setInterval(tick, 1000);
}
}
function stop() {
if(timerID != -1){
clearInterval(timerID)
timerID = -1
}
}
function reset() {
stop();
timeElapsed = -1;
tick()
}
</script>
</body>
</html>
And the below thing will be index2.html. So when user clicks option2 then this will be shown!
<html>
this is other page
</html>
I want to open a new window/tab, put some HTML in the document, then bring up the browser print dialog to print that new window. I am using the following to accomplish this:
var w = window.open();
w.document.write(html);
w.document.close();
w.focus();
w.print();
w.close();
HTML:
<body>
<img src='url1' />
<img src='url2' />
<img src='urln' />
</body>
This all works, the window pops up, and the print dialog is shown for the new page and prints all images fine. However, for some reason, some of images are printing, and instead the image alt message is printed.
There are lots of images, and they are dynamically generated on the server side (which takes about 1 second to load each).
What needs to be done to make sure all images are loaded and printed?
This happens in IE and Firefox that I've confirmed. I appreciate any help.
Try to use a JS library that detect when images have been loaded.
You can use it like this:
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
imagesLoaded(document.body, function() {
window.print();
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<style type="text/css">
body, div, image{
text-align: center;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
var c = $("<canvas />");
c.get(0).width = $(this).get(0).naturalWidth;
c.get(0).height = $(this).get(0).naturalHeight;
var cxt = c.get(0).getContext("2d");
cxt.drawImage($(this).get(0), 0, 0);
var base64Code = c.get(0).toDataURL("image/png");
c.remove();
$("body").append($("<div/>").append($("<image/>").attr("src", base64Code)));
if($("body").find("image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<style type="text/css">
body, div, v\:image{
text-align: center;
margin: 0px;
padding: 0px;
}
div{
page-break-after:always;
}
v\:image{
behavior: url(#default#VML);
display: block;
width: 1078px;
height: 1527px;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
$("body").append($("<div/>").append($("<v\:image/>").attr("src", $(this).attr("src"))));
if($("body").find("v\\:image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>
I'm messing around with JavaScript and I want to have a coloured square with 3 links and depending on the link I click, the square will change colours. I can't get it to work and I'm not sure where I went wrong..
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
switch.js
var switch = (function() {
var red = document.body.getElementById('red');
var square = document.body.getElementById('square');
red.onclick = function() {
square.src = 'img/red.png';
}
})();
You're running your code before the elements exist.
Move the <script> element to the bottom of the <body> (so that it runs after they exist), or run the code in the load event.
You have two issues.
First you are using a variable called switch, that is a no no. Switch is a reserved word because it is a switch statement. Rename it.
var xswitch = (function() {
Second, It is because you are runnnig the code before the element exists on the page. It needs to be executed onload, document dom loaded [ready], or the script needs to be added at the bottom of the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
<script src="switch.js" type='text/javascript'></script>
</body>
</html>
Make the following changes in order to ensure that the DOM has loaded.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
<script type="text/javascript">
window.onload = function () {
switchFn();
};
</script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
JavaScript (switch.js)
var switchFn = function () {
var red = document.getElementById('red');
var square = document.getElementById('square');
red.onclick = function () {
square.src = 'img/red.png';
}
};
If I have some hidden element on a page, that contains some content, how can I create a link and when user clicks it, browser would open a new window and show the content (only the content, for example some json data)?
ps. I know that's probably bad idea to have some hidden content on the page. It's better to put an action link that will get the content from the server.. But it involves many other headaches and it wasn't me who created the page, so please just let me know if there's a comparatively easy solution...
Please use http://okonet.ru/projects/modalbox/index.html with inline content setting
You could pass the (URL encoded) contents of the hidden element as an argument in the URL when opening the second page. That argument could then be (unencoded and) inserted into the body of the second page when it loads.
The following example works locally on OS X. On other operating systems, the example may need to be placed on an actual web server before it will work:
page1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 1</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function openwindow(){
window.open("page2.html?html="+escape($("#myDiv").html()));
}
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
Click Me!
<div class="hidden" id="myDiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png">
<p>See the HTML5 specification</p>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery.extend({
// from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
</script>
<script>
$(document).ready(function(){
$(document.body).html(unescape(jQuery.parseQuerystring().html));
});
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<!-- this will be replaced -->
</body>
</html>