I am using EaselJS, and for some reason my canvas isn't showing the image as a background even though this is how tutorials do it. My HTML file is as so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Requiescat in Pace</title>
...lots of .js imports for EaselJS
<script type="text/javascript" src="RIPwitheasel.js"></script>
<style>
canvas {
position: absolute;
left: 0;
right: 0;
top: 10%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
background: transparent;
}
</style>
<link rel="stylesheet" type="text/css" href="style_2.css">
</head>
<body onload="init()">
<font color = white>
<img alt = "full screen bg img" src = "images/backgrounds/pagebackground.jpg" id = "full-screen-background-image"/>
<div style="position: relative">
<h1 style="position: fixed; width:100%; text-align: center"> <strong> Requiescat In Pace </strong> </h1>
<p style = "text-align: center"> Prototype 1 </p>
</div>
<form action="" style = "position: fixed; top: 0; width: 100% text-align: center" >
<input type="button" value="Donate!!!">
</form>
<div style="position: relative">
<p style="position: fixed; bottom: 0; width:100%; text-align: center"> Credits: To be added</p>
</div>
<canvas id="gameCanvas" width="1000" height="736">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
</font>
</body>
</html>
And my RIPwitheasel.js is this:
var stage;
function init()
{
var canvas = document.getElementById("gameCanvas");
stage = new createjs.Stage(canvas);
var background = new createjs.Bitmap("images/backgrounds/grass-tiled.png");
stage.addChild(background);
createjs.Ticker.setFPS(60);
stage.update();
}
function tick()
{
stage.update();
}
What is it that is incorrectly defined? All of the page displays correctly but the canvas doesn't display the image. I get zero run-time errors in the browser console for the js file.
EDIT: I just realized that if I use a .jpg file instead of a .png file it loads it. Why is this?
See this answer from CreateJS developer: https://stackoverflow.com/a/20682883/1996480
Here's how you could use PreloadJS to load your background:
var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, this);
queue.loadFile({id:"myBackground", src:"images/backgrounds/grass-tiled.png"});
function handleComplete() {
var image = queue.getResult("myBackground");
stage.addChild(image);
}
Related
I have a basic Graphics User Interface where if the user clicks "move"
then a div (yellow rectangle) moves across the screen.
However, I want there to be an event based on Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv()
{
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv(){
if ($('#myDiv').css == marginTop: '-=15px' ) {
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
errors mostly because im not sure on the syntax :(
hope its help you
You must use var (let, const) when create a new variable
I added CONSTANTS for easy configuration,
isDivCanMoveForward for your:
Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
var MAX_POSITION_OF_DIV_NODE = 400;
var STEP_OF_DIV_NODE = 100;
var div = document.getElementById("myDiv");
var currentPositionOfDivNode = parseInt(div.style.left, 10);
function MoveDiv() {
currentPositionOfDivNode += STEP_OF_DIV_NODE; // increment
if (!isDivCanMoveForward()) {
return; // stop functinon when div have max position
}
div.style.left = currentPositionOfDivNode + "px";
}
function isDivCanMoveForward() {
if (currentPositionOfDivNode > MAX_POSITION_OF_DIV_NODE) {
currentPositionOfDivNode = MAX_POSITION_OF_DIV_NODE // set max of value
alert('hey')// user message
return false;
}
return true;
}
<html>
<head>
<title>Move Div</title>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
In my javascript Program I have created a page to display an image and description at the same time when the user moves the mouseOver a link, and display a different image with no description when user moves the mouseOut of link. but I am not getting output on mouseOver/mouseOut as per expectation. Can anyone help ? I did the following:
(i) When the mouse moves over a link, I am calling the function by passing the text and image.
(ii) When the mouse moves out,I am calling the function by passing a blank text and a different image. This image is the same when the mouse is out from all the links.
code:
<!DOCTYPE html>
<html>
<head>
<style>
div a{
text-decoration: none;
font-size: 25px;
color: yellow;
}
.container {
width: 1002px;
margin-top: 50px;
margin-left: 130px;
}
#first {
width: 400px;
float: left;
height: 350px;
background-color:#f4b2ef;
border:inset;
}
#second {
width: 590px;
float: right;
height: 350px;
color: white;
border:inset;
}
</style>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
<p style="text-align:center">First Place Winner</p>
<p style="text-align:center">Third Place Winner</p>
<p style="text-align:center">Merit Prize Winner</p>
<p id="para"> </p>
</div>
<div id="second">
<img id="default" src="images/default.jpeg" alt=""
width="590" height="350"/>
</div>
</div>
<script>
var blank = "";
var txt = "Beautiful fall";
var txt2 = "Natural pictures are beautiful";
var txt3 = "Beautiful Rose garden"
var w1 = new Image(590, 350);
var w2 = new Image(590, 350);
var w3 = new Image(590, 350);
var def = new Image(590, 350);
w1.src = "images/w1.jpeg";
w2.src = "images/w2.jpg";
w3.src = "images/w3.jpg";
def.src = "images/default.jpeg";
function replaceImg(txt, w1) {
w1.src;
var para = document.getElementById("para").innerHTML = txt;
}
function defaultImg(blank, def) {
def.src;
var para = document.getElementById("para").innerHTML = blank;
}
</script>
</body>
</html>
I amputate your code just to demonstrate that you can make it work by using js function addEventListener("moustover",callback) to do the work. I have never wrote code in your way so I don't know how to improve upon yours. You should always seperate your html css and js codes.
var firstTarget = document.querySelector("#first");
firstTarget.addEventListener("mouseover",function(){
document.querySelector("#target-image").setAttribute("src",'https://via.placeholder.com/350x150)');
})
firstTarget.addEventListener("mouseout",function(){
document.querySelector("#target-image").setAttribute("src",'#');
})
<!DOCTYPE html>
<html>
<head>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
First Place Winner</p>
</div>
<div>
<img id="target-image" src="#" alt="">
</div>
</div>
my problem now is that when i click on download image the image is downloaded but the image is black just the text shows up why is that? i tried many things but i haven't had a result. i made a div with an image inside the div i also have a text box inside that div where i can write text and change color i can also upload images from desktop i want to save that div into an image and save it to my desktop but i don't know how to do that. here is where i got the idea How to save img to user's local computer using HTML2canvas
$(function() {
var element = $("#firstshirt"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
allowTaint: true,
logging: true,
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
});
$("#save_image_locally").click(function(){
html2canvas($("#firstshirt"),
{
onrendered: function (canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'somefilename.jpg';
a.click();
}
});
});
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
position: absolute;
overflow: hidden;
}.container {background-color: transparent;
width: 490px;
height: 500px;
border: 2px solid;
position: relative;
overflow: hidden;
/* Will stretch to specified width/height */
background-size: 490px 500px;
background-repeat: no-repeat;
}
<center>
<div id="firstshirt" class="container" style="float:left;">
<center><div id="wrapper"><div id="boxes" class="container5" style="float:center;">
<div data-bind="foreach:items" class="fix_backround">
<div class="item" data-bind="draggable:true,droppable:true">
<center><span id="texter" class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div></div>
</span></div></div></center><br><br><br><br></div></center>
<br/>
</center></div></div><center>
<div id="previewImage">
</div>
</center>
<center><p><font color="red"><b>Please preview and download the image and upload below we apologize for the inconvenience.</b></font></p><input id="btn-Preview-Image" type="button" value="Preview"/><button id="save_image_locally">download img</button>
<p> <label form="file">Upload Downloaded Image:</label>
<input type="file" name="file3" id="file3" required formvalidate> </p>
<br/>
</center>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<script src="https://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://cdn.shopify.com/s/files/1/1602/3035/files/jquery-3.1.1.min.js?9312974637985503683"></script>
<script src="https://cdn.shopify.com/s/files/1/1602/3035/files/knockout-3.4.1.js?884425216910251312"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script><link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I am making matching game that images in left and right are different, and users have to find(I put one more image in left side).
My problem is that I cannot call image on where I want. What should I have to fix? Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#leftside {
float: left;
}
#rightside {
float: right;
left: 500px;
border-left: 1px solid black
}
</style>
<script>
var numberOfFaces(5);
var theLeftSide = document.getElementById("leftSide");
function generateFaces() {
var createElement("img");
var position = Math.floor(Math.random() * 500);
img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
img.id = 'smileImage';
createElement.setAttribute("height", position);
createElement.setAttribute("width", position);
document.getElementById('leftSide').appendChild(img);
}
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftside"></div>
<div id="rightside"></div>
</body>
</html>
You need to set something to the result of createElement('img'). For example, you can change that line to var img = createElement('img');
You never actually use theLeftSide.
createElement is actually document.createElement.
You never defined the variable createElement. Since we called it img earlier, do so now.
leftSide is not the ID of any element, but leftside is. Change it so that all usages are capitalized the same.
After that, you actually need to call generateFaces. Because the page is loaded top-to-bottom, JavaScript doesn't yet know about the div with the ID of leftSide. You have to wait until the page is finished loading to call the Javascript, and you can do that by adding window.onload = generateFaces to the end of your script.
Here's the final result:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#leftside {
float: left;
}
#rightside {
float: right;
left: 500px;
border-left: 1px solid black
}
</style>
<script>
function generateFaces() {
var img = document.createElement('img');
var position = Math.floor(Math.random() * 500);
img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
img.id = 'smileImage';
img.setAttribute('height', position);
img.setAttribute('width', position);
document.getElementById('leftSide').appendChild(img);
}
window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>
I have write a JavaScript code to perform a slide show but it's not working onload when i assign it to a <a> it works but not work onload
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Show</title>
<meta name="author" content="Jenz" />
<!-- Date: 2014-07-18 -->
<script>
var slideImg;
var picNo = 0;
window.onload = function() {
slideImg = document.getElementById('slideShowImage');
images = new Array();
images[0] = new Image();
images[0].src = "Images/image1.jpg";
images[1] = new Image();
images[1].src = "Images/image2.jpg";
images[2] = new Image();
images[2].src = "Images/image3.jpg";
};
function slide() {
slideImg.src = images[picNo].src;
if (picNo < 2) {
picNo++;
} else {
picNo = 0;
}
timer = setTimeout(slide, 1000);
};
</script>
</head>
<body>
<div style="margin-left: auto; margin-right: auto; width: 900px">
<div id="slideShowAndNav" style="margin: auto; width: 700px;">
<img id="slideShowImage" name="slideshow" src="Images/image1.jpg" style="border-radius: 0px 0px 0px 250px; position: absolute; top: -50; left: -50; z-index: 1;" border="1px" />
<a style="display: block; height: 40px; width: 40px; background-color: red; border-radius: 20px; text-align: center; position: absolute; z-index: 2; margin-top: 130px;" href="">Home</a>
</div>
</div>
</body>
</html>
Please look at the code and tell me what should i do and other thing i have a navigation which code is
<a style="display: block; height: 40px; width: 40px; background-color: red; border-radius: 20px; text-align: center; position: absolute; z-index: 2; margin-top: 130px;" href="">Home</a>
i want this <a> in a circle as i did with border-radius and now i want it's
Text in the center like Home in the middle of the circle help me also with this
i want this in a circle as i did with border-radius and now i want it's Text in the center like Home in the middle of the circle help me also with this
For this, use:-
style="border-radius:100px; text-align:center;"
The "xmlns" attribute is invalid in HTML 4.01. (You can change your doctype.)
Also, it is more common practice to create your function.
function blaah(blaah){
blaah
}
And then add an onload event handler, either with an event listener, or add this code to your body tag,
<body onload="blaah('blaah')">
or, you could add this code in your script tags, but outside of the function.
blaah("blaah");
Call slide function.
window.onload = function() {
slideImg = document.getElementById('slideShowImage');
images = new Array();
images[0] = new Image();
images[0].src = "Images/image1.jpg";
images[1] = new Image();
images[1].src = "Images/image2.jpg";
images[2] = new Image();
images[2].src = "Images/image3.jpg";
slide();
};