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

Javascript Fading out/in on mouse movement

I want to have a fixed nav which fades out when the mouse isn't moving and fades back in when it does.
I've came across this other post which does the job but the problem is that it uses visibility and I want to use opacity that way I can make it fade in and out with a transition transition: all .4s ease-in-out;
$("#fp-nav").style.opacity = "0";
$("html").mousemove(function(event) {
$("#fp-nav").style.opacity = "1";
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function() {
$("#fp-nav").style.opacity = "0";
}, 1000);
}
function myStopFunction() {
if (typeof myVar != 'undefined') {
clearTimeout(myVar);
}
}
#fp-nav {
position: fixed;
z-index: 100;
top: 50%;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transition: all .4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fp-nav">
Hello world Hello world Hello world Hello world
</div>
Or am I supposed to use fp-nav.style.opacity = "0"; instead of $("#fp-nav").style.opacity = "0";

You can replace .hide() and .show() by your own css code to visually hide the bar: hide becomes css("opacity", 0) and show becomes css("opacity", 1).
Then, you add a transition to your bar:
.navbar {
transition: opacity 1000ms ease-in-out;
};
$("div").css("opacity", 0);
$("html").mousemove(function( event ) {
$("div").css("opacity", 1);
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function(){
$("div").css("opacity", 0);
}, 1000);
}
function myStopFunction() {
if(typeof myVar != 'undefined'){
clearTimeout(myVar);
}
}
div {
transition: opacity 1000ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>navbar</div>
It might be nice to let the css define how you want to hide/show via an additional class. You can then, for example, use addClass("is-hidden") and removeClass("is-hidden"):
var hiddenClass = "is-hidden";
var customHide = function($el) {
$el.addClass(hiddenClass);
}
var customShow = function($el) {
$el.removeClass(hiddenClass);
}
customHide($("div"));
$("html").mousemove(function( event ) {
customShow($("div"));
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function(){
customHide($("div"));
}, 1000);
}
function myStopFunction() {
if(typeof myVar != 'undefined'){
clearTimeout(myVar);
}
}
/* CSS now determines how we want to hide our bar */
div {
position: relative;
background: green;
transition: transform 500ms ease-in-out;
}
div.is-hidden {
transform: translateY(-160%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>navbar</div>

$(document).on('mousemove', function(){
$('#nav').addClass('shown');
setTimeout(function(){
$('#nav').removeClass('shown');
}, 5000);
});
#nav {
opacity: 0;
transition: opacity 1s ease-in-out;
background: black;
width: 300px;
height: 100px;
}
#nav.shown {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
</div>
Here's my go:
Obviously, edit the timings and opacity as needed. The animations themselves are pure CSS, and JS is just used to add/remove a class from the nav.

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>

CSS: How to add smooth shift to div width upon text change?

If anyone can phrase this question better than I can, please advise and I will alter (or edit yourself).
Here's my current jsfiddle: https://jsfiddle.net/5v7mzadu/
My HTML:
<div class="text-cycler">
WE <div class="c-text" id="ctext-1">CARE</div>
<div class="c-text" id="ctext-2">THINK</div>
<div class="c-text" id="ctext-3">SEE</div>
<div class="c-text" id="ctext-1">KNOW</div>
</div>
My CSS:
.text-cycler {
text-align:center;
font-size:25px;
}
.c-text {
display:inline-block
}
My Javascript:
var divs = $('div[id^="ctext-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
As you can see the second word fades in/out,. I'd like to add a smooth transition to the div, so that the width of the div container does NOT abruptly change width size. (so that the width "snap" is more smooth)
Can anyone help?

I believe you needed the animation over the content and text alignment center.
And indeed this must solve your purpose.
I have added span{white-space: nowrap; vertical-align: text-top;} to force it to align in single line, and added jQuery animate method to animate the width of the rotating text
And here's the fiddle for you to play around
var divs = $('div[id^="ctext-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i)
.animate(400, function() {
$('.x').animate({
width: $(this).innerWidth()
});
})
.fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
.text-cycler {
text-align: center;
font-size: 25px;
}
span {
white-space: nowrap;
vertical-align: text-top;
}
.c-text {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler">
<span> WE </span>
<span class="x">
<div class="c-text" id="ctext-1">CARE</div>
<div class="c-text" id="ctext-2">THINK</div>
<div class="c-text" id="ctext-3">SEE</div>
<div class="c-text" id="ctext-1">KNOW</div>
</span>
</div>

See this snippet
var divs = $('div[id^="ctext-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
.text-cycler {
font-size:25px;
position:fixed; /*added*/
padding-left:40% /*added*/
}
.c-text {
display:inline-block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler" align="center">
WE <div class="c-text" id="ctext-1">CARE</div><div class="c-text" id="ctext-2">THINK</div><div class="c-text" id="ctext-3">SEE</div><div class="c-text" id="ctext-1">KNOW</div>
</div>

JavascriptLess way.
If you want to get funky. (No seriously, this is more a funky solution than usable)
.text-cycler {
width:75%;
margin:auto;
user-select: none;
text-align:center;
font-size:5vw;
}
.text-cycler:after {
content:"";
display:inline-block;
animation: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
#keyframes change {
0% {
content: "CARE";
opacity: 0;
}
3% {
opacity: 1;
}
22% {
opacity: 1;
}
25% {
content: "CARE";
opacity: 0;
}
25.1% {
content: "THINK";
}
28% {
opacity: 1;
}
47% {
opacity: 1;
}
50% {
content: "THINK";
opacity: 0;
}
50.1% {
content: "SEE";
}
53% {
opacity: 1;
}
72% {
opacity: 1;
}
75% {
content: "SEE";
opacity: 0;
}
75.1% {
content: "KNOW";
}
78% {
opacity: 1;
}
97% {
opacity: 1;
}
100% {
content: "KNOW";
opacity: 0;
}
}
<div class="text-cycler">
WE
</div>

How to get the Apple Javascript Split Flap Counter to run on pure CSS

How can I replicate apple's split flap counter without using the filmstrip image? I would like to create something similar displaying words and other special characters.
Maybe using CSS transitions or css transforms?
link to apple site: http://www.apple.com/itunes/10-billion-app-countdown/
Thanks.

I've implemented this using DIVs, setInterval, setTimeout and CSS3 (webkit-transform, animation, and keyframes).
Here's the rough code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.19.1" />
<style>
#-webkit-keyframes spin {
0% { -webkit-transform-origin: 100% 100%; -webkit-transform: rotateX(0deg) skew(0deg, 0deg); }
100% { -webkit-transform-origin: 100% 100%; -webkit-transform: rotateX(90deg) skew(5deg, 0deg); }
}
#-webkit-keyframes spin2 {
0% { -webkit-transform-origin: 0% 0%; -webkit-transform: rotateX(90deg) skew(-5deg, 0deg); }
100% { -webkit-transform-origin: 0% 0%; -webkit-transform: rotateX(0deg) skew(0deg, 0deg); }
}
.box span { font-family: arial; font-weight:bold; font-size: 72px; display:inline-block; }
.scale { -webkit-animation: spin 0.15s infinite linear; }
.scale2 { -webkit-animation: spin2 0.15s infinite linear; }
.dv { background-color: #FFF; border:1px solid #333; display:block; height:45px; width:80px; overflow:hidden; text-align: center; line-height:100%; }
.dv > div > span { width:100%; vertical-align:middle }
.dv > div { height:200%; }
.down > div { position:relative; top:-100%; }
.spn { position:absolute; }
.spn.top { z-index:20 }
.spn.top > .dv { z-index:15 }
.spn.down { z-index:10 }
.spn.down > .dv { z-index:5 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
var ctr, loop;
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ ";
var chars = "!\"#$%&'()*+,-./:;<=>?#[\]^_`{|}~";
var numbers = "0123456789";
var duration = 150;
function switchToNext(loopthis, end, box) {
box.removeClass('normal').addClass('scale');
box.text(loopthis.charAt(ctr));
ctr++;
if(ctr == end) clearInterval(loop);
if(ctr > loopthis.length -1) ctr = 0;
}
function loopThrough(a, b) {
var tmpStart, tmpEnd, stype, etype, loopthis;
stype = letters;
tmpStart = stype.indexOf(a);
if(tmpStart < 0) { stype = numbers; tmpStart = numbers.indexOf(a); }
if(tmpStart < 0) { stype = chars; tmpStart = chars.indexOf(a); }
etype = letters;
tmpEnd = etype.indexOf(b);
if(tmpEnd < 0) { etype = numbers; tmpEnd = numbers.indexOf(b);}
if(tmpEnd < 0) { etype = chars; tmpEnd = chars.indexOf(b);}
if(stype !== etype) { loopthis = stype + etype; tmpEnd = tmpEnd + stype.length }
else { loopthis = stype; }
ctr = tmpStart;
box = $("div.box").children("span#1").find("span");
tmpbox = $("div.box").children("span#2").find("span");
boxa = $("div.box").children("span#1").children("div.up").find("span");
boxb = $("div.box").children("span#1").children("div.down").find("span");
tmpboxa = $("div.box").children("span#2").children("div.up").find("span");
tmpboxb = $("div.box").children("span#2").children("div.down").find("span");
var delay;
loop = setInterval(function() {
end = tmpEnd + 1;
boxa.parent().parent().addClass('scale');
delay = setTimeout(function() { boxb.parent().parent().addClass('scale2'); }, duration);
if(ctr+1 < end) { setTimeout( function(){ tmpboxa.text(loopthis.charAt(ctr));}, duration/2); }
boxa.text(loopthis.charAt(ctr));
boxb.text(loopthis.charAt(ctr));
if(ctr == tmpStart) tmpboxb.text(loopthis.charAt(ctr)); else setTimeout(function() { tmpboxb.text(loopthis.charAt(ctr-1)); }, (duration/2));
ctr++;
if(ctr == end) { setTimeout(function() { boxb.parent().parent().removeClass('scale2'); }, duration); clearInterval(loop); boxa.parent().parent().removeClass('scale'); clearTimeout(delay); }
if(ctr > loopthis.length -1) ctr = 0;
}, duration);
//box.removeClass('scale').addClass('normal');
}
var str = new String($("div.box").text());
loopThrough("A","9");
});
</script>
</head>
<body>
<div class='box'>
<span id="1" class='spn top'>
<div class='dv up'><div><span></span></div></div>
<div class='dv down'><div><span></span></div></div>
</span>
<span id="2" class='spn down'>
<div class='dv up'><div><span></span></div></div>
<div class='dv down'><div><span></span></div></div>
</span>
</div>
</body>
</html>

While not in pure CSS, someone has built a nice script to exactly replicate the functionality from Apple's site.