Develop Reference

Jquery slidetoggle code to vanilla Javascript that ahndle multiple elements toggle

I have few elements I need to slide, but I don't want to attach whole jQ lib. I like jQ a lot, but whole lib is just overkill in this example.
How to convert jq slideUp/slideDown/toggle to vanilla JS with support of multiple elements passed to function?
JQ code:
var $context = getContext(context);
$($context).on('click', '.menu', function () {
$('.nav').slideToggle();
});
JS code:
var list = document.getElementsByClassName("class1", "class2", "class3");
//or
var list = document.querySelectorAll("class1", "class2", "class3");
var slideUp = function(targets, duration){
// execution
};
slideUp(list, 500);
SO wizards make it happen! :)

I wasn't happy with the last solution I gave you it was rushed and buggy totally unacceptable, Hope you can forgive me...so this is a better version with the clicks of each item working too
const clicker = document.getElementsByClassName("clicker")[0];
clicker.addEventListener("click", function() {
process(document.querySelectorAll(".js-toggle"));
});
[...document.querySelectorAll(".js-toggle")].forEach((element) =>
element.addEventListener("click", function() {
process(this)
})
)
const container = [];
function process(linkToggle) {
container.length = 0
if (linkToggle.length > 0) {
for (let i = 0; i < linkToggle.length; i++) {
container.push(
document.getElementById(linkToggle[i].dataset.container))
animate(container[i])
}
} else {
container.push(
document.getElementById(linkToggle.dataset.container))
animate(container[0])
}
}
function animate(element) {
if (!element.classList.contains("active")) {
element.classList.add("active");
element.style.height = "auto";
let height = parseInt(element.clientHeight || 0)
element.style.height = "0px";
setTimeout(function() {
for (let t = 0; t < container.length; t++) {
do {
container[t].style.height =
parseInt(container[t].style.height || height) +
1 + 'px'
} while (parseInt(container[t].style.height || height) < height);
}
}, 0);
} else {
element.style.height = "0px";
element.addEventListener(
"transitionend",
function() {
element.classList.remove("active");
}, {
once: true
}
);
}
}
.clicker {
cursor: pointer;
background: red;
}
.box {
width: 300px;
border: 1px solid #000;
margin: 10px;
cursor: pointer;
}
.toggle-container {
transition: height 0.35s ease-in-out;
overflow: hidden;
}
.toggle-container:not(.active) {
display: none;
}
<div class="clicker">CLICK ME</div>
<div class="box">
<div class="js-toggle" data-container="toggle-1">Click1</div>
<div class="toggle-container" id="toggle-1">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
</div>
</div>
<div class="box">
<div class="js-toggle" data-container="toggle-2">Click2</div>
<div class="toggle-container open" id="toggle-2">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
</div>
</div>
<div class="box">
<div class="js-toggle" data-container="toggle-3">Click3</div>
<div class="toggle-container" id="toggle-3">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
</div>
</div>
I hope this helps

you could just use css like so ( wasn't sure witch way you wanted to slid but this gives you an idea of how to do it):
var $slider = document.getElementById('slider');
var $toggle = document.getElementById('toggle');
$toggle.addEventListener('click', function() {
var isOpen = $slider.classList.contains('slide-in');
$slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});
#slider {
position: absolute;
width: 100px;
height: 100px;
background: blue;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
.slide-in {
animation: slide-in 0.5s forwards;
-webkit-animation: slide-in 0.5s forwards;
}
.slide-out {
animation: slide-out 0.5s forwards;
-webkit-animation: slide-out 0.5s forwards;
}
#keyframes slide-in {
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slide-in {
100% {
-webkit-transform: translateX(0%);
}
}
#keyframes slide-out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
#-webkit-keyframes slide-out {
0% {
-webkit-transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
<div id="slider" class="slide-in">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
<button id="toggle" style="position:absolute; top: 120px;">Toggle</button>
I can't take credit for this its lifted from:
CSS 3 slide-in from left transition
I hope this helps

Could you not simply include the css in the page header so wouldn't need to edit any style sheets, well in any case then how about this:
function SlideDown() {
const element = document.getElementById("slider");
let top = 0;
const up = setInterval(MoveDown, 10);
function MoveDown() {
if (top == 50) {
clearInterval(up);
} else {
top++;
element.style.top = top + '%';
}
}
}
function SlideUp() {
const element = document.getElementById("slider");
let top = parseInt(element.style.top);
const down = setInterval(MoveUp, 10);
function MoveUp() {
if (top == -100) {
clearInterval(down);
} else {
top--;
element.style.top = top + '%';
}
}
}
<!DOCTYPE html>
<html>
<body>
<div id="slider" style="position:absolute; top: -100px;">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
<button onclick="SlideDown()">Slide Down</button>
<button onclick="SlideUp()">Slide Up</button>
</body>
</html>
I hope this helps

How can I compare the previous value with the current value

I've created a dice roll script but the problem is when it draws the same number it looks as though it hasn't changed number.
I thought of two solutions to the problem, one was to add some sort of check that if the current value is equal to the previous value then it will display the words "again".
I also wanted to animate the characters but because its being inserted by JS it seems to ignore the animation put on the container.
#rollCount {
opacity: 0;
animation-name: fade-in;
animation-fill-mode: forwards;
animation-duration: 2s;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1>Dice Roll</h1>
<h2>Your fate awaits...</h2>
<div id="rollCount"></div>
<button class="" onclick="diceRoll()">Dice Roll</button>
<script>
function diceRoll() {
var number = Math.floor(Math.random() * 6) + 1;
document.getElementById('rollCount').innerHTML = "<h3>" + number + "</h3>";
}
</script>

If the user rolls the same number twice in a row and the computer is supposed to display again...try this...
<h1>Dice Roll</h1>
<h2>Your fate awaits...</h2>
<div id="rollCount"></div>
<button onclick="diceRoll()">Dice Roll</button>
<script>
function diceRoll() {
var number = Math.floor(Math.random() * 6) + 1;
var prev = document.getElementById('rollCount').innerText;
if(number == parseInt(prev))
document.getElementById('rollCount').innerHTML = "<h3 class='fade-in' >again</h3>";
else
document.getElementById('rollCount').innerHTML = "<h3 class='fade-in' >" + number + "</h3>";
}
</script>
Now, to add a fade-in on the element...
#keyframes fadeAnimation {
0% { opacity:0; }
50% { opacity:.5; }
100% { opacity:1; }
}
#-o-keyframes fadeAnimation{
0% { opacity:0; }
50% { opacity:.5; }
100% { opacity:1; }
}
#-moz-keyframes fadeAnimation{
0% { opacity:0; }
50% { opacity:.5; }
100% { opacity:1; }
}
#-webkit-keyframes fadeAnimation{
0% { opacity:0; }
50% { opacity:.5; }
100% { opacity:1; }
}
.fade-in {
-webkit-animation: fadeAnimation 1s;
-moz-animation: fadeAnimation 1s;
-o-animation: fadeAnimation 1s;
animation: fadeAnimation 1s;
}
Jsfiddle of the code: https://jsfiddle.net/bzjg5yo6/

create a class and add/remove it every time the user clicks the button. Also set the opacity of #rollCount to 1 so that when you remove the class it will still show.
<style>
#rollCount {
opacity: 1;
}
#rollCount.fade-in {
animation-name: fade-in;
animation-fill-mode: forwards;
animation-duration: 2s;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<h1>Dice Roll</h1>
<h2>Your fate awaits...</h2>
<div id="rollCount"></div>
<button class="" onclick="diceRoll()">Dice Roll</button>
<script>
function diceRoll() {
var number = Math.floor(Math.random() * 6) + 1;
document.getElementById('rollCount').className +=' fade-in';
document.getElementById('rollCount').innerHTML = "<h3>" + number + "</h3>";
setTimeout(function() {
document.getElementById('rollCount').classList.remove('fade-in');
}, 1000)
}
</script>

How make slide to auto play and change swap to fade in JavaScript

Hi guys I am new in JavaScript I have a image slider here I want the Image Slider to auto play and change swap to fade effect. How can I change this?
My current JavaScript code is below
$('#banner .banner-bg').each(function() {
var self = $(this),
images = self.find('.banner-bg-item');
// SET BG IMAGES
images.each(function() {
var img = $(this).find('img');
if (img.length > 0) {
$(this).css('background-image', 'url(' + img.attr('src') + ')');
img.hide();
}
});
// INIT SLIDER
if ($.fn.owlCarousel) {
self.owlCarousel({
slideSpeed: 500,
pagination: true,
navigation: true,
paginationSpeed: 200,
singleItem: true,
autoPlay:true,
animateIn: 'fadeIn',
navigationText: [
"<i class='fa fa-angle-left'></i>",
"<i class='fa fa-angle-right'></i>"
],
addClassActive: true,
afterMove: function() {
// ACTIVATE TAB
var active_index = self.find('.owl-item.active').index();
$('.banner-search-inner .tab-title:eq(' + active_index + ')').trigger('click');
}
});
}
// SET DEFAULT IF NEEDED
var active_tab_index = $('.banner-bg-item.active, .banner-search-inner .tab-title.active').index();
if (active_tab_index !== 0) {
self.trigger('owl.jumpTo', active_tab_index);
}
});
$('.banner-search-inner').each(function() {
var self = $(this),
tabs = self.find('.tab-title'),
contents = self.find('.tab-content');
// TAB CLICK
tabs.click(function() {
if (!$(this).hasClass('active')) {
var index = $(this).index();
tabs.filter('.active').removeClass('active');
$(this).addClass('active');
contents.filter('.active').hide().removeClass('active');
contents.filter(':eq(' + index + ')').fadeToggle().addClass('active');
// CHANGE BG
if ($.fn.owlCarousel) {
$('#banner .banner-bg').trigger('owl.goTo', index);
}
}
});
});
Below Is the HTML code
<div class="banner-bg">
<div class="banner-bg-item active"><img src="img/banner-bg-1.jpg" alt="" class="img-responsive"></div>
<div class="banner-bg-item"><img src="img/banner-bg-2.jpg" alt="" class="img-responsive"></div>
</div>

You can use CSS animation for that and switch between the slides with javascript. I wrote this code for you and you can use play, stop, next and prev button to navigate. You can use img tag inside slide div if you like image inside your slide.
var slideIn = 0;
function prev() {
var slide = document.querySelectorAll('.slide'),
prevSlide = (typeof slide[slideIn-1] !== 'undefined')? slideIn-1 : slide.length-1;
if (slide[prevSlide] && slide[slideIn]){
slide[slideIn].className = 'slide out';
slide[prevSlide].className = 'slide in';
slideIn = prevSlide;
}
}
function next() {
var slide = document.querySelectorAll('.slide'),
nextSlide = (typeof slide[slideIn+1] !== 'undefined')? slideIn+1 : 0;
if (slide[nextSlide] && slide[slideIn]){
slide[slideIn].className = 'slide out';
slide[nextSlide].className = 'slide in';
slideIn = nextSlide;
}
}
var playInterval,
PlayTimer = 1000; // 1 second
function play() {
next();
playInterval = setTimeout(play,PlayTimer);
}
function stop() {
clearTimeout(playInterval);
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div>div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 1s 1;
-moz-animation: comein 1s 1;
animation: comein 1s 1;
animation-fill-mode: both;
}
#keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 1s 1;
-moz-animation: goout 1s 1;
animation: goout 1s 1;
animation-fill-mode: both;
}
#keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
<div class="slide in">1st Slide content</div>
<div class="slide">2nd Slide content</div>
<div class="slide">3rd Slide content</div>
<div class="slide">4th Slide content</div>
</div>
<button onclick="prev();">Prev</button>
<button onclick="next();">Next</button>
<button onclick="play();">Play</button>
<button onclick="stop();">Stop</button>

javascript slideshow's recursive function not working

I don't know why the if statement doesn't work.
<script>
var slideIndex = 0;
function slideShow(){
var images= document.getElementsByClassName('slider-box')[0].getElementsByTagName('img');
images[slideIndex].classList.remove('show-slide');
if(slideIndex > images.length-1)
slideIndex = 0;
slideIndex++;
images[slideIndex].classList.add('show-slide');
setInterval(slideShow,2000);
}
slideShow();
</script>
I have 3 images in HTML .
The variable slideIndex goes up to 3 and stays at 3.

You shouldn't use classList as it isn't properly supported:
var slider = document.getElementById("slider");
var sliderIndex = 0;
function slide() {
for (var i = 0; i < slider.children.length; i++) {
var cls = slider.children[i].getAttribute("class").replace(/.show/ig, '');
slider.children[i].setAttribute("class", cls);
}
slider.children[sliderIndex].setAttribute(
"class",
slider.children[sliderIndex].getAttribute("class") + " show"
);
sliderIndex++;
if (sliderIndex > slider.children.length - 1) {
sliderIndex = 0;
}
}
slide();
setInterval(slide, 3000);
#slider {} #slider .slide {
position: absolute;
-moz-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
transition: all 1s linear 0s;
opacity: 0 !important;
filter: alpha(opacity=0) !important;
}
#slider .slide.show {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
<div id="slider">
<img class="slide" src="http://placehold.it/310x150/E8117F/000000?text=1" />
<img class="slide" src="http://placehold.it/310x150/7812E5/000000?text=2" />
<img class="slide" src="http://placehold.it/310x150/128AE5/000000?text=3" />
<img class="slide" src="http://placehold.it/310x150/12E594/000000?text=4" />
<img class="slide" src="http://placehold.it/310x150/E5B412/000000?text=5" />
</div>

try this:
<script>
var slideIndex = 0;
function slideShow(){
var images= document.getElementsByClassName('slider-box')[0].getElementsByTagName('img');
images[slideIndex].classList.remove('show-slide');
slideIndex++;
if(slideIndex > images.length) slideIndex = 0;
images[slideIndex].classList.add('show-slide');
setInterval(slideShow,2000);
}
slideShow();
</script>

Smooth CSS animation in reverse

I recently came across GotoMeeting's website and I was very taken with the animated footer that slides away after you scroll down a bit. I wanted to re-create it myself and I mostly have it working. Here is my fiddle. The issue I have is that when you scroll up it 'snaps' into place rather than animating back up. What can I do to fix that?
Here is my code as well.
<html>
<head>
<style>
body {
width:100%;
height:1600px;
margin:0;
}
#bar {
position:fixed;
bottom:0;
width:100%;
height:100px;
background-color:gray;
}
#-webkit-keyframes slideout {
0% {
-webkit-transform:translateY(0);
transform:translateY(0);
}
100% {
visibility:hidden;
-webkit-transform:translateY(100%);
transform:translateY(100%);
}
}
#keyframes slideout {
0% {
-webkit-transform:translateY(0);
transform:translateY(0);
}
100% {
visibility:hidden;
-webkit-transform:translateY(100%);
transform:translateY(100%);
}
}
.slide-down {
-webkit-animation-duration:3s;
-webkit-animation-fill-mode:both;
-webkit-animation-name:slideout;
animation-duration:3s;
animation-fill-mode:both;
animation-name:slideout;
}
#-webkit-keyframes slidein {
0% {
visibility:visible;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0);
}
}
#keyframes slidein {
0% {
visibility:visible;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0);
}
}
.slide-up {
-webkit-animation-duration:6s;
-webkit-animation-fill-mode:both: -webkit-animation-name:slidein;
animation-duration:6s;
animation-fill-mode:both: animation-name:slidein;
}
</style>
<script type="text/javascript">
function onScrollBody() {
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
document.getElementById("scrollinfo").innerHTML = top;
if (top > 200) document.getElementById("bar").className = "slide-down";
else if (top < 200) document.getElementById("bar").className = "slide-up";
}
</script>
</head>
<body onscroll="onScrollBody()">
<div id="bar">
<p>TRY FOR FREE</p>
<p id="scrollinfo"></p>
</div>
</body>
</html>

Since you're just animating a single property from 0% to 100%, I would simply recommend using transition which will automatically animate a property when it changes its value. That way, you simply need to add/remove a single CSS class that sets a new value and the change will animate as you want it to.
I updated so you can see what I mean:
window.onscroll = onScrollBody;
function onScrollBody() {
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
document.getElementById("scrollinfo").innerHTML = top;
if (top > 200) document.getElementById("bar").className = "slide-down";
else if (top < 200) document.getElementById("bar").className = "";
//var nYScroll = document.body.scrollTop;
//document.getElementById("scrollinfo").innerHTML = nYScroll;
//if (nYScroll > 200) document.getElementById("bar").className = "slide-down";
//else if (nYScroll < 200) document.getElementById("bar").className = "slide-up";
}
body {
width:100%;
height:1600px;
margin:0;
}
#bar {
position:fixed;
bottom:0;
width:100%;
height:100px;
background-color:gray;
transition: transform 1s ease-out;
-webkit-transition: transform 1s ease-out;
}
.slide-down {
-webkit-transform:translateY(100%);
transform:translateY(100%);
}
<body onscroll="onScrollBody()">
<div id="bar">
<p>TRY FOR FREE</p>
<p id="scrollinfo"></p>
</div>
</body>