I'm going to make 8 buttons move down to the bottom of screen one by one but I have a problem
here is my code :
var i = 0;
var j = 0;
while(i < 7){
i++;
interval[i] = setInterval(interval(), 10);
function interval(){
y[j]++;
if (parseInt(y[j]) >= window.innerHeight) {
if(j == y.length - 1){
debugger;
return clearInterval(interval[j]);
}
j++;
return interval();
}
button[j].style.top = y[j] + "px";
}
console.log(i);
}
var body = document.getElementById("body");
var button = [];
body.style.position = "relative";
var y = [];
for (var i = 0; i < 8; i++) {
y[i] = 0;
button[i] = document.createElement("button");
button[i].onclick = clickme();
button[i].innerHTML = "بازی";
button[i].style.fontFamily = "b nazanin";
button[i].style.fontSize = "32pt";
button[i].style.position = "absolute";
body.appendChild(button[i]);
}
var i = 0;
var j = 0;
var Interval = setInterval(interval(), 10);
function interval(){
y[j]++;
if (parseInt(y[j]) >= window.innerHeight) {
if(j == y.length - 1){
debugger;
return clearInterval(Interval[j]);
}
j++;
return interval();
}
button[j].style.top = y[j] + "px";
}
/*
var button2 = document.createElement("button");
button2.onclick = clickme();
button2.innerHTML = "بازی";
button2.style.fontFamily = "b nazanin";
button2.style.fontSize = "32pt";
body.appendChild(button);
body.appendChild(button2);
body.style.position = "relative";
button2.style.position = "absolute";
button.style.position = "absolute";
*/
function clickme() {
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body id="body">
</body>
<script src="index.js"></script>
</html>
Code explained :
button is my buttons element array.
y is my button's Tops array.
My problem is that the first button will move 7 times(Number of Is) and anything stop.I don't know what to do.
Please help me.
Ok, I did it with just 2 buttons and it worked :
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var startNext = false;
var y1 = 0;
var y2 = 0;
var interval1 = setInterval(function(){
y1++;
button1.style.top = y1 + "px";
if(y1>= window.innerHeight){
startNext = true;
return clearInterval(interval1);
}
},10);
var interval2 = setInterval(function(){
if(startNext){
y2++;
button2.style.top = y2 + "px";
if(y2 >= window.innerHeight){
return clearInterval(interval2);
}
}
},10);
<!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">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body id="body" style="position: relative;">
<button id="button1" style="position: absolute;">graege</button>
<button id="button2" style="position: absolute;">ges</button>
</body>
<script src="index.js"></script>
</html>
Related
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF[![enter image description here][1]][1]-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>Cubix Worlds Planner</title>
</head>
<body>
<div class="navbar">
<button class="btn">Reset</button>
</div>
<div class="blocks">
<button class="block"><img src="assets/blocks/items3.png"></button>
<button class="block"><img src="assets/blocks/items4.png"></button>
<button class="block"><img src="assets/blocks/items5.png"></button>
<button class="block"><img src="assets/blocks/items6.png"></button>
<button class="block"><img src="assets/blocks/items8.png"></button>
<button class="block"><img src="assets/blocks/items10.png"></button>
</div>
<div class="container">
</div>
<script src="main.js"></script>
</body>
</html>
main.js
const container = document.querySelector('.container');
const resetBtn = document.querySelector('.btn');
const { body } = document;
const blocklist = document.querySelector('.blocks');
const block = document.querySelector('.block');
let draw = false;
let blockimg = '';
function populate(size) {
document.querySelector('.block').addEventListener('click', e=>{
if (e.target.classList.contains('img')) {
blockimg = e.target.querySelector('img').getAttribute('src');
}
});
container.style.setProperty('--size', size);
for (let i = 0; i < size * size; i++) {
const div = document.createElement('div');
div.classList.add('pixel');
div.addEventListener('mouseover', function(){
if(!draw) return;
div.style.backgroundColor = blockimg;
});
div.addEventListener('mousedown', function(){
div.style.backgroundColor = blockimg;
});
container.appendChild(div);
}
}
window.addEventListener("mousedown", function(){
draw = true;
});
window.addEventListener("mouseup", function(){
draw = false;
});
function reset() {
container.innerHTML = '';
populate(100);
}
resetBtn.addEventListener('click', reset);
populate(100);
let zoomActivate = false;
window.addEventListener('keydown', (e) => {
if(e.key === 'z') {
zoomActivate = !zoomActivate;
}
});
window.addEventListener("mousemove", (e) => {
const { clientX: x, clientY: y } = e;
if(zoomActivate) {
body.style.transform = 'scale(2)';
body.style.transformOrigin = `${x}px ${y}px`;
} else {
body.style.transform = 'none';
}
});
Over the past few days, I have been attempting to create a website for pixel art. However, instead of using colors, I have opted to use blocks that can be placed on a canvas. Unfortunately, I have encountered an issue with the code I have written, as it does not allow me to select the specific block that I wish to place on the canvas. As a result, I am unable to properly generate the desired pixel art.
website preview
https://i.stack.imgur.com/ydp8M.png
I am Japanese and I apologize for my unnatural English, but I would appreciate it if you could read it.
I learned how to convert paperscript to javascript from the official documentation.
Its means are as follows
Change the type attribute of the script tag to text/paperscript. <script type="text/paperscript" src="./main.js"></script>
Enable Paperscope for global use. paper.install(window)
Specify the target of the canvas. paper.setup(document.getElementById("myCanvas"))
Write the main code in the onload window.onload = function(){ /* add main code */ }
Finally, add paper.view.draw()
The onFrame and onResize transforms as follows. view.onFrame = function(event) {}
onMouseDown, onMouseUp, onMouseDrag, onMouseMove, etc. are converted as follows. var customTool = new Tool(); customTool.onMouseDown = function(event) {};
I have tried these methods, but applying these to the Examples on the paper.js official site does not work correctly.
The following code is the result of trying these.
<!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">
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<script type="text/javascript" src="./main.js"></script>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
paper.install(window);
console.log("run test")
var myCanvas = document.getElementById("myCanvas")
var customTool = new Tool();
window.onload = function(){
paper.setup(myCanvas)
var points = 25;
// The distance between the points:
var length = 35;
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
path.add(start + new Point(i * length, 0));
customTool.onMouseMove=function(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
var vector = segment.point - nextSegment.point;
vector.length = length;
nextSegment.point = segment.point - vector;
}
path.smooth({ type: 'continuous' });
}
customTool.onMouseDown=function(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
customTool.onMouseUp=function(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
view.draw();
}
The original paperscript can be found here.
What is the problem with this code?
Thank you for reading to the end!
The var vector in the for loop is not getting the correct values in your code. Change the math operators and it will work like the paperjs demo.
Math operators (+ - * /) for vector only works in paperscript. In Javascript, use .add() .subtract() .multiply() .divide(). see http://paperjs.org/reference/point/#subtract-point
// paperscript
segment.point - nextSegment.point
// javascript
segment.point.subtract(nextSegment.point)
Here's a working demo of your example
paper.install(window);
console.log("run test")
var myCanvas = document.getElementById("myCanvas")
var customTool = new Tool();
window.onload = function() {
paper.setup(myCanvas)
var points = 15; //25
// The distance between the points:
var length = 20; //35
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++) {
path.add(start + new Point(i * length, 0));
}
customTool.onMouseMove = function(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
//var vector = segment.point - nextSegment.point;
var vector = segment.point.subtract(nextSegment.point);
vector.length = length;
//nextSegment.point = segment.point - vector;
nextSegment.point = segment.point.subtract(vector);
}
path.smooth({
type: 'continuous'
});
}
customTool.onMouseDown = function(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
customTool.onMouseUp = function(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
view.draw();
}
html,
body {
margin: 0
}
canvas {
border: 1px solid red;
}
<!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">
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<!-- you can add this back in -->
<!-- <script type="text/javascript" src="./main.js"></script> -->
<title>Document</title>
</head>
<body>
<!-- set any size you want, or use CSS/JS to make this resizable -->
<canvas id="myCanvas" width="600" height="150"></canvas>
</body>
</html>
Now I have this Jquery font rezising slider but need it in vanilla.js. It is working properly but I can not manage turning it into plain Javascript.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="app.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="font-slider">
<input type="range" min="17" max="28" value="22" step="1" />
</div>
<div>
<h1>Changing Font Size</h2>
<p>I am just a boring text, existing here solely for the purpose of this demo</p>
<p>And I am just another one like the one above me, because two is better than having only one</p>
I am a link, don't click me!
</div>
<script>
var curSize = localStorage.getItem("saveSize");
if (curSize) {
var saveSize = curSize;
$('body').css('font-size', saveSize + 'px');
var setSize = $('body').css('font-size');
}
$('.font-slider input[type="range"]').on("input change", function () {
var newSize = $(this).val(),
defaultSize = $("body").css("font-size"),
minSize = 17,
maxSize = 28;
if (newSize <= maxSize && newSize >= minSize) {
$("body").css("font-size", newSize + "px");
localStorage.setItem("saveSize", newSize);
}
});
</script>
</body>
</html>
Try:
var curSize = localStorage.getItem("saveSize");
var slider = document.querySelector('.font-slider input[type="range"]')
var body = document.body
if (curSize) {
var saveSize = curSize;
body.style.fontSize = saveSize + 'px';
}
slider.addEventListener("input", function (e) {
var newSize = this.value,
defaultSize = body.style.getPropertyValue('font-size'),
minSize = 17,
maxSize = 28;
if (newSize <= maxSize && newSize >= minSize) {
body.style.fontSize = newSize + 'px';
localStorage.setItem("saveSize", newSize);
}
});
I am trying to call a function on a button click, but for some reason the button will not call the function. Dreamweaver does not show any syntax errors. Can anyone tell me why the button is not working?
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<head>
<title></title>
<script type="text/javascript">
var imgObj = 0;
var imgObj1 = 0;
var animate;
var animate1;
function init(){
imgObj = document.getElementById('red');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
imgObj1 = document.getElementById('blue');
imgObj1.style.position = 'relative';
imgObj1.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left = 0) + Math.floor((Math.random() * 100) + 1) + 'px';
animate = setTimeout(moveRight(), 1000);
imgObj1.style.left = parseInt(imgObj1.style.left = 0) + Math.floor((Math.random() * 100) + 1) + 'px';
animate1 = setTimeout(moveRight(), 1000);
if (imgObj.style.left >= 1000px || imgObj1.style.left >= 1000px)
{
break;
else if
{
imgObj.style.left>= 1000
MessageBox.show("The Red Car has won the Race!");
}
else
{
MessageBox.show("The Blue Car has won the Race!");
}
}
}
</script>
</head>
<body onload = "init()">
<form>
<input type="button" value="Start" onclick="moveRight()" />
<br/><br/><br/><br><br/><br/><br/>
<img id="red" src="redcar.png" alt="Car 1"/>
<br/><br/><br/><br>
<img id="blue" src="bluecar.png" alt ="Car 2" />
</form>
</body>
</html>
Unfortunately there are so many errors that it's difficult to know where to start. The first answer to your question is that the button did nothing because your code doesn't compile. I don't know why Dreamweaver didn't report an error. Chrome's developer tools was more than happy to do so.
Here's a "working" version:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var imgObj = 0;
var imgObj1 = 0;
var animate1;
function init(){
imgObj = document.getElementById('red');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
imgObj1 = document.getElementById('blue');
imgObj1.style.position = 'relative';
imgObj1.style.left = '0px';
}
function moveRight(){
var redPosition = parseInt(imgObj.style.left);
imgObj.style.left = redPosition + Math.floor((Math.random() * 20) + 1) + 'px';
var bluePosition = parseInt(imgObj.style.left);
imgObj1.style.left = bluePosition + Math.floor((Math.random() * 20) + 1) + 'px';
if (redPosition >= 1000 || bluePosition >= 1000)
{
if (redPosition >= 1000) {
alert("The Red Car has won the Race!");
}
else
{
alert("The Blue Car has won the Race!");
}
return;
}
animate1 = setTimeout(moveRight, 50);
}
</script>
</head>
<body onload = "init()">
<form>
<input type="button" value="Start" onclick="moveRight()" />
<br/><br/><br/><br><br/><br/><br/>
<img id="red" src="redcar.png" alt="Car 1"/>
<br/><br/><br/><br>
<img id="blue" src="bluecar.png" alt ="Car 2" />
</form>
</body>
</html>
I build a small function appending an element with an id and styles.
And know my question why does this code not work?
window.addEventListener("load",function(e){
var inButton = document.createElement("DIV"),
body = document.body;
inButton.id = "button";
inButton.style = function (){
height = "200px";
width = "400px";
position = "fixed";
top = "50%";
left = "50%";
marginLeft = -1*(this.width / 2);
marginTop = -1*(this.height / 2);
};
body.appendChild(inButton);
}, false);
I use the following html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<script type="text/javascript" src="js/vendor/modernizr-.8.3.min.js"></script>
</head>
<body>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
The Js Code is inside the main.js.
I checked the path again and again, but the path is totally correct.
You are not setting style property correctly. Rest of code is correct.
Here's an example
window.addEventListener("load", function(e) {
var inButton = document.createElement("DIV"),
body = document.body;
inButton.id = "button";
inButton.innerHTML = "Yahooooooooooooooo"; //For example
inButton.style.height = "200px";
inButton.style.width = "400px";
inButton.style.position = "fixed";
inButton.style.top = "50%";
inButton.style.left = "50%";
inButton.style.marginLeft = -1 * (this.width / 2);
inButton.style.marginTop = -1 * (this.height / 2);
body.appendChild(inButton);
}, false);