how to translate img from its position on button click? - javascript

I am trying to translate my image from it position to some pixel for some time (example 5 sec).on button click
could you please suggest how to do this ? I am using translateX but not working. how to give time here ?
document.querySelector("#img").style.translateX = "-100px";
here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.abc {
width: 400px;
height: 400px;
background-color: red;
}
.img {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("./a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
opacity: 0.4;
}
</style>
</head>
<body>
<div class="abc">
<img src="./a.png" class="img" id="img" />
hello
</div>
<button onclick="pre()">Pre</button>
<button onclick="next()">Next</button>
<script>
function next() {
document.querySelector("#img").style.translateX = "-100px";
}
function pre() {
document.querySelector("#img").style.translateX = "100px";
}
</script>
</body>
</html>
https://codesandbox.io/s/ancient-cookies-ewepg?file=/index.html:0-1056

const img = document.querySelector("#img");
function next() {
img.classList.remove("horizTranslateReverse");
img.classList.add("horizTranslate");
}
function pre() {
img.classList.remove("horizTranslate");
img.classList.add("horizTranslateReverse");
}
.abc {
width: 400px;
height: 400px;
background-color: red;
}
.img {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("https://images.unsplash.com/photo-1622515658990-017acdeeade3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=282&q=80 282w");
background-size: 100% 100%;
width: 50%;
height: 50vh;
opacity: 0.4;
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
}
.img.horizTranslate {
margin-left: 50% !important;
}
.img.horizTranslateReverse {
margin-left: 0% !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div class="abc">
<img src="https://images.unsplash.com/photo-1622515658990-017acdeeade3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=282&q=80 282w" class="img" id="img" />
hello
</div>
<button onclick="pre()">Pre</button>
<button onclick="next()">Next</button>
</body>
</html>

Specify transition-duration in the style of image.
The correct way to specify translate is:
document.querySelector("#img").style.transform = "translateX(100px)";
Here's the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.abc {
width: 400px;
height: 400px;
background-color: red;
}
.img {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-color: green;
background-image: url("./a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
opacity: 0.4;
transition-duration: 2s;
}
</style>
</head>
<body>
<div class="abc">
<img src="./a.png" class="img" id="img" />
hello
</div>
<button onclick="pre()">Pre</button>
<button onclick="next()">Next</button>
<script>
let translateNextCount = 1;
function next() {
document.querySelector("#img").style.transform = `translateX(${translateNextCount * 100}px)`;
translateNextCount++;
}
function pre() {
document.querySelector("#img").style.transform = "translateX(-100px)";
}
</script>
</body>
</html>

Related

How to reverse css keyfrmames animation by only using javascript? [duplicate]

This question already has answers here:
How do I re-trigger a WebKit CSS animation via JavaScript?
(9 answers)
Closed 4 months ago.
document.querySelector(".fall").addEventListener("click", function () {
document.querySelector(".ball").style.animation = "anim 2s forwards";
});
//my try below
document.querySelector(".up").addEventListener("click", function () {
document.querySelector(".ball").style.animation = "anim 2s forwards reverse";
});
body{
display: flex;
justify-content: center;
}
button{
margin-top: 150px;
margin-right: 20px;
padding: 5px;
}
.box{
height: 20px;
width: 100px;
background-color: royalblue;
position: absolute;
top: 100px;
}
.ball{
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
}
#keyframes anim {
100%{
top: 80px;
}
}
<!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="style.css" />
</head>
<body>
<div class="ball"></div>
<div class="box"></div>
<button class="fall">Fall ↓</button>
<button class="up">Up ↑</button>
<script src="index.js"></script>
</body>
</html>
I wnna jump up smoothly this red ball by cliking Up ↑ button after clicking Fall ↓ button. I tride it by setting animation property with extra reverse but it's not working. It's jumping up suddenly. How can i achieve smooth jumping up transition by using only keyframes and javascript.
Here is my quick solution.
The animation was removed by setting animation as "" in animationend event listener.
The ball's top position is also set when related event listener is triggered.
const ball = document.querySelector(".ball");
const fallButton = document.querySelector(".fall");
const upButton = document.querySelector(".up");
fallButton.addEventListener("click", function() {
ball.style.animation = "anim 2s forwards";
ball.addEventListener("animationend", function() {
ball.style.top = "80px";
ball.style.animation = "";
});
});
upButton.addEventListener("click", function() {
ball.style.top = 0;
ball.style.animation = "anim 2s forwards reverse";
ball.addEventListener("animationend", function() {
ball.style.top = 0;
ball.style.animation = "";
});
});
body {
display: flex;
justify-content: center;
}
button {
margin-top: 150px;
margin-right: 20px;
padding: 5px;
}
.box {
height: 20px;
width: 100px;
background-color: royalblue;
position: absolute;
top: 100px;
}
.ball {
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
}
#keyframes anim {
100% {
top: 80px;
}
}
<!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="style.css" />
</head>
<body>
<div class="ball"></div>
<div class="box"></div>
<button class="fall">Fall ↓</button>
<button class="up">Up ↑</button>
<script src="index.js"></script>
</body>
</html>

How can I enlarge and correctly position an image from a sprite?

I have many images of documents combined into a sprite. I am able to display a small size version of the image with commentary. However, I also want to enlarge the image to a more readable size, if the user selects the small image, and still have the commentary visible.
I have not been able to figure out a way to enlarge and correctly position the images. I’ve tried so many ways I’m exhausted. Here are three attempts with the result they produced. All these seem very similar. I have added a div with a green background to show where the top left hand corner of the image should be placed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
figure {display: block;
border-width:thin;
}
figcaption {background-color:yellow;}
#img1, #img2, #img3 {
object-fit: none;
object-position: 0 0;
width: 816px; // full size 3264
height: 612px; // full size 2448
}
</style>
</head>
<body>
<figure id="fig1">
<figcaption>Camberley Mail</figcaption>
<img id="img1" src="bates-sprite.jpeg"
style="height: 100vh;
transform: scale(2,2);
position: "absolute";
top: 206px;
left: 48px;">
aa<p>Text to go with picture.</p>
</figure>
<div style="position: absolute; top: 206px; left: 48px; color: white;
background-color: green;">====== 206px ======</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
figure {display: block;
border-width:thin;
}
figcaption {background-color:yellow;}
#img1, #img2, #img3 {
background: url("bates-sprite.jpeg");
background-repeat: no-repeat;
object-fit: none;
object-position: 0 0;
width: 816px; // full size 3264
height: 612px; // full size 2448
}
</style>
</head>
<body>
<figure id="fig1">
<figcaption>Camberley Mail</figcaption>
<img id="img1" src="bates-sprite.jpeg"
style="height: 100vh;
transform: scale(2,2);">
<p>Text to go with picture.</p>
</figure>
<div style="position: absolute; top: 206px; left: 48px; color: white;
background-color: green;">====== 206px ======</div>
<script>
"use strict";
const img = document.getElementById ('img1');
img.style.position = 'absolute';
img.style.left = "48px";
img.style.top = "206px";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
figure {display: block;
border-width:thin;
}
figcaption {background-color:yellow;}
#img1, #img2, #img3 {
object-fit: none;
object-position: 0 0;
width: 816px; // full size 3264
height: 612px; // full size 2448
}
</style>
</head>
<body>
<figure id="fig1">
<figcaption>Camberley Mail</figcaption>
<img id="img1" src="bates-sprite.jpeg"
style="height: 100vh;
transform: scale(2,2) translate(48px,206px);">
<p>Text to go with picture.</p>
</figure>
<div style="position: absolute; top: 206px; left: 48px; color: white;
background-color: green;">====== 206px ======</div>
</body>
</html>
I solved it by using transform-origin: top left;.

How to fix the animation?

The blue block collapses and unfolds, and I need it to appear and perform an animation where it slides down
It's all about slideToggle(300) - this is the very animation of folding and unfolding. I don't want to change the code too much, what can I do about it?
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="javat.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
css
body {
background-color: gray;
}
.content_toggles {
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
z-index: 2;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
jquery
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
document.getElementById("content_blocks").style.display = "block";
return false;
});
});
I'm not really sure what you're asking here - you should clarify by writing what the issue you're facing is, and what the expected result should be. However, I did notice that you're including your JS file before you load the jQuery library. Simply swap the order of these two lines, or else your javascript code won't work. This is because your javascript code uses jQuery, but you are loading your code before you initialize the jQuery library. Change your HTML to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="jquery-3.6.0.min.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
I also noticed you are trying to access the content_blocks element by its ID, but you define it by class. Instead of document.getElementById("content_blocks").style.display = "block"; do
// vanilla JS
document.querySelector(".content_blocks").style.display = "block";
// jQuery
$('.content_blocks').style.display = "block";
Or you can do
<input type="button" id="content_toggles"\>
<input type="button" id="content_blocks"\>
Do you mean something like this?
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
});
});
body {
background-color: gray;
}
.content_toggles {
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>

document.querySelectorAll doesn't apply despite the HTML adjusting

I'm trying to get all the divs within a div with document.querySelectorAll. Interestingly, when I set in the JS the height to 1000, the explorer's scroller enlarges accordingly (only the balloon doesn't get bigger). What am I doing wrong?
'use strict';
var gElBalloons;
function init() {
gElBalloons = document.querySelectorAll('.balloons');
setInterval(moveBalloons, 1000);
}
function moveBalloons() {
for (var i = 0; i < gElBalloons.length; i++) {
gElBalloons[i].style.height = 1000 + 'px';
}
}
body {
margin: 10%;
}
.balloon-1 {
display: block;
width: 120px;
height: 145px;
background-color: red;
border-radius: 80%;
position: absolute;
}
.balloon-2 {
display: block;
width: 120px;
height: 145px;
background-color: blue;
border-radius: 80%;
left: 40%;
position: absolute;
}
<!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>Balloons</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body onload="init()">
<div class="balloons">
<div class="balloon-1"></div>
<div class="balloon-2"></div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
For now, I just want to test and make sure it works correctly.
It seems that your selector selected the wrong div. If you want to make the ball bigger, you should select balloon-1 and balloon-2 instead of their container balloons.
'use strict';
var gElBalloons;
function init() {
gElBalloons = document.querySelectorAll('.balloons > div');
setInterval(moveBalloons, 1000);
}
function moveBalloons() {
for (var i = 0; i < gElBalloons.length; i++) {
gElBalloons[i].style.height = 1000 + 'px';
}
}
body {
margin: 10%;
}
.balloon-1 {
display: block;
width: 120px;
height: 145px;
background-color: red;
border-radius: 80%;
position: absolute;
}
.balloon-2 {
display: block;
width: 120px;
height: 145px;
background-color: blue;
border-radius: 80%;
left: 40%;
position: absolute;
}
<!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>Balloons</title>
</head>
<body onload="init()">
<div class="balloons">
<div class="balloon-1"></div>
<div class="balloon-2"></div>
</div>
</body>
</html>

How to run a method from HC-Sticky plugin?

I am using HC-Sticky JavaScript plugin and trying to use the documented reinit method, but I don't understand how to run it.
Here is a CodePen showing a very basic setup and an attempt at running the reinit method right after the initialization, but the console always says that the
reinit function is not defined
How you would normally run a method in this situation?
Store your HC-Sticky instance in a variable, then you can use HC-Sticky's API:
var sticky = new hcSticky('.this-sticks', {
stickTo: 'main'
});
sticky.reinit();
OR access it via jQuery.data(...):
jQuery('.this-sticks').hcSticky({
stickTo: 'main'
});
jQuery('.this-sticks').data('hcSticky').reinit();
Example 1:
Using new hcSticky(...)
jQuery(document).ready(function() {
var sticky = new hcSticky('.this-sticks', {
stickTo: 'main'
});
sticky.reinit();
});
body {
margin-top: 300px;
}
header {
height: 300px;
background: black;
position: fixed;
top: 0;
right: 0;
left: 0;
}
section {
height: 100vh;
background: #ccc;
}
footer {
height: 400px;
background: black;
}
.this-sticks {
background: blue;
height: 100px;
}
<!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">
<title>HC Sticky Example</title>
</head>
<body>
<div>
<header></header>
<main>
<section class="this-sticks">sticky</section>
<section></section>
</main>
<footer></footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/somewebmedia/hc-sticky/master/dist/hc-sticky.js"></script>
</body>
</html>
Example 2:
Using jQuery(...).hcSticky(...)
jQuery(document).ready(function() {
jQuery('.this-sticks').hcSticky({
stickTo: 'main'
});
jQuery('.this-sticks').data('hcSticky').reinit();
});
body {
margin-top: 300px;
}
header {
height: 300px;
background: black;
position: fixed;
top: 0;
right: 0;
left: 0;
}
section {
height: 100vh;
background: #ccc;
}
footer {
height: 400px;
background: black;
}
.this-sticks {
background: blue;
height: 100px;
}
<!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">
<title>HC Sticky Example</title>
</head>
<body>
<div>
<header></header>
<main>
<section class="this-sticks">sticky</section>
<section></section>
</main>
<footer></footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/somewebmedia/hc-sticky/master/dist/hc-sticky.js"></script>
</body>
</html>

Categories