I am trying to append a new child when user clicks on a button. The new child is already defined with few CSS properties. Is it possible to do so ? I have tried a few codes, the best i could do is -
var body = document.querySelector('body');
var bubbles = document.createElement("span")
function a1click(){
var size = Math.random() * 100;
bubbles.style.width = 100 + size+'px';
bubbles.style.height = 100 + size+'px';
body.appendChild(bubbles);
}
*{
margin: 0;
padding: 0;
}
#a1{
position: relative;
top: 250px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: black;
animation: tweek 1s linear;
transform-origin: top;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
This was good uptil here but the problem is that when we click button the box is getting appended continously, i want it to append only once if the button is clicked once if twice then again and so on.. Please help me..Any help will be appreciated.
The problem is here:
animation: tweek 1s linear infinite;
The "infinite" is an attribute called animation-iteration-count. It defaults to 1, but since you have it set to infinite, it will continue to show this animation looping forever.
I have found the correct answer thanks to #iamjane who gave me the idea..
I have added timeout funtion which removes the element after a specific time..
var body = document.querySelector('body');
var bubbles = document.createElement("span")
function a1click(){
var size = Math.random() * 100;
bubbles.style.width = 100 + size+'px';
bubbles.style.height = 100 + size+'px';
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
#a1{
position: relative;
top: 250px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: black;
animation: tweek 1s linear;
transform-origin: top;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
Related
Can you please tell me how to make a horizontal animation that works synchronously with the scroll?
I made a sample, but there is a drawback - the event has a start and end point, and I want to make a permanent animation:
const targetTx = document.querySelector('h1');
function animateTx() {
if (document.documentElement.scrollTop > 50) {
targetTx.classList.add('active');
} else {
targetTx.classList.remove('active');
}
}
window.onscroll = function() {animateTx()};
section {
height: 600px;
border-bottom: solid 1px #000;
overflow: hidden;
}
h1 {
display: block;
font-size: 10rem;
color: #999;
white-space: nowrap;
transition: 0.5s;
}
h1.active {
margin-left: -50%;
transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<h1>TEST TEXT</h1>
</section>
<section></section>
</body>
</html>
Thank you in advance!
Use css animations:
const targetTx = document.querySelector('h1');
function animateTx() {
if (document.documentElement.scrollTop > 50) {
targetTx.classList.add('slide-anim');
} else {
targetTx.classList.remove('slide-anim');
}
}
window.onscroll = function() {animateTx()};
section {
height: 600px;
border-bottom: solid 1px #000;
overflow: hidden;
}
h1 {
display: block;
font-size: 10rem;
color: #999;
white-space: nowrap;
}
.slide-anim {
animation: slide 3s linear infinite;
}
#keyframes slide {
0% {
margin-left: 0;
}
25% {
margin-left: -50%;
}
50% {
margin-left: 0%;
}
75% {
margin-left: 50%;
}
100% {
margin-left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<h1>TEST TEXT</h1>
</section>
<section></section>
</body>
</html>
I copied and adapted this toggleable switch off w3schools and the major change I made is the text that changes when toggled. How can I access the value of the text ('1x' and '2x') in my javascript file for an if statement (this can be also a console log just as an example)? I'm still new to CSS and HTML.
.switch{
position: relative;
display: inline-block;
top: 33.75%;
left: 35%;
width: 148px;
height: 37.5px;
z-index: 1;
border-width: 5px;
/* visibility: hidden; */
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #10185c;
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 29px;
width: 29px;
left: 4px;
bottom: 4px;
background-color: white;
color:#050A30;
font-size: 18px;
text-align: center;
content: '1x';
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1e2a82;
}
input:checked + .slider:before {
-webkit-transform: translateX(112px);
-ms-transform: translateX(112px);
transform: translateX(112px);
content: '2x';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<script src="script.js"></script>
</body>
</html>
If all you want is to read the value of the text, and not alter it, you can get the computed styles and extract the content from there. This should work for your if statment. Try this example that prints it to the console on every switch:
.switch{
position: relative;
display: inline-block;
top: 33.75%;
left: 35%;
width: 148px;
height: 37.5px;
z-index: 1;
border-width: 5px;
/* visibility: hidden; */
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #10185c;
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 29px;
width: 29px;
left: 4px;
bottom: 4px;
background-color: white;
color:#050A30;
font-size: 18px;
text-align: center;
content: '1x';
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1e2a82;
}
input:checked + .slider:before {
-webkit-transform: translateX(112px);
-ms-transform: translateX(112px);
transform: translateX(112px);
content: '2x';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<label class="switch">
<input type="checkbox" id="checkbox">
<span class="slider"></span>
</label>
<script>
const printContent = () => {
let slider = document.querySelector('.slider')
let computedStyle = getComputedStyle(slider, ":before")
let text = computedStyle.getPropertyValue('content')
console.log(text)
}
document.getElementById("checkbox").onclick = printContent
</script>
</body>
</html>
See this post about How to get a DOM element's ::before content with JavaScript?
1x and 2x are contents of the slider:before on your CSS styles and CSS:after and :before rules aren't part of the DOM, and therefore can't be altered using JavaScript's DOM methods.
so, you should change your text toggle switch method or use "checked" status of input for an if statement.
e.g.
<script>
if (document.getElementById('input').checked) {
alert("checked");
} else {
alert("You didn't check it! ");
}
</script>
I have the following game and the css green block is failing to jump on click. I can't seem to spot my error.
As you can see I have added the onclick event in the HTML and as far as I know the css animation is correctly coded in the style file. I want the character to jump calling the CSS animation, and ideally avoid a JScript function at this stage (or have both alternatives to see which is simpler for young students)
Can anyone spot and point out the error please.
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 4px solid #f74cbc
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 10px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
#keyframes moveenemy {
0% {
top: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Battle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TG</h1>
<p>Avoid the red</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Update:
I know I could use a Jscript function like the below, but even that does not work?
JavaScript tried below (in the script.js)
function jump(){
if(character.classlist!="animate"){
character.classList.add("animate");
}
setTimeout(function(){
character.classList.remove("animate");
},500);
}
Ideally, as mentioned, I want the simplest possible solution. Could both errors be pointed out (solution provided) so both alternatives are present in the answer. Which is the recommended way?
You could toggle a CSS class with javascript that executes your jump animation. You can't reference a CSS animation directly via JS
// Get your character div
const character = document.getElementById('character');
// Create "jump" animation that you referenced in the "onclick".
function jump() {
// Check if the animation is already started
if(!character.classList.contains('jumping')){
// Add the "jumping" class
character.classList.add('jumping');
// After "500 ms" remove the "jumping" class, duration must match your CSS animation length
setTimeout(function() {
character.classList.remove('jumping');
}, 500);
}
}
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 4px solid #f74cbc
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
}
/* Moved the animation to it's own class so we can toggle it */
#character.jumping {
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 10px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
#keyframes moveenemy {
0% {
top: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Battle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TG</h1>
<p>Avoid the red</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
I want to convert a CSS effect to a javascript code.
I want to automatically leave a section when the page is loaded. That is, once the board is loaded with the same effect round one div. You can go to Hover Me to see the CSS effect.
If you can not use the library, I want to see what happens in the code
Can I help you add my JavaScript / jQuery code now?
Thanks
html{
background: #080808;
}
div {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
color: #fff;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
div::before, div::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
}
.meet:hover {
color: #fbca67;
}
.meet::after {
top: 0;
left: 0;
}
.meet:hover::before {
border-top-color: #fbca67;
border-right-color: #fbca67;
}
.meet:hover::after {
border-bottom-color: #fbca67;
border-left-color: #fbca67;
transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/uikit-rtl.min.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<script src="js/jquery.js"></script>
</head>
<body id="top">
<div onload="loading()" id="iki" class="draw meet">Hover Me</div>
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
</body>
</html>
Here is one solution for this,
1) Change all your :hover to .hover
2) Then add this class using JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('.draw')[0].classList.add('hover');
});
Found a similar answer How to execute CSS3 animation onLoad instead of hover?
My webpage takes anywhere from .5sec - 3 seconds to load completely. I was just wondering if there was a way to have an overlay to show in till the page was loaded. When the page finished loading, I would want this overlay to hide. Something like a progress bar or a .gif. I'm using the razor engine in MVC3.
Three things I have done to make this work: PS, Sorry for poor code blocks, new to all of this.
HTML Div:
<div id ="blocker">
<div>Loading...</div></div>
CSS:
#blocker{position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000;
opacity: 0.3;
display: none;
}
#blocker div
{ position: absolute;
top: 50%;
left: 50%;
width: 5em;
height: 2em;
margin: -1em 0 0 -2.5em;
color: #fff;
font-weight: bold;
}
JQuery before the Ajax gets called:
$("#blocker").show();
$.ajax`
What I do is:
var loadingTimeout;
$j('body').ajaxStart(function () {
loadingTimeout= setTimeout(function () {
$("#blocker").show();
}, 1000);
});
$j('body').ajaxStop(function () {
clearTimeout(loadingTimeout);
$("#blocker").hide();
});
On every ajaxcall made in your page, your blocker gets displayed after 1 second. When the client gets the resonse, the block gets hidden again. What do yout think?
Maybe this one might help you
$(document).ready(function() {
$('button').click(function(){
$('body').addClass('noscroll');
document.querySelector("#overlay").classList.remove('is-visible');
});
});
#overlay {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
opacity: .80;
}
button {
margin: 40px;
padding: 5px 20px;
cursor: pointer;
}
.spinner {
margin: 0 auto;
height: 64px;
width: 64px;
animation: rotate 0.8s infinite linear;
border: 5px solid firebrick;
border-right-color: transparent;
border-radius: 50%;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.is-visible {
display: none;
}
.noscroll {
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<button>Load Spinner</button>
<div id="overlay" class="is-visible">
<div class="spinner"></div>
<br/>
Loading...
</div>
</body>
</html>