I want to add 2 classes to my div with an event listener, but I want it to add one list, update the DOM, and add the second class
I need to move the div with the id app to the top and then to the left when the user clicks the key 1, but it goes up and left at the same time.
<!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>Document</title>
<style>
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 1s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 1s;
}
.robot_end_left {
left: 500px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 600px;
transition: left 1s;
}
.robot1_end_left {
left: 400px;
}
</style>
</head>
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style="width:30px; height:40px" />
</div>
<script>
let count = 0;
var move = function(event) {
if (event.keyCode === 97) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot_end_left");
}, 0);
}
if (event.keyCode === 98) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot1_end_left");
}
};
</script>
</body>
</html>
but in this way, it adds all 2 classes at once.
Here is the whole code in CodeSandBox
Browsers will generally let JavaScript code like yours do a burst of DOM updates without doing anything visually. They'll wait until the script exits (like an event handler) or until something in the script requires that the browser do the visual update before it can provide an answer.
In your case, the simplest thing to do is defer the addition of the "second" class for some fractions of a second; exactly how long depends on what you want it to look like. The way you'd do that would be something like
setTimeout(() => { appDiv.classList.add("robot_end_left") }, 500);
That 500 means to wait 500 milliseconds before adding the second class.
Related
I am trying to at a page transition with Barba.js not using an animator just Css Keyframes,
I just cant seem to get the transition working. the only error im getting is barba not defined but I don't see where ?
installed Barba via npm
used the cdn script link
attached both html pages to each the css and the js page
initiated the DOM.
still not having any luck . VERY STUCK
there is a second html page called page two formatted exactly like the first
TIA
<!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">
<link rel="stylesheet" href="/index.css">
<script src="Index.js" defer></script>
<title>Document</title>
</head>
<body>
<body data-barba="wrapper">
<main data-barba="container" data-barba-namespace="home">
<!-- put here the content you wish to change
between your pages, like your main content <h1> or <p> -->
<div class="Page1">
<h1>Welcome home</h1>
to my network projects
</div>
</main>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js" integrity="sha512-7b1FfB2MGnB65aK6jrbS8k3REB+8bEE8UfP/TEwacejD0g02nLLI1VL4IPcKyiLk2lf7HJWaUYEUWc65aqaXQg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/#barba/core"></script>
</body>
</html>
{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.Page1, .Page2{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex-direction: column;
position: absolute;
}
a{
color: antiquewhite;
text-decoration: none;
margin-top: 50px;
padding: 10px 30px;
border: 2px solid black;
}
.Page1{
background-color: pink;
}
.Page2{
background-color: antiquewhite;
}
.slide-in {
animation: slide-in 0.5s forwards;
}
#keyframes slide-in {
from {
transform: translateX(100%);
visibility: visible;
}
to{
transform: translateX(0%);
}
}
(function (Barba) {
document.addEventListener("DOMContentLoaded", function (event) {
console.log('pjax start');
// Barba init
Barba.Pjax.start();
// Barba prefetch init
Barba.Prefetch.init();
var FadeTransition = Barba.BaseTransition.extend({
start: function () {
/**
* This function is automatically called as soon the Transition starts
* this.newContainerLoading is a Promise for the loading of the new container
* (Barba.js also comes with an handy Promise polyfill!)
*/
// As soon the loading is finished and the old page is faded out, let's fade the new page
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function () {
/**
* this.oldContainer is the HTMLElement of the old Container
*/
},
fadeIn: function () {
/**
* this.newContainer is the HTMLElement of the new Container
* At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
* Please note, newContainer is available just after newContainerLoading is resolved!
*/
this.newContainer.classList.Add('slide-in');
this.newContainer(animationend,function(){
var that = this
this.newContainer.classList.remove('slide-in');
that.done
});
}
});
/**
* Next step, you have to tell Barba to use the new Transition
*/
Barba.Pjax.getTransition = function () {
/**
* Here you can use your own logic!
* For example you can use different Transition based on the current page or link...
*/
return FadeTransition;
};
});
}(Barba));
I've seen that there are different ways to fade in an object on load but every time I try to apply it to my own code I must be messing something up. I've been trying css and javascript so I'm good to use whatever I can get working.
I would like Hello to fade up on load but then 5 seconds later Next Page also fade's in.
Here's my code so far.
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="sky.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="sky.js"></script>
</head>
<body>
<div id="Welcome">
<h1> Hello </h1>
</div>
<div id="Next">
<h2> Next Page </h2>
</div>
<video autoplay muted loop id="VidBackground">
<source src="video/home.mp4">
</video>
</body>
</html>
and here's my css
h1, h3, a {
color: #ffffff;
line-height: 2;
}
#welcome {
position: absolute;
bottom: 15%;
right: 20%;
z-index: 2;
}
#next {
position: absolute;
bottom: 10%;
right: 20%;
z-index: 2;
}
#VidBackground {
position: fixed;
right: 0;
bottom: 0;
object-fit: cover;
z-index: -1;
}
This will be a good fit for CSS transitions.
You can use them like this:
transition: <css property> <transition-duration> <transition-function>
Example:
#next {
transition: opacity 0.5s ease-in-out;
opacity: 0;
/*pointer-events makes this node not respond to mouse/touch events
Which is probably what we want while the button is invisible.*/
pointer-events: none;
}
Now whenever the opacity style changes on #next it will transition instead of appearing instantaneous. Typically you would trigger it by some javascript.
window.onload = function() {
setTimeout(function() {
//Re-enable mouse/touch events on the #next button
document.getElementById("next").style.pointerEvents = 'auto';
//Show the #next button
//Since opacity style is transitioned, the opacity change will automatically trigger the transition.
document.getElementById("next").style.opacity = 1;
}, 5000);
});
Further reading on transitions can be found over at the MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
So HERE is the code. I simple want to change the color of the h1 heading when the scroll is 1000px from top. I would like to use purely javascript for this purpose.Please try and ignore how poorly the code has been written. Any suggestion would be more than welcome. Thank you for you time.
<html> <head> <title> scroll </title>
<!-- CSS !-->
<style> .redbox {
background-color: red;
position: absolute;
top: 10px;
height: 90px;
width: 100px;
} .reveal {
position: fixed;
top:450px;
transition: width 2s;
display: block;
} </style>
</head>
<!-- HTML !-->
<body>
<div class='redbox' id='red'> , </div>
<h1 class='reveal' id='demo'> The comes up on 1000 scroll! </h1>
<h1 style='position: absolute;top: 1900px;'> END </h1>
<!-- JS !-->
<script>
var top = window.pageYOffset || document.documentElement.scrollTop
if (top == 1000) {
document.getElementById('demo').style.color = 'red'}
</script> </body> </html>
You could check the current scroll offset using an event handler:
document.body.addEventListener('scroll', function() {
if(window.scrollY > 499) {
document.getElementById('myDiv').classList.add('appear'); // or whatever...
}
});
I am facing issue while developing one of My jQuery task. As....
I have a responsive Image(Working on all mobile device resolution), My Task is when I click on that image, I want to get a image position on which the image clicked.. I tried to complete this task using Page X and page Y behaviour of jQuery.but it gives the different value when I changed the resolution of screen.
Please help me and give me suggestion or provide a sample how can I do this. I guess position should be same even if the resolution would be different.
I'm not sure understand your issue but i think you want to do this
If i wrong please share your codes and more describe your isssue
$(function (){
'use strict';
$('.img1').click(function (){
$('.img2').css({
'z-index': 3
});
});
$('.img2').click(function (){
$(this).css({
'z-index': 1
});
});
});
.box {
position: relative;
width: 10em;
height: 10em;
}
.box .img1,
.box .img2 {
position: absolute;
width: 10em;
height: 10em;
-webkit-background-size: cover;
background-size: cover;
}
.img1 {
background-image: url(https://lh3.googleusercontent.com/-e8VRnumXmR0/AAAAAAAAAAI/AAAAAAAAAUQ/uk_p3w15PNs/photo.jpg?sz=128);
z-index: 2;
}
.img2 {
background-image: url(https://www.gravatar.com/avatar/5768f7edd993f3f1a5363f6d786d5ace?s=128);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<div class="img1"></div>
<div class="img2"></div>
</div>
</body>
</html>
You can simply change the CSS z-index by jquery:
$(target).css({
'z-index': 2
});
I have two elements "src" and "dest"
"src" and "dest" are in different DOM-nodes, that can not have the same parent.
I need to place "src" element in the same visible position, as "dest".
"src" element must also have the same sizes, as "dest".
I have following code for case, when "src" and "dest" having the same parent:
src.css("position", "absolute");
src.css("top", dest.offset().top);
src.css("left", dest.offset().left);
src.width(dest.width());
// Show "src" element, instead of "dest". "src" must be in the same visible position, as "dest"
dest.css("opacity", 0);
src.show();
Unfortunately, it does not works. "src" element has displacement to bottom and left, for that i cannot find the reason.
Maybe, i do something wrong ...
How to do it right for two cases ?
"src" and "dest" having the same grand-parent
"src" and "dest" does't having the same parent. Maybe grand-grand-grand-parent is the common for both.
Update:
I have arranged a simple HMTL document, that does a simple visual swapping of one element with another:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MacBlog</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
<style type="text/css" media="screen">
.dest {
background-color: #0cf;
width: 480px;
height: 320px;
}
.src {
background-color: #09c;
width: 1024px;
height: 768px;
}
</style>
<script type="text/javascript" charset="utf-8">
jQuery(function($){
// Common items, to deal with
var src = $(".src");
var dest = $(".dest");
// Setup
src.hide();
// Interaction
dest.click(function(){
src.width(dest.width());
src.height(dest.height());
src.offset(dest.offset());
dest.hide();
src.show();
});
});
</script>
</head>
<body>
<div>
<!--On clicking, this element should visually be swapped by ".src" element -->
<div class="dest"><p>dest</p></div>
<div class="src"><p>src</p></div>
</div>
</body>
</html>
It does not work correctly. After "swapping", "src" element has a strange displacement to top-left direction on ~30 pixels.
I use latest version of Safari 5, if i makes sense.
Update 2:
Unfortunately, this also does not works. I updated my example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MacBlog</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
<style type="text/css" media="screen">
div {
margin: 0;
padding: 0;
}
.holder {
position: relative;
top: 40pt;
left: 40pt;
border: black solid thin;
}
.dest {
background-color: #0cf;
width: 480px;
height: 320px;
}
.src {
background-color: #09c;
width: 1024px;
height: 768px;
}
</style>
<script type="text/javascript" charset="utf-8">
jQuery(function($){
// Common items, to deal with
var src = $(".src");
var dest = $(".dest");
// Setup
src.hide();
// Interaction
dest.click(function(){
src.css("position", "absolute");
src.width(dest.width());
src.height(dest.height());
src.offset(dest.offset());
dest.hide();
src.show();
});
});
</script>
</head>
<body>
<div class="holder">
<!--On clicking, this element should visually be swapped by ".src" element -->
<div class="dest"><p>dest</p></div>
<div class="src"><p>src</p></div>
</div>
</body>
</html>
I tested it here:http://jsfiddle.net/YEzWj/1/
Using your second example make your CSS like this:
div {
position:relative;
margin: 0;
padding: 0;
}
.holder {
position: relative;
top: 40pt;
left: 40pt;
border: black solid thin;
}
.dest {
position:absolute;
background-color: #0cf;
width: 480px;
height: 320px;
}
.src {
background-color: #09c;
width: 1024px;
height: 768px;
}
EDIT: After playing around with it some, it did not work in all circumstances. I decided to change the javascript. Note: My example toggles the display of src and dest within the holder, making holder the same size as dest so the border shows outside the dest and src.
jQuery(function($){
// Common items, to deal with
var src = $(".src");
var dest = $(".dest");
var holder=$(".holder");
holder.width(dest.width());
holder.height(dest.height());
// Setup
src.hide();
// Interaction
dest.click(function(){
src.show();
src.css("position", "absolute");
src.width(dest.width());
src.height(dest.height());
src.offset(dest.offset());
dest.hide();
});
src.click(function(){
dest.show();
src.hide();
});
});
EDIT2: Remove the src.click() event if you wish it to NOT go back to the dest on src click.
You need to make the dest element absolute, otherwise the top and left offsets will not apply.
src.css('position', 'absolute'); // ensure position is set to absolute
src.offset(dest.offset());
Also, elements like p and body will have default stylesheets depending on browser. So try to supply a reset style to make things consistent:
p {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
You can call the offset function to set the offset and handle different parents correctly, like this:
dest.offset(src.offset());