I made a javascript banner which expands on rollover and close on click on a button. I cannot close it when the the banner is still expanding. When i click on the close button the banner expands and only after it starts to close. I thisnk it's about clear interval but but i dont't know how to resolve the problem. Can anyone help me?
var dagContainer = document.querySelector('.dag_sideslider');
var side_btn = document.querySelector('.side_btn');
var close_btn = document.querySelector('.dag_close');
side_btn.addEventListener("mouseover", open);
close_btn.addEventListener("click", closeBanner);
function open() {
side_btn.style.display = "none";
close_btn.style.display = "block";
var pos = 300;
var id = setInterval(frame, 5);
function frame() {
if (pos == 900) {
clearInterval(id);
} else {
pos++;
dagContainer.style.width = pos + 'px';
}
}
}
function closeBanner() {
close_btn.style.display = "block";
var idd = setInterval(framee, 5);
function framee() {
var poss = dagContainer.offsetWidth;
console.log(poss);
if (poss == 300) {
clearInterval(idd);
console.log("ss");
close_btn.style.display = "none";
side_btn.style.display = "block";
} else {
poss--;
console.log(poss)
dagContainer.style.width = poss + 'px';
console.log(poss);
}
}
}
.slideSider_container{
margin:0 auto 0;
position: relative;
width: 300px;
height: 600px;
}
.dag_sideslider{
background-color:#ea7900;
width: 300px;
height: 600px;
position: absolute;
right: 0;
top:0;
}
.side_btn{
width: 300px;
height: 600px;
}
.dag_close{
position: absolute;
top:0px;
right: 0px;
z-index:9999;
display: none
}
<div class="slideSider_container">
<div class="dag_sideslider" >
<div class="dag_close"><img src="close.png"></div>
<div class="side_btn"></div>
</div>
</div>
Related
javascript beginner here! so i'm trying to do a box(that is inside a larger box) move from the top to the edge of the box. Here's the code:
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5);
function boxmove() {
if (loc == 320) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox">
<div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>
The problem is that the small box doesn't exactly ends up at the edge, it goes more to the right. I tried doing
boxcont.style.left = (loc - 0.5) + "px";
but doesn't work. pretty sure the solution is simple but as a newbie here it's confusing me :p. Oh and i also tried doing ++ to the 0.5 and Number(0.5) so it reads it as a decimal but still doesn't work!
the big gray box is not set to the correct height and width that corresponds with the small red box's movement. You have it going down 1 and to the right 1 every 5 however, your actually going across a rectangle, not a square. set your width and height the same for the gray box and slightly adjust the stopping point to a little bit less.
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5); // every five milliseconds
function boxmove() {
if (loc == 290) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox" style = "height: 320px; width: 320px">
<div id="boxcont" ></div>
</div>
<button id="boxbtn">Move the box</button>
if (loc == 270) {
instead of
if (loc == 320) {
Gets you there.
300px is the width of the containing div and the moving div is 30px wide so 300-30=270px
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5);
function boxmove() {
if (loc == 270) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox">
<div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>
The following code makes my div slide from right to left in my screen. I want to reverse the animation on second button click . But this simply makes my div disappear and appear instantaneously without any animation.Function slider3 is my failed attempt at reversing the animation. The login box right margin is initially -570px .
function call_slider() {
setTimeout("slider()", 50)
}
function slider() {
var label = document.getElementById("container1");
if (label.style.display == 'block') {
alert('this Element is block');
document.getElementById("login_box").style.right = "-570px";
label.style.display = "none";
} else {
alert('this Element is hidden');
setInterval(slider2, 10);
label.style.display = "block";
}
}
function slider2() {
if (document.getElementById("login_box").style.right != "10px") {
document.getElementById("login_box").style.right = parseInt(document.getElementById("login_box").style.right || 0) + 10 + 'px';
}
}
function slider3() {
if (document.getElementById("login_box").style.left != "-570px") {
document.getElementById("login_box").style.left = parseInt(document.getElementById("login_box").style.left || 0) + 10 + 'px';
}
}
.login-box {
width: 320px;
position: absolute;
top: 0px;
margin: 0;
background: white;
padding: 0 0 0 0;
}
.container1 {
width: 100%;
height: 100%;
overflow: hidden;
display: none;
display: flex;
justify-content: flex-end;
opacity: 0.9;
}
<div class="container1" id="container1" style="height:900px;position:absolute; z-index: 1;">
<form method="post" id="myform" onsubmit="mySubmit() " style="">
{% csrf_token %}
<div class="login-box" id="login_box" style=" right:-570px;">
</div>
</form>
</div>
Changes are commented in your code
function call_slider() {
setTimeout("slider()", 50)
}
function slider() {
var label = document.getElementById("container1");
if (label.style.display == 'block') {
alert('this Element is block');
//replaced your code with slider 3 function
//assign interval function as a proprty of global window so it can be accessed by another function
window.moveRight = setInterval(slider3, 10);
} else {
alert('this Element is hidden');
//make your element visible before start animation
label.style.display = "block";
window.moveLeft = setInterval(slider2, 10);
}
}
function slider2() {
//parse the right property as integer
var right = parseInt(document.getElementById("login_box").style.right,10)
if ( right < 10) {
document.getElementById("login_box").style.right = right + 10 + 'px';
} else {
//important -- cancel the interval after animation finished else it will run infinitely and interfere with other other functions
clearInterval(window.moveLeft)
}
}
function slider3() {
//user right here instead of left
//use the same property in other animation
var right = parseInt(document.getElementById("login_box").style.right,10)
if ( right > -570) {
document.getElementById("login_box").style.right = right - 10 + 'px';
} else {
// This is where you get stuck
// in your code the container element is hidden before animation is performed therefore you didn't see box moving to right
//hide container1 element only after entire login-box is moved to right
var label = document.getElementById("container1").style.display = "none";
clearInterval(window.moveRight)
}
}
.login-box{
width:320px;
position: absolute;
top : 0px;
margin: 0 ;
background:red;
padding:0 0 0 0 ;
height : 100px;
}
.container1{
width:100%;
height: 100%;
overflow:hidden;
display:none;
display:flex;
justify-content:flex-end;
opacity: 0.9;
}
<div class="container1" id="container1" >
<form method="post" id="myform" onsubmit="mySubmit() " style="">
<div class = "login-box" id="login_box" style=" right:-570px;">
</div>
</form>
</div>
<!-- Button for performing animation -->
<button onclick="call_slider()" >Show/Hide Login Box</button>
I am creating a website with few animation, below is the piece of javascript and css which is revealing image from left to right
var i = 0;
var interval = setInterval(function () {
$('.mask').width(i + "%");
i++;
if (i == 101) {
clearInterval(interval);
}
}, 20);
.mask {
background:white;
max-width: 640px;
z-index:1;
height: 426px;
position: relative;
overflow: hidden;
}
.img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mask">
<div class="img">
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
</div>
</div>
and then an javascript which reveals image from right to left.
var i = 0;
var interval = setInterval(function () {
$('.mask3').css({ left: -i + "%" });
i++;
if (i === 0) {
clearInterval(interval);
}
}, 20);
.wrapper {
width: 640px;
height: 430px;
position: relative;
}
.mask3 {
position: absolute;
top: 0;
left: 0;
background:white;
width: 100%;
height: 100%;
z-index:1;
}
.img {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="mask3">
</div>
<div class="img">
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
</div>
</div>
Now I am trying to load this animation only when div is being displayed, or user scroll down to specific div, and then the animation shall roll back.
I tried few of the scripts, but all of them guided to use if else statement although I am not able to pick anything which is working, can someone please help me out on this one.
This is a very rough answer, but you can do this if you want. You will still need to work on your animation function more to make it hide and then display based on how you want it to be.
var elem = $('.img'); //use a better identifier like an id.
var counter = 0
elem.hide();
function myAnimation() {
elem.show();
var i = 0;
var interval = setInterval(function () {
$('.mask').width(i + "%");
i++;
if (i == 101) {
clearInterval(interval);
}
}, 20);
counter++;
}
$(window).scroll(function(){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && counter < 1) {
myAnimation();
}
});
The counter is basically to animate it once, because you will trigger this animation on every scroll.
I know PHP,VB.net but I'm beginner in JavaScript. I have a problem with animation. The first one is working, but second one not...
var elem = document.getElementById("PrviObjekat"); (this one is working)
var elem_drugi = document.getElementById("DrugiObjekat"); (this one not, it has no logic)...
However I it calls it don't works...
Full HTML/JS code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="stilizacija.css"/>
<title>Animacija</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<div id = "Animacija">
<p id = "PrviObjekat"> Dobro došli, ovo je prvi probni tekst.</p>
<p id = "DrugiObjekat">Ovo je drugi tekst...</p>
</div>
<br>
<script>
function Animiraj()
{
var elem = document.getElementById("PrviObjekat");
var elem_drugi = document.getElementById("DrugiObjekat");
var pos = 0;
var pos2 = 195;
var id = setInterval(frame_dole, 12);
function frame_dole()
{
if (pos == 150)
{
clearInterval(frame_dole);
id = setInterval(frame_gore, 12);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
elem_drugi.style.left = pos + 'px';
}
}
function frame_gore()
{
if (pos == 0)
{
clearInterval(id);
id = setInterval(frame_dole, 12);
} else {
pos--;
elem.style.top = pos - 'px';
elem.style.left = pos - 'px';
elem_drugi.style.left = pos - 'px';
}
}
}
var PrviKliknut = false;
$("#PrviObjekat").click(function()
{
if(PrviKliknut == false)
{
$("#PrviObjekat").css({"font-size" : "20px"});
PrviKliknut = true;
}else{
$("#PrviObjekat").css({"font-size" : "16px"});
PrviKliknut = false;
}
});
$(document).ready(function()
{
console.log("Dokument je učitan.");
Animiraj();
//$("#PrviObjekat").animate({ scrollTop: $("#TockaB").offset().top }, 1500);
});
</script>
</body>
</html>
CSS code:
#Animacija
{
width: 550px;
height: 550px;
position: relative;
background: yellow;
}
#PrviObjekat
{
width: 145px;
height: 75px;
position: absolute;
background: red;
}
#DrugiObjekat
{
background: green;
width: 100px;
height: 60px;
margin-left: 195px;
margin-top: 25px;
}
Thanks and have a nice day.
function Animiraj()
{
var elem = document.getElementById("PrviObjekat");
var elem_drugi = document.getElementById("DrugiObjekat");
var pos = 0;
var pos2 = 195;
var id = setInterval(frame_dole, 12);
function frame_dole()
{
if (pos == 150)
{
clearInterval(frame_dole);
id = setInterval(frame_gore, 12);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
elem_drugi.style.left = pos + 'px';
}
}
function frame_gore()
{
if (pos == 0)
{
clearInterval(id);
id = setInterval(frame_dole, 12);
} else {
pos--;
elem.style.top = pos - 'px';
elem.style.left = pos - 'px';
elem_drugi.style.left = pos - 'px';
}
}
}
var PrviKliknut = false;
$("#PrviObjekat").click(function()
{
if(PrviKliknut == false)
{
$("#PrviObjekat").css({"font-size" : "20px"});
PrviKliknut = true;
}else{
$("#PrviObjekat").css({"font-size" : "16px"});
PrviKliknut = false;
}
});
$(document).ready(function()
{
console.log("Dokument je učitan.");
Animiraj();
//$("#PrviObjekat").animate({ scrollTop: $("#TockaB").offset().top }, 1500);
});
<style>
{
width: 550px;
height: 550px;
position: relative;
background: yellow;
}
#PrviObjekat
{
width: 145px;
height: 75px;
position: absolute;
background: red;
}
#DrugiObjekat
{
background: green;
width: 100px;
height: 60px;
margin-left: 195px;
margin-top: 25px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id = "Animacija">
<p id = "PrviObjekat"> Dobro došli, ovo je prvi probni tekst.</p>
<p id = "DrugiObjekat">Ovo je drugi tekst...</p>
</div>
<br>
</body>
**
#DrugiObjekat
{
background: green;
width: 100px;
height: 60px;
margin-left: 195px;
margin-top: 25px;
position: absolute;
}
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
I have this code below I have made and I am attempting to run the animation when the traffic light is on green/index=2. i have literally tried everything i can so please any boffins out there show me how to loop these two parts of the code in sync.
<!DOCTYPE html>
<html>
<body>
<h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1>
<img id="light" src="Traff 1.jpg">
<style>
#container {
width: 600px;
height: 475px;
position: absolute;
background: #000;
}
#animate {
width: 300px;
height: 170px;
position: absolute;
background: url(car.jpg);
}
</style>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
var list = [
"Traff 1.jpg",
"traff 2.jpg",
"traff 3.jpg",
"traff 4.jpg"
];
var index = 0;
(function nextlight() {
setInterval(function(){ index = index + 1;
if (index == 4) index = 0;
var image = document.getElementById('light');
image.src=list[index]; }, 3000);
})()
</script>
<script>
(function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame,10);
function frame() {
if (pos == 300) {
pos = 0;
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
})()
</script>
</body>
</html>
It's simple. You just need a check in the function frame so that it moves the position only if the index is 2.
function frame() {
if (index !== 2) {
return;
}
...
}
Working example (used colors instead of images):
<!DOCTYPE html>
<html>
<body>
<h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1>
<!-- <img id="light" src="Traff 1.jpg"> -->
<div id="light">Traff Light</div>
<style>
#container {
margin: 30px 0;
width: 900px;
height: 500px;
position: absolute;
background: #000;
}
#animate {
width: 300px;
height: 170px;
position: absolute;
background: blue;
/* background: url(car.jpg); */
}
#light {
background: red;
border: 5px solid cyan;
height: 50px;
width: 100px;
}
</style>
<div id="container">
<div id="animate"></div>
</div>
<script>
var list = [
"Traff 1.jpg",
"traff 2.jpg",
"traff 3.jpg",
"traff 4.jpg"
];
var tlight = ['red', 'yellow', 'green', 'grey'];
var index = 0;
(function nextlight() {
setInterval(function() {
index = index + 1;
if (index == 4) index = 0;
var image = document.getElementById('light');
//image.src = list[index];
image.style.background = tlight[index];
}, 3000);
})();
</script>
<script>
(function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (index !== 2) {
return;
}
if (pos == 300) {
pos = 0;
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
})();
</script>
</body>
</html>