i am trying to swap the path of lottie / bodymovin on button click,
it works if i dont populate the animPath parameter first, so it seems like the click function cannot overwrite the parameter if there is already a path.
its like it loads in the data at the start and then thats it, i noticed the same thing with updating the speed, i had to call the setSpeed parameter after changing the speed to get it to update.
ive hunted the internet and can;t seem to find a parameter to setPath or something similar
does anyone know of a way to swap the path on click?
here is my code
var anim
var animationSpeed = 2;
var button = document.getElementById("button");
function runAnimation(animPath) {
console.log("lottie is loaded");
var animData = {
container: document.getElementById("test"),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: animPath
};
anim = bodymovin.loadAnimation(animData);
anim.setSpeed(animationSpeed);
}
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_lef8tmad.json");
$( "button" ).click(function() {
animationSpeed = 1;
anim.setSpeed(animationSpeed);
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_vuxs5lpt.json");
console.log("path 2 loaded");
});
body {
background-color: #FDC800;
overflow: hidden;
text-align: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#animationWindow {
width: 100%;
height: 100%;
}
#button{
width: 100px;
height:40px;
z-index: 10;
position: absolute;
top:200px;
left:200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lottie swap</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.4/lottie.min.js" integrity="sha512-ilxj730331yM7NbrJAICVJcRmPFErDqQhXJcn+PLbkXdE031JJbcK87Wt4VbAK+YY6/67L+N8p7KdzGoaRjsTg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head><script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-player/1.5.7/lottie-player.js" integrity="sha512-wUgyNk7aI5qo1G294znyaFsJi8JbXTyTn7QEViCh+f021/yo6aKHPw3GX19txyhfiLQIB/duQcSKADt1GqE+KA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<div id="test">
</div>
<button id="button" >Click me</button>
</body>
</html>
<!-- Link to the script-->
<script type="module" src="js/script.js"></script>
Related
I'm try to rotate an element but when choosing another element it's all rotate at the same time.
So I need to know how to rotate an element and it would be nice if you guys have a similar system. Because I want to learn more about this kind of system. Which is very necessary and important to me to study and work.
$(document).ready(function() {
var container = document.querySelector(".container");
var rotate = document.createElement("div");
rotate.className = "rotate";
//create Element
$("#add").click(function() {
container.appendChild(addElement());
addEvent();
});
const addElement = () => {
var element = document.createElement("div");
element.className = "resizable";
return element;
}
//add event
function addEvent() {
$(".resizable").click(function(e) {
if (e.currentTarget === this) {
$(this).append(rotate);
$(this).resizable({
handles: 'ne, se, sw, nw'
});
$(this).draggable().rotatable({
handle: $('.rotate')
});
}
});
}
});
.resizable {
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
user-select: none;
z-index: 0;
}
.rotate {
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
top: -30px;
left: calc(50% - 5px);
cursor: move;
}
<!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>jquery</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<button class="add" id="add">add</button> //for add element
<button class="save" id="save">save</button> //for save size and position
<div class="container"></div>
</body>
</html>
Thanks everyone in advance for helping me.
I'm trying to embed a Vimeo video on a mobile website. I want the users to see the Vimeo controls every time without scrolling in any direction. At the same time, the video needs to be centred (horizontally and vertically) on the screen.
Below is my current implementation, it is not working as expected.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=0 minimum-scale=1">
<style>
.embed-responsive-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body style="background-color:green">
<div class="embed-responsive embed-responsive-16by9">
<div id="video" style="background-color:red" class="embed-responsive-item"></div>
</div>
<script id="vimeo" async src="https://player.vimeo.com/api/player.js"></script>
<script>
function loadVimeoVideo() {
var options = {
id: '253989945',
transparent: 1,
}
var player = new Vimeo.Player('video', options)
}
var script = document.querySelector('#vimeo');
script.addEventListener('load', function () {
loadVimeoVideo();
});
</script>
</body>
</html>
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>
I want to make a loading animation for my webpage which will take 8-10 sec to load using JavaScript or Ajax(Which I don't know)
The loading animation is a progress bar
Which I want to stop for every 1 sec for increment of 10% eg( https://codepen.io/gustitammam/pen/RRXGdj )
Bootstrap is not welcomed and I don't want text and percentage on it
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="D:\PORTFOLIO\master.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.js" integrity="sha512-qsjFwnCEe/k1YLJDkiRqDgKb+Eq+35xdoeptV7qfI7P6G/kajIF0R6d/9SiOxSkU/aNmHzuipOEYaTUHCJUIeQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js" integrity="sha512-oHBLR38hkpOtf4dW75gdfO7VhEKg2fsitvHZYHZjObc4BPKou2PGenyxA5ZJ8CCqWytBx5wpiSqwVEBy84b7tw==" crossorigin="anonymous"></script>
</head>
<body>
<div id="myprogress">
<div id="mybar">
<span id="incvalue">1%</span>
</div>
</div>
<br> <button onclick="move()">ClickMe</button>
<script>
const move = () => {
var elem = document.getElementById("mybar");
var width = 1;
var id = setInterval(frame, 10)
function frame(){
if(width >= 100){
clearInterval(id);
}else{
width++;
elem.style.width = width + "%";
document.getElementById("incvalue").innerHTML = width + "%";
}
}
}
</script>
</body>
</html>
CSS
html{
scroll-behavior: smooth;
}
body{
background: #181818;
color: #f4eee8;
}
#myprogress{
width: 45%;
background: #181818;
margin: auto;
}
#mybar{
width: 1%;
background: white;
color: white;
text-align: center;
}
In the example you cited, you can just comment out the JS lines where the following fields are set:
.attr and .text
Regarding your desire to omit Bootstrap, however, you are not asking a simple technical question but proposing that somebody write a whole program fragment for you, which is generally not the intended purpose of Stack overflow.
Actually I didn't do it but I don't know his Stack ID so #0_0#1045(From Discord)
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="D:\PORTFOLIO\master.css">
</head>
<body>
<h3>Dynamic Progress Bar</h3>
<p>Running progress bar from 0% to 100% in 10 seconds</p>
<div class="progress">
<div class="current-progress">
</div>
</div>
</div>
<script src="master.js"></script>
</body>
</html>
CSS
html{
scroll-behavior: smooth;
}
body{
background: #181818;
color: #f4eee8;
height: 100vh;
width: 100vw;
}
.progress {
position: relative;
margin-top: 20px;
height: 20px;
width: 700px;
background-color: #181818;
}
.current-progress {
height: 100%;
width: 0%;
background-color: white;
text-align: center;
transition: all 0.3s;
}
JS
let progressValue = 0;
const progressBar = document.querySelector(".current-progress");
progressBar.style.width = `${progressValue}%`;
const timer = setInterval(() => {
if (progressValue < 100) {
progressValue += 10;
progressBar.style.width = `${progressValue}%`;
}
if (progressValue === 100) {
clearInterval(timer);
}
}, 1000);
Finally Solved!!!
I have some code to get the size of the body on screen during a window resize event and use this elsewhere, however for some reason the size that is determined is always the size before the resizing:
$(document).on('ready', function () {
initResize();
});
function initResize() {
$(window).on('resize', doResize).trigger('resize');
};
function doResize() {
var wh = $('.game').height();
var ww = $('.game').width();
console.log("game " + ww +"x" +wh);
}
and the console output always returns the same data, yet if I change the selector to $(window) it changes as the window resizes. Can someone help please?
the html is very simple:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/myStyle.css" /
<script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/init.js"></script>
</head>
<body>
<section class="game">
</section>
</body>
</html>
and the css:
#charset "utf-8";
* {
padding: 0;
margin: 0;
border: none;
outline: none;
}
html {
font-size: 62.5%;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}