On button click transition for height not working - javascript

I wanted to increase the height of div on button click thus decided to use transition. But when I click on button height increases but without transition. Here is my code:
.view-all-container{
max-height: 0;
overflow-y:hidden;
transition: max-height 0.7s linear
}
.view-all-container.expanded {
max-height: 500px;
}
let btn = document.querySelector('.view-all-button');
let list = document.querySelector('.view-all-container');
btn.addEventListener('click', ()=>{
list.classList.toggle("expanded");
const expanded = list.classList.contains("expanded");
if (expanded) {
btn.innerHTML = "Hide All";
list.style.overflow = 'scroll'
list.style.overflowX= 'hidden';
} else {
btn.innerHTML = "View All";
list.classList.remove("expanded");
}
})

This works. Run the code snippet below
let btn = document.getElementById('expand-button');
let container = document.getElementById('container');
btn.addEventListener('click', () => {
container.classList.toggle("expanded");
const expanded = container.classList.contains("expanded");
if (expanded) {
btn.innerHTML = "Contract";
container.style.overflow = 'scroll';
container.style.overflowX = 'hidden';
} else {
btn.innerHTML = "Expand";
container.classList.remove("expanded");
}
})
#container {
max-height: 500;
overflow-y: hidden;
height: 50px;
border: 2px solid #000;
transition: height 1s linear;
}
#container.expanded {
height: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transition</title>
</head>
<body>
<button id='expand-button'>Click Here</button>
<div id='container'></div>
</body>
</html>

Not sure what really you are trying to do, but if you run the below code it works as expected, if your intention is to change height on button click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class='view-all-button'>Hit Me</button>
<div class='view-all-container'></div>
</body>
<style>
.view-all-container {
max-height: 500;
overflow-y: hidden;
height: 200px;
border: 2px solid #000;
transition: height 5s linear
}
.view-all-container.expanded {
height: 500px;
}
</style>
<script>
let btn = document.querySelector('.view-all-button');
let list = document.querySelector('.view-all-container');
btn.addEventListener('click', () => {
list.classList.toggle("expanded");
const expanded = list.classList.contains("expanded");
if (expanded) {
btn.innerHTML = "Hide All";
list.style.overflow = 'scroll'
list.style.overflowX = 'hidden';
} else {
btn.innerHTML = "View All";
list.classList.remove("expanded");
}
})
</script>
</html>

Related

Through javascript, how do I add a div to my html script with another div inside of it?

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);
}

how to send class data in to a button

I made a button to display a form to enter a class name in the input.
After that 1 button will exist (it is hidden after I click a button it will appear ) then after I press a Hidden button it will go to another page, but the problem is I don't know how to make the hidden button ( with data in it ) visible.
Here's my code:
const btn = document.getElementById("btn");
const btnn = document.getElementById("name").value;
btn.addEventListener('click', () => {
const form = document.getElementById("Add");
if (form.style.visibility === 'hidden') {
form.style.visibility = 'visible';
} else {
form.style.visibility = 'hidden';
}
});
btnn.addEventListener('click', () => {
const but = document.getElementById("infor");
if (but.style.visibility === 'hidden') {
but.style.visibility = 'visible';
} else {
but.style.visibility = 'hidden';
}
})
form {
visibility: hidden;
background-color: beige;
width: 60%;
height: 150px;
margin-left: 20%;
border-radius: 10px;
text-align: center;
display: inline-block;
}
.tablinks {
width: 20%;
height: 50px;
margin-top: 10%;
margin-left: 40%;
}
.btnn {
background-color: white;
}
.information {
margin-top: 5%;
}
#infor {
visibility: hidden;
}
<!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="information.css">
</head>
<body>
<div class="tab">
<button class="tablinks" id="btn">Add here</button>
</div>
<form id="Add" class="information">
<p>Class:</p>
<input type="text" placeholder="enter your class here" id="name">
<button>Add</button>
<button id="infor"></button>
</form>
</body>
</html>
Try adding this attribute to button tags inside the form, as they behave like a submit button.
<button type="button"></button>

How to enable spinner in javascript

I typed the html css code of the spinner but in javascript I can not activate the spin button
I want the rotate button to be activated with JavaScript but I do not know how
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Spinner</title>
<link rel="stylesheet" type="text/css" href="style.css" >
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>spinner</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="wheel">
<div class="spinner" id="spinner">
<div class="spin">
<span class="one"><strong>1</strong></span>
<span class="two"><strong>2</strong></span>
<span class="three"><strong>3</strong></span>
<span class="four"><strong>4</strong></span>
<span class="five"><strong>5</strong></span>
<span class="six"><strong>8</strong></span>
<span class="seven"><strong>7</strong></span>
<span class="eight"><strong>6</strong></span>
</div>
</div>
</div>
<button class="rotatewheel" onclick="magicWheel()">Rotate</button>
<script src="script.js"></script>
</body>
</html>
Its codes are also provided
If you want make a spinner, maybe you can take a look at How TO - CSS Loader
You also can make a JavaScirpt-Control spinner yourself.
I made a Lock-Screen loader by use a div to cover the whole screen.
Maybe you can refer it.
Like this.
var loader = loader || {};
loader.show = async function (color, speed, text) {
if (!color) {
color = `#000000`;
} else {
const regexRule = /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\([^\)]*\)/gi;
let match = color.match(regexRule);
if (!match) {
color = `#000000`;
} else {
color = match[0];
}
}
if (!speed) {
speed = 2;
}
/* Set the style */
let css = "";
css += `.centered{
position: fixed;
top: 50%;
left: 50%;
margin-top: -6.25em;
margin-left: -6.25em;
z-index: 20;
}`;
css += `.loader{
border:10px solid #f3f3f3;
border-top:10px solid ${color};
margin: auto;
animation: spin ${speed}s linear infinite;
width:100px;
height:100px;
border-radius:50%;
opacity: 1.0;
}`;
css += `.textDiv{
text-align: center;
margin-top: 0.5em;
padding: 0.5em;
border-radius:0.25em;
/*border: solid 1px black;*/
background-color: #71836b;
color: white;
}`;
css += `.background{
background-color: #414141;
opacity: 0.5;
width:100%;
height:100%;
left: 0;
top: 0;
position: fixed;
z-index: 10;
}`;
css += `#keyframes spin{
0% { transform: rotate(0deg); }
100% {transform: rotate(360deg);}
}`;
let style = document.createElement("style");
style.innerHTML = css;
style.id = "loaderStyleId";
document.head.appendChild(style);
let topBody = document.body;
let bodyContent = topBody.innerHTML;
let backgroundDiv = document.createElement("div");
backgroundDiv.setAttribute("id", "backgroundDiv");
backgroundDiv.classList.add("background");
topBody.appendChild(backgroundDiv);
let loaderDiv = document.createElement("div");
loaderDiv.setAttribute("id", "loaderDiv");
loaderDiv.classList.add("centered");
let spinner = document.createElement("div");
spinner.classList.add("loader");
loaderDiv.appendChild(spinner);
if (text) {
let textDiv = document.createElement("div");
textDiv.innerText = text;
textDiv.classList.add("textDiv");
loaderDiv.appendChild(textDiv);
}
topBody.appendChild(loaderDiv);
};
loader.close = function () {
let doc = document;
let removeDiv = doc.getElementById("loaderDiv");
removeDiv.remove();
let backgroundDiv = doc.getElementById("backgroundDiv");
backgroundDiv.remove();
let loaderStyleId = doc.getElementById("loaderStyleId");
loaderStyleId.remove();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>take a try to click here, when loader show</button>
<script>
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
</script>
<script>
docReady(()=>{
loader.show();
//loader.close();
})
</script>
An example on Codepen, you can edit your spinner yourself.
Library
Or use npm to download the package.

Need help making an image appear on click

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"/>

If and Else sentences, on first click

Hi I made this simple animation, when you click on the animate button, the function does not work the first time but it works the second time, how can it be? And what is the solution?
const fadeInOut = () => {
const divElement = document.getElementById('demo');
if (divElement.style.opacity == 0) {
divElement.style.opacity = 1;
} else {
divElement.style.opacity = 0;
}
};
#demo {
width: 300px;
height: 300px;
background: burlywood;
opacity: 1;
display: block;
transition: all 1s;
}
<!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>
<script src="function.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="demo"></div>
<button onclick="fadeInOut()">Animate</button>
</body>
</html>
It is because .style checks for an inline style, not the one you set in an external CSS file. You can go around this by setting an initial inline style to your element:
const fadeInOut = () => {
const divElement = document.getElementById('demo');
if (divElement.style.opacity == 0) {
divElement.style.opacity = 1;
} else {
divElement.style.opacity = 0;
}
};
#demo {
width: 300px;
height: 300px;
background: burlywood;
display: block;
transition: all 1s;
}
<div id="demo" style="opacity: 1"></div>
<button onclick="fadeInOut()">Animate</button>

Categories

Resources