Move square to right on every click - javascript

As I wrote in the title, when user clicks on the square it should move 100px to the right and after next click it should move 100px again to the right but square is going back to left. How can I fix this?
Also in JSFiddle code is working but when I open this on Chrome it's giving me error:
Cannot read properties of null (reading 'addEventListener')
<html>
<head>
<title>JavaScript animation</title>
<style>
#square {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 0px;
top: 100px;
transition-duration: 3s;
transition: left 1.5s ease-in-out;
}
#square.active {
left: calc(100px);
transition: left 1.5s ease-in-out;
}
</style>
<script>
const square = document.querySelector('#square');
square.addEventListener('click', toggleActive);
function toggleActive() {
square.classList.toggle('active');
}
</script>
</head>
<body>
<div id="square"></div>
</body>
</html>
JS Fiddle link

Right now you're simply toggling the class, so it moves right and back to its original position.
You need to add a value to the already existing value, in this case 100 pixels.
Also not getting an error from your original fiddle.
const square = document.querySelector('#square');
square.addEventListener('click', moveRight);
function moveRight() {
square.style.left = square.offsetLeft + 100+'px';
}
#square {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 0px;
top: 100px;
transition-duration: 3s;
transition: left 1.5s ease-in-out;
}
<div id="square"></div>

Related

JS not moving side-bar to the left when persona bar is active

Have a DNN/Evoq skin based off of this: https://startbootstrap.com/template-overviews/simple-sidebar/
Prior to DNN/Evoq 9, the control bar was at the top; no problems. Now the persona bar is on the left and it causes issues when logged in. The sidebar doesn't move since it's position is set to fixed.
So I tried adding some JS code to add a class to this sidebar to move the item left an additional 80px; this isn't working.
Any ideas? Thanks..
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 300px;
width: 0;
height: 100%;
margin-left: -300px;
overflow-y: auto;
background: #000;
background: #415A8A;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-right: 2px solid #c88d0c;
}
#sidebar-wrapper.sideadmin {
left: 380px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// When persona bar is active, move page right 80px
$(function () {
if ($('form').hasClass('personalBarContainer')) $('#sidebar-wrapper').addClass('sideadmin');
});
});
</script>
<html>
<body id="Body" style="margin-left: 80px;">
<form method="post" action="/" onsubmit="javascript:return WebForm_OnSubmit();" id="Form" enctype="multipart/form-data">
<div id="ctl15_PersonaBarPanel" class="personalBarContainer">
.....
</div>
<div id="sidebar-wrapper" class="mm-wrapper">
.....
</div>
</form>
</body>
</html>
I think your problem lies in the fact that the PersonaBar is loaded in an Iframe. With the code below you can manipulate that Iframe. It adds an extra class to that Iframe and moves it 80px to the right. It also sets the rest of the page back to the left side of the browser. Maybe this will help you get started.
<style>
.sidebar-wrapper {
border: 2px solid red;
position: absolute;
left: 80px !important;
}
.extraBodyClass {
left: 0px !important;
margin-left: 0px !important;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#personaBar-iframe").addClass('sidebar-wrapper');
$("body").addClass('extraBodyClass');
});
</script>

Change div width on load instead of on hover

How can I replace "hover" with something like a timer or something. I want to make changes that should happen like on load or like 2 sec after load.
Code:
body {
background: white;
}
div.container {
width: 60%;
height: 1em;
overflow: hidden;
position: absolute;
border-style: none;
border-width: none;
border-color: none;
}
div.content {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
}
div.content:hover {
-webkit-transition: all 5s linear;
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
transition: all 5s linear;
width: 500px;
right: 0px;
text-overflow: clip;
}
<div class="container">
<div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>
Pure CSS solution. You can achieve this via CSS animations:
div {
width: 100px;
height: 100px;
background: red;
/* apply 2 second animation with name "grow" */
/* with 2 second delay */
/* and prevent resetting using forwards value */
animation: grow 2s 2s forwards;
}
#keyframes grow {
from { width: 100px; }
to { width: 300px; }
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
Updated for new requirements
For new requirements you just need to duplicate in from and to blocks properties that need to be changed on animation start (text-overflow: clip and right: 0). Demo:
body {
background: white;
}
div.container {
width: 60%;
height: 1em;
overflow: hidden;
position: absolute;
border-style: none;
border-width: none;
border-color: none;
}
div.content {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
/* apply 5 second animation with name "move-text" */
/* with linear timing function and 2 second delay */
/* and prevent resetting using forwards value */
animation: move-text 5s linear 2s forwards;
}
#keyframes move-text {
from {
width: 100%;
text-overflow: clip;
right: 0;
}
to {
width: 500px;
text-overflow: clip;
right: 0;
}
}
<div class="container">
<div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>
setTimeout(() => document.querySelector(".box").classList.add("grow"), 2000)
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.grow {
width: 300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="box"></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
u can do sth like this
setTimeout(function(){}, 2000)
the function passed to setTimeout will execute after 2 seconds
See comments inline:
// When the document is ready...
window.addEventListener("DOMContentLoaded", function(){
// Wait 2000 milliseconds and run the supplied function
setTimeout(function(){
document.querySelector(".special").classList.add("delay");
}, 2000);
});
.special {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
.delay {
width: 300px;
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="special"></div>
You can do like this:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
my-div:hover {
width: 300px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(function(){$("div").addClass("my-div")},2000);
});
</script>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class=""></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
You can use onmouseover Event on element. for example:
function hoverFunc(element) {
setTimeout(function() {
element.textContent = "You have unboxed me ";
}, 2000);
}
<div onmouseover="hoverFunc(this)"> hover and unbox me </div>
You could use JavaScript.
HTML:
<!DOCTYPE html>
<html lang="en-US en">
<head>
<meta charset="UTF-8" />
<title>Your Title</title>
</head>
<body>
<div></div>
</body>
</html>
CSS:
div{
width: 100px;
height: 100px;
background: red;
}
JavaScript:
window.addEventListener('load', function(){
setTimeout(function(){
let i = 100;
setInterval(function(){
if(i < 300)
i++;
document.getElementsByTagName('div')[0].style.width = `${i}px`;
}, 5);
}, 2000);
});

Hard transition of other properties when display property is involved

I want to fade between two differently sized elements within a container overlaying each other. The first element should be faded out, then the container resized and finally the other element faded in.
Here's the related snippet:
var layer1 = document.getElementById("layer1");
var layer2 = document.getElementById("layer2");
function switchLayers() {
layer1.addEventListener("transitionend", function() {
layer2.classList.add("fadein");
});
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px;
overflow: hidden;
}
.layer {
position: relative;
width: 400px;
}
#layer1 {
height: 100px;
float: left;
background-color: blue;
}
#layer2 {
height: 150px;
background-color: red;
display: none;
opacity: 0;
}
#layer1.fadeout {
opacity: 0;
transition: opacity 1s ease-out;
}
#layer2.fadein {
display: block;
opacity: 1;
transition: opacity 1s ease-out;
}
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>
When the second layer's display property is set to block it works as expected, i.e. the opacity is changed from 0 to 1 within a second. Though if it's set to none, the transition suddenly is discrete.
I've tried to set all within the transition value to transition all properties and also tried to include the display property in the transition like this:
transition: display 0s, opacity 1s ease-out;
Though without success. Note that because the container should resize to the size of the currently displayed layer, the visibility property can't be used (as it hides the element but still lets it occupy the space).
How to made this work?
Try using the visibility property instead of display.
For more information regarding the state changes in visibility and display, refer article.
For transitioning the parent height, you have to manually change the height property of the #container. Using display: block & display: none will never transition the parent.
Refer code:
var layer1 = document.getElementById("layer1");
var layer2 = document.getElementById("layer2");
function switchLayers() {
layer1.addEventListener("transitionend", function() {
layer2.classList.add("fadein");
document.getElementById("container").style.height = "170px";
});
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px;
height: 100px;
overflow: hidden;
transition: all 0.5s;
}
.layer {
position: relative;
width: 400px;
}
#layer1 {
height: 100px;
float: left;
background-color: blue;
}
#layer2 {
height: 150px;
background-color: red;
visibility: none;
opacity: 0;
}
#layer1.fadeout {
visibility: none;
opacity: 0;
transition: all 1s ease-out;
}
#layer2.fadein {
visibility: visible;
opacity: 1;
transition: all 1s ease-out;
}
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>
There is no straightforward way. Transitions do not work on display, nor do they work on auto height. So, visibility is a good bet.
Note that because the container should resize to the size of the
currently displayed layer, the visibility property can't be used (as
it hides the element but still lets it occupy the space).
Then, you will need to hack it out. You can make use of min-height. Give a faux min-height to your container, and then apply the height of your layer2 to it once the transition ends. Also, because display on layer2 will block the transition, you need to separate out the classes for display and opacity and space out their application using a zero timeout in between.
Here is a crude idea:
var layer1 = document.getElementById("layer1"),
layer2 = document.getElementById("layer2"),
container = document.getElementById("container"),
h = window.getComputedStyle(layer2).getPropertyValue("height");
container.addEventListener("transitionend", function(e) {
if (e.target.id === 'layer1') {
// apply layer2 height to container min-height
container.style.minHeight = h;
}
if (e.target.id === 'container') {
// First show the layer2
layer2.classList.add("show");
// Then a dummy pause to fadein
setTimeout(function(){
layer2.classList.add("fadein");
}, 0);
}
}, false);
function switchLayers() {
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px; overflow: hidden;
min-height: 1px; /* faux min-height */
transition: min-height 1s linear;
}
.layer { position: relative; width: 400px; }
#layer1 {
height: 100px; float: left;
background-color: blue;
transition: all 1s linear;
}
#layer2 {
height: 150px; background-color: red;
display: none; opacity: 0;
transition: opacity 1s linear;
}
#layer1.fadeout { opacity: 0; }
#layer2.show { display: block; } /* Separate out display */
#layer2.fadein { opacity: 1; } /* Separate out opacity */
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>

how to increase border line from the center using css animation

I'm playing around with CSS animation, and I was wondering if there's a way to make a vertical line (with certain height) to grow in length automatically when the page loads. Idealy I want the vertical line to grow from the middle and grow from both top and bottom to a specific height. So far I can only make it increase its length from top to bottom. Here's what I have:
.vertical-line {
margin-left: 100px;
background: red;
width: 8px;
border-radius: 4px;
animation: grow 4s forwards;
}
#keyframes grow {
0% {
height: 10px;
}
100% {
height: 100px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Creating Vertical borders using animation/javascript</title>
</head>
<body>
<div class="vertical-line"></div>
</body>
</html>
what is wrong witn your code is you are simply increasing the height.
In order to grow on both side while increasing height you have to move that element towards the opposite side
Example: if you are increasing height 100px then you have to move opposite for 50px
CSS:
#cool
{
height:10px;
width:10px;
border-radius:4px;
margin-left:10%;
background-color:#431;
margin-top:20%;
animation:grow 3s forwards;
position:relative;
}
#keyframes grow
{
0% {
height: 0px;
top:0;
}
100%{
height: 200px;
top:-100px;
}
}
</style>
HTML:
<div id=cool>
</div>
</body>
for height 100px moving the element top -50px . Taken half of it, because to show the growth on both side. if top -100px then it will grow from the bottom.
I hope this helps
One way you could accomplish this would be to set the initial position of the line in the very center, and then have it extend towards the top and the bottom of the viewport.
.myLine {
position: absolute;
left: 50vw;
top: 50vh;
width: 1px;
height: 1px;
}
You can then add a class, extended, via JavaScript that changes the position and height, thus making it appear to extend vertically from the center.
.extended {
top: 0vh;
bottom: 100vh;
height: 100%;
transition: all 3s ease;
}
Using JavaScript, as I've done here, you can set a brief timeout, and add the class after the timeout has finished.
var el = document.querySelector('.myLine');
setTimeout(function() {
el.classList.add('extended');
}, 300);
See my example codepen.
Try this,
<div class="vertical-line"></div>
<style>
.vertical-line {
position: absolute;
top: 0;
border: 5px solid red;
width: 10px;
border-radius: 4px;
animation: grow 3s infinite alternate;
}
#keyframes grow {
0% {
width: 0px;
height: 0px;
}
100% {
width: 20px;
height: 100%;
}
}
</style>

re-positioning a div on page load using pure javascript

hi i would like to create some animations using javascript when i thought of something which didn't work (i am a beginner in js)
so in simple i have a box at the top of my page and i want to change its css properties on pageload like width , margin -top margin -bottom and etc
here is my code -
<html>
<head>
<style>
#div{
backgroud: #ecb4df;
width: 200px;
height: 50px;
}
</style>
<script>
function codeAddress() {
/* the code here */
}
window.onload = codeAddress;
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
moreover is this way correct and workable or is there any other way of tackling my problem , if yes please tell that too
I can strongly recommend you to look at CSS animations, they perform much better and are easier to maintain.
In JavaScript all you need to do is add or remove a class.
<style>
.my-div {
-webkit-transition-property: top, left;
-moz-transition-property: top, left;
-o-transition-property: top, left;
transition-property: top, left;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
position: absolute;
top: 200px;
left: 200px;
}
.initial {
top: 0px;
left: 0px;
}
</style>
<div id="mydiv" class="my-div initial">Ipsum Lorem</div>
<script>
setTimeout(function () {
document.getElementById("mydiv").className = "my-div"; // remove "initial" to trigger animation
});
</script>
http://jsfiddle.net/srTnE/1/

Categories