so I want the user to enter 2 values (height and width) then I want to take the values and add them to a new canvas that I just created. I am getting the values however I am not sure ow to add them to style.height and style.width.
var createNewCanvas = document.getElementById("createNewCanvas");
var resetCreateNewCanvas = document.getElementById("resetCreateNewCanvas");
var userInputWindow = document.getElementById("userInputWindow");
var enterCanvasHeight = document.getElementById("enterCanvasHeight");
var enterCanvasWidth = document.getElementById("enterCanvasWidth");
function createNewCanvass() {
document.body.removeChild(userInputWindow);
var enterCanvasHeightt = enterCanvasHeight.value;
var enterCanvasWidthh = enterCanvasWidth.value;
document.body.innerHTML = enterCanvasHeightt+":"+enterCanvasWidthh;
var newCanvas = document.createElement("canvas");
newCanvas.classList.add("canvasDesign");
newCanvas.style.height = enterCanvasHeightt;
newCanvas.style.width = enterCanvasWidthh;
document.body.appendChild(newCanvas);
}
createNewCanvas.addEventListener('click', createNewCanvass);
body {
text-align: center;
background-color: rgb(46, 45, 45);
color: rgb(255, 255, 255);
}
.createNewCanvas {
margin: 0 auto;
background-color: #fff;
background-color: rgba(80, 80, 80, 0.7);
width: 300px;
}
.enterCanvasHeight, .enterCanvasWidth {
width: 50px;
text-align: center;
}
.canvasDesign {
border: 2px solid black;
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h2>Canvas</h2>
<menu></menu>
</header>
<div class="createNewCanvas" id="userInputWindow">
Please enter the size of your canvas in pixels(px) and then click "create"<br><br>
<form>
<input type="number" id="enterCanvasHeight" placeholder="height"> : <input type="number" id="enterCanvasWidth" placeholder="width"><br><br>
<input type="button" value="Create" id="createNewCanvas">
<input type="button" value="Reset" id="resetCreateNewCanvas"><br>
</form>
</div>
<footer></footer>
<script src="Script/createNewCanvas.js"></script>
</body>
</html>
I fixed the issue by adding +"px" to the style.height and style.width
newCanvas.style.height = enterCanvasHeightt+"px";
newCanvas.style.width = enterCanvasWidthh+"px";
Thanks anyway!
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>
I am trying to practice JavaScript with basic DOM manipulation but I keep getting 2 errors:
1.SyntaxError: missing ; before statement
2.TypeError: size is not a function
function size() {
var height = document.body.getElementById('hover1').style.height: 500 px;
var width = document.body.getElementById('hover1').style.width: 500 px;
}
console.log(hover);
<!DOCTYPE html>
<html>
<head>
<title>javascript practice</title>
<meta charset="utf-8" />
<style>
body {
margin: 7em auto;
background-color: green;
width: 90%;
}
#size1 {
background-color: blue;
width: 150px;
height: 150px;
margin: 3em auto;
}
</style>
</head>
<body>
<div id="size1"></div>
<input type="button" value="size" onclick="size();">
</body>
your error is here:
var height = document.body.getElementById('hover1').style.height: 500px;
var width = document.body.getElementById('hover1').style.width: 500px;
// -------------------^ and -------------------------------------^
replace those lines with these:
var height = document.getElementById('hover1').style.height;
var width = document.getElementById('hover1').style.width;
There is nothing called document.body.getElementById instead change this to document.getElementById use as below
var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px";
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px";
function size1() {
console.log("test")
var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px";
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px";
}
//console.log(hover);
<!DOCTYPE html>
<html>
<head>
<title>javascript practice</title>
<meta charset="utf-8"/>
<style>
body {
margin: 7em auto;
background-color: green;
width: 90%;
}
#size1 {
background-color: blue;
width: 150px;
height: 150px;
margin: 3em auto;
}
</style>
</head>
<body>
<div id="size1">
</div>
<input type="button" value="size" onclick="size1()">
</body>
If you are going to set the height of the element and assign the height to var height then you need to do the following:
var height = document.getElementById("size1").style.height = "500px";
If you are going to just assign the height of the element to var height then you need to do the following:
var height = document.getElementById("size1").style.height;
If you are just going to set the height of the element then you just need to do:
document.getElementById("size1").style.height = "500px";
You should also make your 500px with quotes as numbers do not need " " around them but once you add text...it all becomes text. So either way you should have "500px"
I would also make your button into this:
<button type="button" value="size" onclick="size()">Size</button>
Based on a belief that you are trying to make the div larger onclick of Size button then you should have the following:
Style
body {
margin: 7em auto;
background-color: green;
width: 90%;
}
#size1 {
background-color: blue;
width: 150px;
height: 150px;
margin: 3em auto;
}
HTML
<div id="size1"></div>
<button type="button" value="size" onclick="size()">Size</button>
JavaScript
function size() {
document.getElementById('size1').style.height = "500px";
document.getElementById('size1').style.width = "500px";
}
I want background image to keep moving from left to right.
Any idea how can I do that ? I tried to use code from stackoverflow, didnt work, I tried to google, didnt work.
This is my code. There is nothing about the moving background I am just placing it here because it might help. I´d like to know why any code never worked.
<!DOCTYPE html>
<html dir='ltr'>
<head>
<title>Temponary Rush</title>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script type='text/javascript' src='js/classes.js'></script>
<style>
body {
background-color: #232B2B;
background-image:url('../web/css/cave-background.png');
background-position:top;
background-repeat:no-repeat;
color:#FFFFFF;
}
#container{
flex-flow: row nowrap;
display: -webkit-flex;
-webkit-justify-content: space-around;
display: flex;
justify-content: space-around;
}
#container > div {
background: #5F85DB;
padding: 5px;
color: #fff;
font-weight: bold;
font-family: Tahoma;
border:5px inset #DC3D24;
background-color:#232B2B;
}
#container > .advert {
width:200px;
}
canvas {
background-image:url('imgs/backgrounds/cave-bcg.png');
background-position:center;
}
</style>
</head>
<body>
<div id='container'>
<div id='left' class='advert'>
levá strana
</div>
<div id='center'>
<canvas id="ctx" width="800" height="600"></canvas>
<script type='text/javascript'>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
ctx.fillStyle = 'white';
var player = {
x: 10,
y: 549,
spdX: 1,
spdY: 51,
width:50,
height:50
};
var obstacles = [
];
var allowedJump = true;
document.onkeydown = function(event){
if (event.keyCode === 32 && allowedJump) {
for(i; i<10;i++){
setTimeout(function(){
player.y-= player.spdY/10;
},60);
}
setTimeout(function(){
allowedJump = true;
player.y+=player.spdY;
},600);
};
allowedJump = false;
};
setInterval(update,10);
function update(){
ctx.clearRect(0,0,800,600,45);
ctx.fillRect(player.x, player.y, player.width, player.height);
player.x += player.spdX;
for(i = 0; i < obstacles.length; i++) {
ctx.fillRect(obstacles[i][0], obstacles[i][1], obstacles[i][2], obstacles[i][3]);
var is_colliding = collision.testCollision(player,obstacles[i][0], obstacles[i][1],obstacles[i][2],obstacles[i][3]);
if(is_colliding) {
afterImpact.stun(2,player);
}
}
}
</script>
</div>
<div id='right' class='advert'>
pravá strana
</div>
</div>
</body>
</html>
I have the website on xampp server for now, later I will go to node.js server.
this is my file tree.
please remove this code from body
body {
background-color: #232B2B;
background-image:url('../web/css/cave-background.png');
background-position:top;
background-repeat:no-repeat;
color:#FFFFFF;
}
you can set the following div code inside the body tag
div{
background-color: #232B2B;
background-image:url('../web/css/cave-background.png');
background-position:top;
background-repeat:no-repeat;
}
I am using the Html2canvas in order to take a screenshot of a div and display it in a new window. Here is my javascript function
function capture() {
html2canvas(document.getElementById('screenshot'), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
window.open(img);
}}
);
}
The problem with this code is that it captures only half of the div as the following image shows:
I changed the ID of the element to be captured to 'table' so that I can screenshot the table only. But it seems like the screenshot takes only half of the targeted div (in terms of height).
Now when I select the whole body:
function capture() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
}
});
the result is as follows:
I made a function that can adjust the output by 1 to 200% of the window height and width. To get your part working, I did the following:
....
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
canvas.id = "ctx"
var ctx = document.getElementById('ctx');
var img = ctx.toDataURL("image/png");
window.open(img);
},....
Snippet
function hide(ele) {
var ele = document.querySelector(ele);
ele.style.display = 'none';
setTimeout(function() {
ele.style.display = 'block'
}, 1000);
return false;
}
function screenShot() {
var w = document.getElementById('w');
var h = document.getElementById('h');
var winW = window.outerWidth;
var winH = window.outerHeight;
var width = parseFloat(w.value * winW * .01);
var height = parseFloat(h.value * winH * .01);
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
canvas.id = "ctx"
var ctx = document.getElementById('ctx');
var img = ctx.toDataURL("image/png");
window.open(img);
},
width: width,
height: height
});
return false;
}
main {
position: relative;
width: 100vw;
height: 100vh;
overflow: auto;
}
#panel {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 50px;
z-index: 1;
}
fieldset {
border-radius: 10px;
background: hsla(120, 100%, 50%, .5)
}
legend {
font: small-caps 700 20px/1.4'Source Code Pro';
}
section {
height: 33vh;
width: 100vw;
}
#sec1 {
background: red;
border: 1px solid blue;
}
#sec2 {
background: white;
border: 1px solid red;
}
#sec3 {
background: blue;
border: 1px solid white;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>34571073</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>
<header id="panel">
<fieldset>
<legend>HTML2Canvas</legend>
<label for="w">Width.:
<input id="w" type="number" min="1" max="200" />%</label>
<br/>
<label for="h">Height:
<input id="h" type="number" min="1" max="200" />%</label>
<br/>
<input type="button" value="Capture" onclick="hide('#panel'); screenShot();" />
</fieldset>
</header>
<main>
<section id="sec1"></section>
<section id="sec2"></section>
<section id="sec3"></section>
</main>
</body>
</html>
I had been trying to animate a .png file with JavaScript while following this method. This is the .png file that I want to animate. I want the animated logo to be right by "Cupquake," but the logo doesn't even show up, let alone animate. However, changing "span class=logoCquake" in HTML to a div class displays the logo, but it is below the text.
My JavaScript file:
var scrollUp = (function () {
var timerId;
return function (height, times, element) {
var i = 0;
timerId = setInterval(function () {
if (i > times)
i = 0;
element.style.backgroundPosition = "0px -" + i * height + 'px';
i++;
}, 100);
};
})();
scrollUp(130, 30, document.getElementByClass('logoCquake'))
My HTML:
<!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">
<head>
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/style.css" />
<script src="../scripts/logoCquake.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cupquake - Home</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="topbar">
<div class="mCquake">
</div>
</div>
<br>
<br>
<br>
<span class="ninja">Ninja</span><span class="cupquake">Cupquake</span><span class="logoCquake"></span>
</div>
</div>
</body>
</html>
CSS file:
#font-face
{
font-family: typo_semib;
src: url('fonts/typo_semib.ttf');
}
#font-face
{
font-family: typo_light;
src: url('fonts/typo_light.ttf');
}
.wrapper .header
{
height: 250px;
width: 100%;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffa200), color-stop(100%,#d25400));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200',endColorstr='#d25400',GradientType=0);
background: -moz-linear-gradient(top,#ffa200,#d25400);
background-image: -o-linear-gradient(#ffa200,#d25400);
overflow: hidden;
}
.wrapper .header .topbar
{
height: 60px;
background-image: url(../imgz/head/hBarSBg.png);
background-repeat: repeat-x;
}
.wrapper .header .topbar .mCquake
{
height: 37px;
width: 278px;
background-image: url(../imgz/head/mCqRight.png);
background-repeat: no-repeat;
float: none;
float: right !important;
margin-right: 10px;
margin-top: 11.5px;
margin-bottom: 11.5px;
}
.wrapper .header .ninja
{
font-family: typo_semib;
font-size: 48px;
color: #303030;
margin-left: 55px;
}
.wrapper .header .cupquake
{
font-family: typo_light;
font-size: 48px;
color: #303030;
}
.wrapper .header .logoCquake
{
height: 112px;
width: 130px;
background-image: url(../imgz/logo/logoCquake.png);
background-repeat: no-repeat;
}
EDIT:
Tried again, but with the second method listed here, still nothing. These are my current HTML and JS codes:
JS:
function SpriteAnim (options) {
var timerId,
i = 0,
element = document.getElementByClass(options.elementClass);
element.style.width = options.width + "px";
element.style.height = options.height + "px";
element.style.backgroundRepeat = "no-repeat";
element.style.backgroundImage = "url(" + options.sprite + ")";
timerId = setInterval(function () {
if (i >= options.frames) {
i = 0;
}
element.style.backgroundPosition = "0px -" + i * options.height + "px";
i ++;
}, 100);
this.stopAnimation = function () {
clearInterval(timerId);
};
}
var cupcake = new SpriteAnim({
width: 130,
height: 112,
frames: 30,
sprite: "..\imgz\logo\logoCquake.png",
elementClass : "logoCquake"
});
HTML:
<!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">
<head>
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/style.css" />
<script language="javascript" src="SpriteAnim.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cupquake - Home</title>
</head>
<body>
<div class="header">
<div class="topbar">
<div class="mCquake">
</div>
</div>
<span class="ninja">Ninja </span><span class="cupquake">Cupquake</span><span class="logoCquake"></span>
</div>
</div>
</body>
</html>
my code seems to work:
<!doctype html>
<style>
div{background:url(http://i1243.photobucket.com/albums/gg555/Nyanja/logoCquake.png);height:33px;width:39px}
</style>
<div id=anim></div>
<script>
var i=0;
setInterval(function(){i+=33.6;document.getElementById("anim").style.backgroundPosition="0px "+i+"px"},100)
</script>
I believe 'span' tag being an inline element it either needs a 'display: block' property or 'float: left', i tried your code and it worked for me after i added 'display: block' to the 'span' tag with class 'logoCquake'. Hope this helps you.
Note: if you use 'display: block' the span will move to new line and if you use 'float: left' the 'span' tag will move to the left of the text.