I am using the following to create an image popup on site load -
<script type="text/javascript">
function showPopup()
{
var div = document.createElement('div');
div.className += 'popup';
div.innerHTML = "<img src='startbutton.png' width='400' height='293' >"
document.body.appendChild(div);
}
window.onload = showPopup;
And here is the CSS
<style type="text/css">
.popup{
position:absolute;
width: 0px;
height: 0px;
left:40%;
top:30%;
}
How can I modify this so that the image goes away when clicked?
Is it possible to have the rest of the page "fade out" till the image is clicked?
Similar to a modal dialog box.
function showPopup() {
var div = document.createElement('div');
var cover = document.createElement('div');
var image = document.createElement('img');
image.src = 'startbutton.png';
image.width = 400;
image.height = 293;
cover.style.position = 'fixed';
cover.style.background = 'rgba(0,0,0,0.5)';
cover.style.height = '100%';
cover.style.width = '100%';
cover.style.top = '0';
cover.style.left = '0';
div.className = 'popup';
div.style.position = 'fixed';
div.style.top = '50%';
div.style.left = '50%';
div.style.margin = '-200px 0 0 -146px';
div.appendChild(image);
image.onclick = function() {
div.parentNode.removeChild(div);
cover.parentNode.removeChild(cover);
}
document.body.appendChild(cover);
document.body.appendChild(div);
}
window.onload = showPopup;
FIDDLE
Add an Action Listener to the DOM element
<!DOCTYPE html>
<html>
<head>
<title>Removable</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
</style>
<script>
function main() {
var image = document.getElementById("myImage");
image.addEventListener("click", function() {
image.parentNode.removeChild(image);
});
}
window.onload = main;
</script>
</head>
<body>
<div>
<img src="../img/dice.png" alt="dice" id="myImage">
</div>
</body>
</html>
This is how I would do it, instead of messing with the javascript, it's a lot easier with the jQuery. And since you tagged jQuery, I'm providing what I think would work best.
$(document).ready(function() {
$('<div class="overlay" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .5);">').appendTo('body');
$('<div class="popup" style="z-index: 8888;"><img src="startbutton.png" width="400" height="29" /></div>').appendTo('body');
$('.popup').on('click', function() {
$('.popup, .overlay').remove();
});
});
Related
i've a array of three links for a button which i'm using in footer and when i press the button again and again , array will work one by one good ..and every time it shows a link when press the button. That is good.
but i want , when i click on button that "link" should open in "iframe" ... i used iframe code to pass them src= button id but not working.. please below code and help..
.
my button code with array
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<script>
let link = new Array()
link[0] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL3+8QE&distance=20"
link[1] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL5+3NG&distance=20"
link[2] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL4+3NS&distance=20"
let intlinkIndex = 0;
function writeLink() {
if (intlinkIndex >= link.length) {
let btn = document.getElementById('btn');
btn.style.display = 'none';
mylink.style.display = 'none';
}
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
intlinkIndex++;
}
</script>
</head>
<body>
<div class="footer">
<button id="btn" onclick="writeLink();">Click Me</button>
<div id="mylink"></div>
<br>
<iframe id="iframe" src="mylink" width="100%" height="400"></iframe>
</div>
</body>
</html>
You can get it by specifying iframe's name in target when generating link html.
So add a name property in your iframe like following:
<iframe id="iframe" name="iframe" src="mylink" width="100%" height="400"></iframe>
Then add a target property.
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
function writeLink() {
if (intlinkIndex >= link.length) {
let btn = document.getElementById('btn');
btn.style.display = 'none';
mylink.style.display = 'none';
}
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
document.getElementById('iframe').src = link[intlinkIndex];
intlinkIndex++;
}
Full source code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<script>
let link = new Array()
link[0] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL3+8QE&distance=20"
link[1] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL5+3NG&distance=20"
link[2] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL4+3NS&distance=20"
let intlinkIndex = 0;
function writeLink() {
if (intlinkIndex >= link.length) {
let btn = document.getElementById('btn');
btn.style.display = 'none';
mylink.style.display = 'none';
}
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
document.getElementById('iframe').src = link[intlinkIndex];
intlinkIndex++;
}
</script>
</head>
<body>
<div class="footer">
<button id="btn" onclick="writeLink();">Click Me</button>
<div id="mylink"></div>
<br>
<iframe id="iframe" src="mylink" width="100%" height="400"></iframe>
</div>
</body>
</html>
I need to replace green background with my own background image with (x,y positioning).
At this moment I just removed green background from https://s14.postimg.org/x9hmont5d/image.jpg with Seriously.js library.
https://jsfiddle.net/0xz7cfkL/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#canvas {
border: 2px solid #000;
}
</style>
</head>
<body>
<canvas width="800" id="canvas" height="600"></canvas>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/seriously.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.chroma.js"></script>
<script>
let image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://s14.postimg.org/x9hmont5d/image.jpg';
let seriously = new Seriously();
let canvas = seriously.target('#canvas');
let chroma = seriously.effect('chroma');
chroma.source = seriously.source(image);
canvas.source = chroma;
seriously.go();
</script>
</body>
</html>
Looking at the SeriouslyJS library, the background image can be added using the blend-plugin. You need to include this next to the chroma script-tag:
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.blend.js"></script>
In the main script, you could add a background image in the same fashion as the first:
let bgImage = new Image();
bgImage.crossOrigin = 'anonymous';
bgImage.src = 'https://picsum.photos/800/600?random';
Finally, replace "canvas.source":
let blend = seriously.effect('blend');
blend.top = chroma;
blend.bottom = seriously.source(bgImage);
canvas.source = blend;
I hope I didn't miss something. You can check out and run the whole script in the snippet:
let image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://s14.postimg.org/x9hmont5d/image.jpg';
let bgImage = new Image();
bgImage.crossOrigin = 'anonymous';
bgImage.src = 'https://picsum.photos/800/600?random';
let seriously = new Seriously();
let canvas = seriously.target('#canvas');
let chroma = seriously.effect('chroma');
chroma.source = seriously.source(image);
let blend = seriously.effect('blend');
blend.top = chroma;
blend.bottom = seriously.source(bgImage);
canvas.source = blend;
seriously.go();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#canvas {
border: 2px solid #000;
}
</style>
</head>
<body>
<canvas width="800" id="canvas" height="600"></canvas>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/seriously.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.chroma.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.blend.js"></script>
</body>
</html>
An alternative solution could use HTML and CSS to position an image at a z-index behind the canvas. (I would use this if the first one won't work)
let image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://s14.postimg.org/x9hmont5d/image.jpg';
let seriously = new Seriously();
let canvas = seriously.target('#canvas');
let chroma = seriously.effect('chroma');
chroma.source = seriously.source(image);
canvas.source = chroma;
seriously.go();
#container {
position: relative;
}
#myBg {
position: absolute;
padding: 2px;
z-index: 1;
}
#canvas {
border: 2px solid #000;
position: absolute;
z-index: 2;
}
<html>
<body>
<div id="container">
<img src="https://picsum.photos/800/600?random" id="myBg" />
<canvas width="800" id="canvas" height="600"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/seriously.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.chroma.js"></script>
</body>
</html>
What I have
I have a HTML & javascript code : The javascript generate a random_number and use it as indexing on the array of images.Then,the script add the selected picture to the <img> tag of html code.
It's works very well.
What I need
I want to make the tags as background_image(display texts in it,buttons and more). Is there any way to do it? /searched lot of in google and there's no excellent result/.
Thank you for help. :(
window.onload = function() {
var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg","http://advsys.net/ken/voxlap/cave.png");
var cGameName = new Array("Voxlap1", "Voxlap2");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1 img"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2 img"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title
comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image
comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title
comp2GameImage.src = cGamePic[randomItemContainer2]; //Random image
};
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Random_page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="rnd.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--width:45%; margin: 10px;-->
<div id="container1" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
<div id="container2" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
</body>
</html>
If you need to apply those random images as a background, it will be set as a background image of a div and not an img, so replace your img with a div and instead of writing:
comp1GameImage.src = cGamePic[randomItemContainer1];
You will need to write:
comp1GameImage.style.backgroundImage = "url('"+ cGamePic[randomItemContainer1]+"')";
Where comp1GameÎmage is your div.
Here's your updated Snippet:
window.onload = function() {
var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg", "http://advsys.net/ken/voxlap/cave.png");
var cGameName = new Array("Voxlap1", "Voxlap2");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title
comp1GameImage.style.backgroundImage = "url('" + cGamePic[randomItemContainer1] + "')";
//cGamePic[randomItemContainer1]; //Random image
comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title
comp2GameImage.style.backgroundImage = "url('" + cGamePic[randomItemContainer2] + "')";
//cGamePic[randomItemContainer2]; //Random image
};
#container1,
#container2 {
display: inline-block;
width: 45%;
height: 100%;
float: left;
margin: 10px;
}
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Random_page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="rnd.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--width:45%; margin: 10px;-->
<div id="container1">
<h1>Title</h1>
</div>
<div id="container2">
<h1>Title</h1>
</div>
</body>
</html>
EDIT:
To make the two divs split the page into two frames, give them these styles:
#container1, #container2{
display:inline-block;
width:45%;
height:100%;
}
You could make images look like background (NOT in background) by overlapping H1 on IMG using CSS :
[id*=container] {
position:relative; /*--container is relative*/
}
h1 {
position:absolute; /*Image title is absolute*/
top:30px;
left:30px;
}
DEMO :
window.onload = function() {
var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg","http://advsys.net/ken/voxlap/cave.png");
var cGameName = new Array("Voxlap1", "Voxlap2");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1 img"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2 img"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title
comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image
comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title
comp2GameImage.src = cGamePic[randomItemContainer2]; //Random image
};
[id*=container] {
position:relative;
}
h1 {
position:absolute;
top:30px;
left:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--width:45%; margin: 10px;-->
<div id="container1" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
<div id="container2" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
I'm new to JavaScript and am trying to get this animation to move across the screen though to little avail , can someone help me out with my code? Added more code, im trying to get the image to move diagonally down my screen, trying to call the slowmovingmeteor() function.
Java Script
var meteoranim = new Array(6);
var curmeteor = 0;
var leftposition = 0;
var topposition = 0;
for(var t = 0; t<6; ++t){
meteoranim[t] = new Image();
meteoranim[t].src = "images/meteor" + t + ".png";
}
function meteoranimation(){
if(curmeteor == 5)
curmeteor = 0;
else
++curmeteor;
document.getElementById('meteor').src = meteoranim[curmeteor].src;
}
function slowmovingmeteor(){
var slowmeteor = document.getElementById("meteor");
slowmeteor.style.left = leftposition + "px";
slowmeteor.style.top = topposition + "px";
slowmeteor.style.visibility = "visible";
topposition += 6;
leftposition += 4;
if (topposition <= -20){
topposition = -10;
leftposition = -10;
}
if (curmeteor == 5)
curmeteor =0;
if (leftposition > 1000){
topposition = -10;
leftposition = -10;
}
else
document.getElementById('meteor').src = meteoranim[curmeteor].src;
++curmeteor
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Primordial Casino Casino</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link media="screen" href="styles/casinostyles.css" rel="stylesheet" type="text/css">
<script src="casinoAnimation.js" type="text/javascript">
</script>
</head>
<body id="wrapper" onLoad="
setInterval('caveboyanimation()', 150);
setInterval('slowmovingmeteor()', 80);
setInterval('campfireanimation()', 100);">
<header ><h1 class="casinotitle">Primordial Casino</h1>
</header>
<div>
<img class="caveboy" src="images/caveboy0.png" id="caveboy" alt="Image of a cave boy"/>
<img src="images/campfire0.png" id="firepit" alt="Image of a fire pit"/>
<img src="images/meteor0.png" id="meteor" alt="Image of a meteor"/>
<canvas width="650" height="450">
</canvas>
</div>
<div id="footer">
<p>© Primordial Casino</p>
<p>Thanks to ipicturee.com for the background image</p>
</div>
</body>
</html>
I am experiencing an issue with my scripts to which I cannot find a proper fix. I have this code, which uses glassbox.js and all its extras, which uses to work (it displayed the glassbox appropriately) but since I added JQuery to the file it has stopped working. I am not sure how to rearrange or call the scripts so that it functions again. The commented out lines myBox.whatever are the lines causing the issue specifically:
#model OneEightyWebApp.Models.Centres
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<head>
<title></title>
<script src="../../Content/javascripts/prototype.js" type="text/javascript"> </script>
<script src="../../Content/javascripts/scriptaculous/effects.js" type="text/javascript"></script>
<script src="../../Content/javascripts/glassbox/glassbox.js" type="text/javascript"></script>
<script type="text/javascript">
var spaces = #Html.Raw(Json.Encode(ViewData["spaces"]))
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('myBox', '600px', '400px', 'hidden', '', true, true);
// myBox.apos('300', '300px');
// myBox.appear();
alert("clicked");
}
</script>
<script src="../../Content/javascripts/prototype.js"> </script>
<script type="text/javascript">
document.observe('dom:loaded', function () {
$$("body")[0].on('click', ".class1", function () {
var myBox = document.getElementById("myBox");
myBox.style.display = "block";
glassLoad();
});
});
</script>
<script src="../../Content/jquery.js"></script>
<script type="text/javascript">
jQuery(function () {
var array = [];
jQuery("#centres").change(function () {
var selectedCentre = $("#centres option:selected").text();
$.getJSON("/Centres/output?centreName=" + selectedCentre, function (results) {
var data = results;
document.getElementById("container2").innerHTML = "";
var div;
for (var i = 0; i < document.getElementById("centres").value; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Shop " + data[i];
div.innerHTML += "<br>";
div.innerHTML += "Floor Space: <b>" + spaces[i] + " m2 </b>";
div.style.width = "100px";
div.style.height = "100px";
div.style.padding = "0px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
});
});
});
</script>
</head>
<body>
<div id="container1" style="width: auto; height: 50px;">
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="glassLoad();">Generate</button>
#Html.DropDownList("centres", (List<SelectListItem>)ViewData["centres"])
<select id="mySelect"></select>
</div>
<div id="container2" style="margin: 10px; float: left;"></div>
<div id="myBox" style="display: none; width: 600px; height: 400px;">
<div id="exitButton" style="position: absolute; left: 564px; bottom: 173px; z-index: 1001;" title="close">
<a href="javascript:THIS.fade();">
<img id="exitImage" style="border: none;" src="../../Content/javascripts/glassbox/skins/exitButton.png"></a>
</div>
</div>
</body>
You have to put jQuery in noConflict and pass $ into the ready event here:
$.noConflict();
jQuery(function ($) {
var array = [];
... // use $ from now on instead of jQuery
That's one way of doing it, check the docs there are other patterns.