I am making a thing where when you click on the hidden image it appears. Every time that I do it, though, the image just stays hidden. I know that I am actually clicking the image because I made it so that it follows under my cursor. It also works in reverse. If the image is visible and I click on it it turns invisible.
Here is my HTML:
document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let boom = document.getElementById('boom');
let left = e.pageX;
let top = e.pageY;
boom.style.left = left + 'px';
boom.style.top = top + 'px';
});
function animation(){
var boom = document.getElementById("boom");
boom.style.display = "none";
document.getElementById("boom").src = "file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Salamon.png";
}
body {
background-color: #000000;
}
header {
background: grey;
padding: 10px;
margin: 0px;
font-size: 13px
}
#boom{
display: block;
position: absolute;
transform: translate(-50%,-50%);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Boom! Salamon</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<h2 style="color: white; text-align: center">Boom! Salamon.<br>Click in the area below to witness the magic!</h2>
</header>
<img onclick='animation()' id="boom" src='file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Boom!.png' height="250" width="250"></img>
<script src="app.js"></script>
</body>
</html>
What's happening?
yes as #Abin mentioned you have not added any code to unhide it I have modified your
html and js file to add this functionality like when you click on text it will be visible again.
Note: i have added that visible condition on click of header text but you can define it anywhere.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Styles.css">
<title>Boom! Salamon</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<h2 id='clickme' style="color: white; text-align: center">Boom! Salamon.<br>Click here to witness the magic!</h2>
</header>
<img onclick='animation()' id="boom" src='file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Boom!.png' height="250" width="250"></img>
<script src="app.js"></script>
</body>
</html>
app.js
document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let boom = document.getElementById('boom');
let left = e.pageX;
let top = e.pageY;
boom.style.left = left + 'px';
boom.style.top = top + 'px';
});
function animation(){
var boom = document.getElementById("boom");
boom.style.visibility = 'hidden';
document.getElementById("boom").src = 'file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Salamon.png';
}
document.getElementById("clickme").onclick = function() {
boom.style.visibility = 'visible';
}
in above i have used pure js.
There was nothing in the code you have provided to unhide the image, I have added a sample code that works as per your req. Click on the text, and the image will appear on the bottom.
/* document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let boom = document.getElementById('boom');
let left = e.pageX;
let top = e.pageY;
boom.style.left = left + 'px';
boom.style.top = top + 'px';
});
*/
var clickEl = document.getElementById('click-el')
clickEl.addEventListener('click', function(){
var imgEl = document.getElementById('boom');
imgEl.style.display = 'block';
})
/*
function animation(){
var boom = document.getElementById("boom");
boom.style.display = "none";
document.getElementById("boom").src = "file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Salamon.png";
} */
body {
background-color: #000000;
}
header {
background: grey;
padding: 10px;
margin: 0px;
font-size: 13px
}
#boom{
display: none;
}
<header>
<h2 id='click-el' style="color: white; text-align: center">Boom! Salamon.<br>Click here to witness the magic!</h2>
</header>
<img onclick='animation()' id="boom" src='https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg' height="250" width="250"/>
Related
I am trying to create a notes app where the user can press a button, type text, which will spawn a box consisting of the text, which can be stretched and dragged around the screen. The part I am having trouble on is when the button is pressed and the text is inserted, the first div will spawn, but the child div isn't being spawned properly and acts strange.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Filler/Style.css">
</head>
<body>
<button type="button" id="button">Add Filler</button>
<script src="Sketch.js"></script>
<script src="Filler/Sketch.js"></script>
<script src="Sidebar/Sketch.js"></script>
</body>
</html>
CSS
#mydiv {
position: absolute;
background-color: pink;
border: 1px solid black;
width: 200px;
height: 200px;
z-index: 4;
/* div able to be resised and scroll bar will be added if contents is too long .hidden*/
resize: both;
overflow: scroll;
/* create rounded borders */
border-radius: 15px;
-moz-border-radius: 15px;
text-align: center;
}
#mydivheader {
cursor: move;
z-index: 10;
}
Javascript
var myButton = document.getElementById("button");
myButton.addEventListener("click", clicked);
function clicked(){
const content = prompt("Div Contents");
const div = document.createElement('div');
const div2 = document.createElement('div');
div.id = "mydiv";
div.textContent = content;
div2.id = "mydivheader";
div2.style = "width: 100%; height: 15px;";
div2.textContent = content;
document.body.append(div);
div.appendChild(div2);
}
i didn't understood ur question properly.
is that the problem with content being generated twice. like one inside the parent div and another inside the child.
if so try this
function clicked(){
const content = prompt("Div Contents");
const div = document.createElement('div');
const div2 = document.createElement('div');
div.id = "mydiv";
div2.id = "mydivheader";
div2.style = "width: 100%; height: 15px;";
div2.textContent = content;
document.body.append(div);
div.appendChild(div2);
}
I'm working on an Etch A Sketch app for The Odin Project and I want to adjust one of the requirements where all I need to do is move the mouse on screen as a continuous stroke where each pixel touched on mouseover is filled, which is what's happening right now with my code.
What I want to change is the mouseover on my tile EventListener where it's really a continuous stroke on mousedown. I did try changing the e.target command in the setTiles function to toggle after changing the tile.addEventListener to mousedown, but it only works on each press of the left mouse button.
I'm trying to figure out a way to make this continuous on mousedown instead of using mouseover. I've included the code I have so far in the question.
const container = document.querySelector('#container');
const grid = document.querySelector('#grid');
const userInput = document.querySelector('#user-input');
let penDown = false;
grid.style.fontSize = '1em';
// Set pixel width and height
let wdt = '1em';
let hgt = '1em';
// Ask the user for the number of tiles for the sketch grid
function getUserInput() {
let input = parseInt(prompt(`Please enter the grid size you'd like`));
input <= 100 || !isNaN(input)
? createSketchGrid(input)
: alert('Please enter a valid number less than or equal to 100.');
}
// Event listener to create tiles in mouseover
function setTiles(e) {
e.target.classList.add('fill');
}
// function deleteTiles(e) {
// e.target.classList.toggle('fill');
// }
container.addEventListener('mousedown', function () {
penDown = true;
});
container.addEventListener('mouseup', function () {
penDown = false;
});
// Create the grid
function createSketchGrid(tiles) {
let gridSize = tiles * tiles;
for (let i = 0; i < gridSize; i++) {
let tile = document.createElement('div');
tile.style.width = wdt;
tile.style.height = hgt;
grid.appendChild(tile);
// tile.addEventListener('mouseover', setTiles, false);
if ((penDown === true)) {
tile.addEventListener('mousemove', setTiles);
}
}
}
userInput.addEventListener('click', getUserInput);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
h1 {
font-size: 3rem;
}
.grid {
/* font-size: 1.6rem; */
display: flex;
flex-wrap: wrap;
gap: 0.1em;
border: 2px solid black;
background-color: lightgrey;
flex: 0 0 32em;
}
.fill {
flex-wrap: wrap;
background-color: black;
}
<!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>Etch A Sketch</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script type="text/javascript" src="js/main.js" defer></script>
</head>
<body>
<h1 class="title">Etch A Sketch</h1>
<div id="container" class="container">
<button id="user-input" class="btn user-input" value="Grid Size">Grid Size</button>
<div id="grid" class="grid">
</div>
</div>
</body>
</html>
I am actually trying to create a game when someone hover on the gray area then it will ask if he wants to play if he confirm then random 5 div will appear in some different area of that parent div.
at first there should be only 1 big div. when someone will hover a mouse there will be option if he wants to play the game. then the big div will generate 5 small divs inside it. ( next i have delete if someone click small divs and need to track point, so its a small game for just my learning perpose
but i stuck here because i can't generate divs in random position. if you run my code you will see 3 divs verticaly appear when you confirm to play
function hoverinside(x) {
let answer = confirm("Do you want to play the game?");
if (answer == true) {
alert("Enjoy the game");
myFunction();
}
else {
alert("If you want to play just hover on the gray area again");
location.reload();
}
}
function myFunction() {
var element = document.createElement('div');
element.style.cssText = "width:55px; height:55px; background:green;";
document.body.appendChild(element);
var div1 = document.getElementById("square");
div1.insertBefore(element, div1.childNodes[5])
var element2 = document.createElement('div');
element2.style.cssText = "width:55px; height:55px; background:yellow;"
document.body.appendChild(element2);
var div2 = document.getElementById("square");
div2.insertBefore(element2, div2.childNodes[5])
var element3 = document.createElement('div');
element3.style.cssText = "width:55px; height:55px; background:red;";
document.body.appendChild(element3);
var div3 = document.getElementById("square");
div3.insertBefore(element3, div3.childNodes[5])
}
function removediv1() {
var element = document.getElementById("div2");
element.classList.remove("div2");
}
h1 {
font-style: bold;
color: brown;
}
#square{
height: 350px;
width: 700px;
background-color: rgb(170, 168, 168);
border: brown;
border-style: solid;
}
#square1{
height: 35px;
width: 70px;
background-color: rgb(245, 10, 10);
}
<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">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="gamejs.js"></script>
<title>Game</title>
</head>
<body onload=OpenInNewtab(google.com)>
<h1>Game:</h1>
<p>we will create the game over here. no problem just wait and chill and play with us.we will create the game over here. no problem just wait and chill and play with us.</p>
<h1>Points:</h1>
<br>
<div id="square" onmouseover="hoverinside(this)" >
<div id="child1"> </div>
</div>
</body>
</html>
this is my code
You can do something like this.
Steps
Create a child div
Add id to itnot necessay.
For distinguishing, add different colors
Make the child div as absolute
Add random left & right position styling to Child Div (This will assure the randomness)
Updated the code, so that child div be be confined inside parent div.
You can refer to this codepen: https://codepen.io/hackhimanshu1024/pen/JjrjOjK
Note: I am not adding hover and deleting events. You can handle it as per your code.
Note: Add other styles as per your requirements.
const parentBody = document.getElementById("root");
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
let i = 0, interval
function addDiv(cnt = 5) {
const div = document.createElement('div');
div.id = 'div';
div.style.top = `${Math.random() * 100}%`;
div.style.left = `${Math.random() * 100}%`;
div.style.backgroundColor = `rgb(${Math.random() * 100},${Math.random() * 100},${Math.random() * 100})`;
parentBody.appendChild(div);
i++;
if (i === cnt) clearInterval(interval);
}
function intervalDiv(){
i=0;
interval = setInterval(addDiv, 1000);
}
function multipleDiv(){
i=0;
while(i<5){
addDiv();
}
}
btn1.addEventListener('click', intervalDiv);
btn2.addEventListener('click', multipleDiv);
*{
box-sizing: border-box;
padding:0;
margin:0;
}
body{
height:100vh;
max-height:100vh;
max-width:100vw;
padding: 100px;
}
#root{
height:100%;
max-height:100%;
position: relative;
}
#btn1, #btn2{
position:relative;
z-index:200;
}
#div {
width: 200px;
height: 200px;
position: absolute;
transform: translate(-50%,-50%);
}
<html>
<body>
<div id="root">
<button id="btn1">CLICK ME on Interval</button>
<button id="btn2">CLICK ME for 5 times</button>
</div>
</body>
</html>
I have created a button which should shift the window's Y to "BOX - 5" div's Y middle through onclick. So in other words I want to set the "Box - 5" div in the middle of the window. I have tried many methods using window.scrollTo and using elements.innerHeight/2, but I still cannot center the element to the middle of the window/screen. Please Help.
I wish to only use Javascript, but if its not possible with it then I would accept jQuery script.
index.html:
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.id = "box";
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll("#box")[4];
/*
NEED HELP HERE
*/
}
body {
margin: 0;
}
#box {
position: relative;
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
Updated your snippet as below. You can use DOM element property offsetTop to check its Y position and use window.scroll to scroll the view to that element. Another sidenote, it's better to not assign the same id to multiple elements, so I change the id property to class and added identifier _{index} for the class name.
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.className += "box _" + (y+1);
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll(".box._5")[0];
if (box_5) {
// scroll the window view to the element
window.scroll({
top: box_5.offsetTop,
behavior: 'smooth',
})
}
}
body {
margin: 0;
}
.box {
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
I want to dynamically create 6 boxes when the page is loaded. They should be inline-block, so eventually it will look like 3 lines, with 2 boxes on each line.
I tried the code below without any JavaScript (just used some static HTML and CSS), and it seemed to work fine.
Generally, the script looks fine to me -- however, it does nothing. What am I doing wrong? Is it something about the order of the CSS and the JavaScript?
style1.css:
* {
margin:0;
padding:0;
}
header,section,nav,aside,footer{
display:block;
}
.wrapper{
position: relative;
height: 2150px;
width: 900px;
background-color: #336b98;
margin: 0 auto;
}
section#contentSection_layout3{
position: absolute;
top:193px;
height: 1957px;
width: 900px;
border-right: solid 1px #FFF;
}
HTML & JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="includes/style1.css">
<script src="includes/JavaScript.js"></script>
<title> EX </title>
<script>
window.onload = function(){
var boxesNum = 6;
for(var i = 0; i < boxesNum; i++){
var rect = new rect();
rect.setAttribute('display', 'inline-block');
rect.setAttribute('margin-left', '200');
rect.setAttribute('margin-top', '100');
rect.setAttribute('height', '150');
rect.setAttribute('width', '150');
rect.setAttribute('background-color', '#FFF');
document.getElementById('contentSection_layout3').appendChild(rect);
}
};
</script>
</head>
<body>
<div class="wrapper">
<section id="contentSection_layout3"></section>
</div>
</body>
</html>
var rect = new rect();
Unless you have defined rect elsewhere, you want:
var rect = document.createElement('div');
Also, setAttribute is not for styles, style is for styles.
rect.style.display = 'inline-block';
rect.style.marginLeft '200px';
rect.style.marginTop = '100px';
rect.style.height = '150px';
rect.style.width = '150px';
rect.style.backgroundColor = '#FFF';
Also, don't forget your pxs.