I am trying to move an element in a page after the page loads. I'm trying to get the element to load, and then move after three seconds. Instead, the element just moves immediately on the page load. Here is my code so far:
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body id="body">
<div id="container">
<div id="animate"></div>
</div>
<script>
var elem = document.getElementById("animate");
function myMove(element) {
var posx = 0;
var posy = 25;
var opacity = 0;
var id = setInterval(frame, 40);
function frame() {
if (posx == 10) {
clearInterval(id);
} else {
posx++;
opacity = opacity + .1
element.style.top = posy + "%";
element.style.left = posx + "%";
element.style.opacity = opacity;
}
}
}
document.getElementById("body").addEventListener("load", setTimeout(myMove(elem), 3000))
</script>
</body>
</html>
Any help would be greatly appreciated.
You need to do
setTimeout(() => myMove(elem), 3000)
otherwise it sets a timeout for whatever myMove(elem) returns, which means myMove(elem) runs immediately
So basically you need this:
// Run at DOM loaded
document.addEventListener("DOMContentLoaded", function() {
console.log('DOM is loaded');
// Move
setTimeout(function(){ myMove(elem); }, 3000)
});
OR
// Run at full page load
window.addEventListener("load", function() {
console.log('Page is loaded');
// Move
setTimeout(function(){ myMove(elem); }, 3000)
});
Currently, the myMove methods execute immediately. To avoid this you can use arrow functions supported in ES6 or move myMove to a function
using arrow function (supported in ES6):
document.getElementById('body').addEventListener(
'load',
setTimeout(() => myMove(elem), 3000),
);
Convert to function
document.getElementById('body').addEventListener(
'load',
setTimeout(function () {
myMove(elem);
}, 3000),
);
Related
I am working on my portfolio website and I am a complete beginner in Javascript.
I would like a button which has its position fixed, to slowly fade in when I scroll down (suppose when I scroll to >=20px from the top of the document, it should fade in) and when I scroll back up to the original position, it should gradually fade out.
I have already tried my hand and written a code for this. It is working perfectly when you scroll down and up. But when you quickly scroll and stop scrolling in the mid-way, it behaves pretty abnormally (suddenly appears or disappears).
HTML:
<div class="a_large_page">
<div class="enclose bordar black" id="bottomtoup">hello</div>
</div>
JS:
mybutton = document.getElementById("bottomtoup")
// initially, the button stays hidden
visible = false
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
if (!visible) { // if the button is not visible,
unfade(mybutton); // function to gradually fadein button
visible = true; // button is visible so, set visible = false to true.
}
} else {
if (visible) { // if the button is visible,
fade(mybutton); // function to gradually fadeout button
visible = false; // set visible = true back to false
}
}
}
function unfade(element) {
var op = 0.1; // initial opacity
element.style.display = 'flex';
var timer = setInterval(function() {
if (op >= 1) {
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 10);
}
function fade(element) {
var op = 1; // initial opacity
var timer = setInterval(function() {
if (op <= 0.1) {
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
Here is the fiddle: https://jsfiddle.net/P0intMaN/Lmp6u5ft/23/
My code is pretty substandard for sure. That's why it is behaving in this way. Hence, I am looking for an efficient way to achieve this. I have seen people making use of JQuery to do this, but I don't know JQuery at all. So, it would be much appreciated if the code is in pure JS.
I've changed your code and removed setInterval usage. This can be solved with it but may be harder to understand for newer coders.
There are also flags to keep track of whether you are currently fading or unfading to ensure you do not stack or "overlap" timeout/intervals.
mybutton = document.getElementById("bottomtoup")
// initially, the button stays hidden
var visible = false
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
var threshold = 20;
var below_threshold = document.body.scrollTop > threshold || document.documentElement.scrollTop > threshold;
if (below_threshold) {
if (!visible) { // if the button is not visible,
unfade(mybutton); // function to gradually fadein button
}
return;
}
if (visible) { // if the button is visible,
fade(mybutton); // function to gradually fadeout button
}
}
var current_opacity = 0.1;
var is_unfading = false;
var is_fading = false;
function unfade(element) {
if(!visible){
element.style.display = 'flex';
visible = true;
}
is_fading = false;
is_unfading = true;
unfade_step(element);
}
function unfade_step(element){
element.style.opacity = current_opacity;
element.style.filter = 'alpha(opacity=' + current_opacity * 100 + ")";
if (current_opacity >= 1){
// end
is_unfading = false;
current_opacity = 1;
return;
}
current_opacity += 0.01;
if(is_unfading){
setTimeout(function(){
unfade_step(element);
}, 10);
}
}
function fade(element) {
if(!visible){
return;
}
is_fading = true;
is_unfading = false;
fade_step(element);
}
function fade_step(element) {
element.style.opacity = current_opacity;
element.style.filter = 'alpha(opacity=' + current_opacity * 100 + ")";
if (current_opacity <= 0.001){
// end
is_fading = false;
visible = false;
current_opacity = 0.1;
element.style.display = 'none';
return;
}
current_opacity -= 0.01;
if(is_fading){
setTimeout(function(){
fade_step(element);
}, 10);
}
}
There is no need to have so much JS when you can do in so little:
If you feel to change the timing of
// Set a function onscroll - this will activate if the user scrolls
window.onscroll = function() {
// Set the height to check for
var appear = 20
if (window.pageYOffset >= appear) {
// If more show the element
document.getElementById("bottomtop").style.opacity = '1'
document.getElementById("bottomtop").style.pointerEvents = 'all'
} else {
// Else hide it
document.getElementById("bottomtop").style.opacity = '0'
document.getElementById("bottomtop").style.pointerEvents = 'none'
}
}
.a_large_page{
background-color: gray;
height: 2000px;
}
.enclose{
height: 40px;
width: 40px;
position:fixed;
margin-right: 20px;
margin-bottom: 20px;
right:0;
bottom:0;
pointer-events:none;
opacity:0;
justify-content: center;
align-items: center;
color:white;
/* This determines how fast animation takes place, you can change it as per your choice. */
transition:all 0.6s;
}
.enclose:hover{
cursor: pointer;
}
<div class="a_large_page">
<div class="enclose bordar black" id="bottomtop">hello</div>
</div>
There is no need to sense the scroll event in more modern browsers as you can use IntersetionObserver to tell you when scrolling has gone past 20px;
You can do this by placing a tiny element at the top of the page with height 20px. You then ask the system to tell you when this has gone out of, or comes back into, the viewport. At these points you can set the opacity of the Hello to 1 or 0 as appropriate.
The extra bonus is that you get rid of a lot of code and there isn't the possible clash between set intervals as we use transition on the opacity to do the gradual fade in/out.
// See MDN for more info on IntersectioObserver
let callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
mybutton.style.opacity = 0;
} else {
mybutton.style.opacity = 1;
}
});
};
const mybutton = document.getElementById("bottomtoup")
const observer = new IntersectionObserver(callback);
const observed = document.getElementById("observed");
observer.observe(observed);
.a_large_page {
background-color: gray;
height: 2000px;
position: relative;
}
#observed {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 10px;
z-index: -999;
}
.enclose {
height: 40px;
width: 40px;
position: fixed;
margin-right: 20px;
margin-bottom: 20px;
right: 0;
bottom: 0;
justify-content: center;
align-items: center;
color: white;
opacity: 0;
transition: opacity 1s linear;
}
<div class="a_large_page">
<div id="observed"></div>
<div class="enclose bordar black" id="bottomtoup">hello</div>
</div>
I try to create a running infotext on an infoscreen. The Text starts running from the right corner of the screen and leaves on the left side. This process repeats without a limit recursively.
Everything seems to work great, but when I remove the alert after debugging, the text don't start running from the right corner but from the left. Also the programm runs only one time.
HTML:
function setStaticData() {
sessionStorage.setItem('headerWidth', document.getElementById('header').scrollWidth);
}
function getStaticData() {
return sessionStorage.getItem('headerWidth');
}
function animation() {
//get element, its width & time param
var header = document.getElementById('header');
var headerWidth = getStaticData();
var headerTime = header.innerHTML.length * 0.3;
var windowWidth = window.innerWidth;
//clean all
header.style.transition = 'none';
header.style.marginLeft = windowWidth + 'px';
alert("baba"); //BAD BOY
//animate text
header.style.transition = 'margin linear ' + headerTime + 's';
header.style.marginLeft = '-' + headerWidth + 'px';
//wait and repeat
var delay = headerTime * 1000 + 1000;
setTimeout(animation, delay);
}
//first call
window.onload = function() {
setStaticData();
animation();
};
html {
width: 100%;
overflow: hidden;
}
body {
height: 100%;
width: 100%;
position: relative;
display: block;
margin: 0;
padding: 0;
top: 50vh;
transform: translateY(-50%);
color: black;
background-color: #bbc8d9;
}
header {
font-family: calibri, arial;
font-weight: 400;
font-size: 100px;
white-space: nowrap;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">+++ News, More News, Another Thing & something else +++</header>
<script src="functions.js"></script>
</body>
</html>
If I remove the bad boy [alert("baba");] it doesn't work, like I mentioned above.
I going crazy! Can you pls help me?
The problem is that changes to the style of an element are not processed until the Javascript returns to the main event loop and the page is rendered. If you make two assignments to a style, the browser only sees the final result. So when you set marginLeft to the window width and then set it to "-" + headerWidth + "px", only the second change is processed, so that's where the animation starts from.
The alert() causes the page to be rendered while it's waiting for your response (although I think this may be browser-dependent), which is why it works with that.
A simple solution is to put the second assignment in a setTimeout(), so it will be executed asynchronously after returning.
function setStaticData() {
//sessionStorage.setItem('headerWidth', document.getElementById('header').scrollWidth);
}
function getStaticData() {
return document.getElementById('header').scrollWidth; //sessionStorage.getItem('headerWidth');
}
function animation() {
//get element, its width & time param
var header = document.getElementById('header');
var headerWidth = getStaticData();
var headerTime = header.innerHTML.length * 0.3;
var windowWidth = window.innerWidth;
//clean all
header.style.transition = 'none';
header.style.marginLeft = windowWidth + 'px';
//alert("baba"); //BAD BOY
//animate text
setTimeout(function() {
header.style.transition = 'margin linear ' + headerTime + 's';
header.style.marginLeft = '-' + headerWidth + 'px';
}, 0);
//wait and repeat
var delay = headerTime * 1000 + 1000;
setTimeout(animation, delay);
}
//first call
window.onload = function() {
setStaticData();
animation();
};
html {
width: 100%;
overflow: hidden;
}
body {
height: 100%;
width: 100%;
position: relative;
display: block;
margin: 0;
padding: 0;
top: 50vh;
transform: translateY(-50%);
color: black;
background-color: #bbc8d9;
}
header {
font-family: calibri, arial;
font-weight: 400;
font-size: 100px;
white-space: nowrap;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">+++ News, More News, Another Thing & something else +++</header>
<script src="functions.js"></script>
</body>
</html>
Ok I think i fixed it. Its the timing problem just delay the animate call. 1s
function animation() {
//get element, its width & time param
var header = document.getElementById('header');
var headerWidth = getStaticData();
var headerTime = header.innerHTML.length * 0.3;
var windowWidth = window.innerWidth;
//clean all
header.style.transition = 'none';
header.style.marginLeft = windowWidth+'px';
// delay it for 1000ms
setTimeout(
function(){
//animate text
header.style.transition = 'margin linear '+headerTime+'s';
header.style.marginLeft = '-'+headerWidth+'px';
//wait and repeat
var delay = headerTime * 1000 + 1000;
setTimeout(animation, delay);
}, 1000);
}
Please look at the snippet below. I don't use sessionStorage as it is designed for a different purpose. I don't use setTimeout to wait for the styles to be applied.
I start the animation then restart it on transitionend event.
window.onload = function() {
var header = document.getElementById('header');
animation();
header.addEventListener('transitionend', function() {
header.style.transition = 'none';
header.style.transform = 'translateX(0)';
animation();
});
function animation() {
var t = header.offsetWidth / 70,
tx = header.scrollWidth;
header.style.transition = 'transform ' + t + 's linear';
header.style.transform = 'translateX(-' + tx + 'px)';
}
};
html {
width: 100%;
overflow: hidden;
background-color: #bbc8d9;
}
header {
font: 100px sans-serif;
white-space: nowrap;
padding-left: 100%;
}
<header id="header">+++ News, More News, Another Thing & something else +++</header>
I'm trying to make an image that moves to the right on my website. When you click the image, it should move to the left. For now, this doesn't happen, any ideas? If possible, in pure Javascript and no Jquery ;)
Also, if you click the image for a second time, it should move to the right again. Every consecutive time, the image should move to the other side. I guess this would be best with a for-loop?
<script type"text/javascript">
window.onload = init;
var winWidth = window.innerWidth - movingblockobject.scrollWidth; //get width of window
var movingblock = null //object
movingblock.onclick = moveBlockLeft();
function init() {
movingblock = document.getElementById('movingblockobject'); //get object
movingblock.style.left = '0px'; //initial position
moveBlockRight(); //start animiation
}
function moveBlockRight() {
if (parseInt(movingblock.style.left) < winWidth) { // stop function if element touches max window width
movingblock.style.left = parseInt(movingblock.style.left) + 10 + 'px'; //move right by 10px
setTimeout(moveBlockRight,20); //call moveBlockRight in 20 msec
} else {
return;
}
}
function moveBlockLeft () {
movingblock.style.right = parseInt(movingblock.style.right) + 10 + 'px'
}
</script>
Please first go through the Basics of javascript before trying out something .
window.onload = init;
var winWidth = window.innerWidth;
var movingblock = null;
var intervalid = null;
var isLeft = false;
function init() {
console.log('Init');
movingblock = document.getElementById('movingblockobject');
movingblock.style.left = '0px';
intervalid = setInterval(function() {
moveBlock(true);
}, 2000);
movingblock.onclick = function() {
moveBlock(false);
};
}
function moveBlock(isSetInterval) {
if (!isSetInterval)
isLeft = !isLeft;
if (parseInt(movingblock.style.left) < winWidth) {
if (isLeft)
movingblock.style.left = parseInt(movingblock.style.left) - 10 + 'px';
else
movingblock.style.left = parseInt(movingblock.style.left) + 10 + 'px';
} else {
movingblock.style.left = '0px';
}
}
function moveBlockLeft() {
clearInterval(intervalid);
movingblock.style.right = parseInt(movingblock.style.right) + 10 + 'px';
intervalid = setInterval(moveBlockRight, 20);
}
<div id="movingblockobject" style="width:50px;height:50px;border:solid;position: absolute;">
var movingblock = null
this are mistakes you have delclared it as null and next line you are binding click event.Also for assigning click event you should assign the name of the function.
movingblock.onclick = moveBlockLeft;
above is basic bug there are lot like the above.I feel Self learning is much better for basics
try yourself.
try the above it will work but please try yourself
You should CSS3 transition, works like a charm. Just toggle a class "right"
HTML:
<html>
<head>
<style>
#movingblockobject{
width: 40px;
padding: 10px;
position: fixed;
height:10px;
left:0px;
-webkit-transition: left 2s; /* For Safari 3.1 to 6.0 */
transition: left 2s;
}
#movingblockobject.right{
left:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready(function() {
$('#movingblockobject').on('click', function (e) {
$('#movingblockobject').toggleClass("right");
});
});
</script>
</head>
<body>
<div id="movingblockobject" class="demo">add image here</div>
</body>
</html>
Hey guys I need to stop theBox when it moves out of the screeen (500x500)
I dont know how to anyhelp?
<style>
#box { position: absolute; top: 0; left: 0; background-color: green; }
</style>
<script>
onload = function() {
var theBox = document.getElementById("box");
function animate() {
if ("theBox")
theBox.style.left = (theBox.offsetLeft+5)+"px";
theBox.style.top = (theBox.offsetTop+5)+"px";
}
setInterval(animate,100);
}
</script>
</head>
<body>
<div id="box">The box</div>
</body>
Just add a check to see if the next move will take the box up to or over 500. Also, I've added a call to clearInterval() when the box stops, to stop the timer.
onload = function() {
var timer;
var theBox = document.getElementById("box");
function animate() {
if(theBox.offsetLeft+5 < 500 && theBox.offsetTop+5 < 500){
theBox.style.left = (theBox.offsetLeft+5)+"px";
theBox.style.top = (theBox.offsetTop+5)+"px";
} else {
clearInterval(timer);
}
}
timer = setInterval(animate,100);
}
I have added and if statement to check if the height of the page is higher than the offset top of the box:
onload = function() {
var theBox = document.getElementById("box");
function animate() {
if ("theBox")
if(window.innerHeight > (theBox.offsetTop+25)){
console.log(theBox.offsetTop+5)
theBox.style.left = (theBox.offsetLeft+5)+"px";
theBox.style.top = (theBox.offsetTop+5)+"px";
}
}
setInterval(animate,100);
}
Code Pen
I have a function that moves a box when hovering a button. I would like the function to run over and over again every second as long as the mouse hovers over the button. I have tried loops too but I can't get this to work. I would be very thankful if you would look into this.
Here is my code:
<!DOCTYPE html>
<head>
<style>
#box {
position: relative;
top: 20px;
left: 10px;
width: 50px;
height: 50px;
background:#333366;
}
</style>
<script>
function Start() {
setInterval(Move('box'),1000);
}
var value = 0;
function Move(element) {
value += 50;
var box = document.getElementById(element);
box.style.transition = "left 0.2s ease-in-out 0s";
box.style.left = value+'px';
}
</script>
</head>
<body>
<button onmouseover="Start();">Hover to move</button>
<div id="box"></div>
</body>
</html>
Use this:
setInterval(function(){
Move('box')
},1000);
You have to pass a function to setInterval. You were actually calling Move and passing its return value.
something like this maybe?
http://jsfiddle.net/blackjim/HwKb3/1/
var value = 0,
timer,
btn = document.getElementById('btn');
btn.onmouseover = function(){
timer = setInterval(function(){
// your loop code here
Move('box');
}, 1000);
};
btn.onmouseout = function(){
clearInterval(timer);
}
function Move(element) {
value += 50;
var box = document.getElementById(element);
box.style.transition = "left 0.2s ease-in-out 0s";
box.style.left = value + 'px';
}
Try to see jQuery, it might help you in the beginning.
When this line
setInterval(Move('box'),1000);
is executed, Move('box') is evaluated (and executed one), therefore, your argument to setInterval is the return value for it, that is null
Try this:
var value = 0;
function move(element) {
value += 50;
var box = document.getElementById(element);
box.style.transition = "left 0.2s ease-in-out 0s";
box.style.left = value+'px';
// console.log(box);
}
var button = document.getElementById("buttonID");
button.onmouseover = function() {
this.iid = setInterval(function() {
move("boxID");
}, 1000);
};
button.onmouseout = function() {
this.iid && clearInterval(this.iid);
};