Develop Reference

Vanilla Javascript ES6 equivalent of jQuery toggle()?

This jQuery toggle() function is working great. What is good practice for doing the same in vanilla javascript (ES6 preferred)?
$("#sign_up_btn").click(function(e) {
$(signUpForm).toggle("hide");
$(loginForm).toggle("hide");
});
$("#login_btn").click(function(e) {
$(signUpForm).toggle("hide");
$(loginForm).toggle("hide");
});

Native Toggle
Class can be toggled natively via Element.classList.toggle:
const button = document.querySelector('#sign_up_btn');
button.addEventListener('click', e => {
document.querySelector('.content').classList.toggle('hide')
})
.hide {
display: none;
}
<button id="sign_up_btn">toggle</button>
<div class="content">Toggle this content</div>

You can do something like this:
Note: the CSS is just so we can test here.
document.getElementById('sign_up_btn').addEventListener('click', () => {
var signUpForm = document.getElementById('signUpForm');
var loginForm = document.getElementById('loginForm');
if(window.getComputedStyle(signUpForm).display === "block") {
signUpForm.style.display = "none";
loginForm.style.display = "block";
} else {
signUpForm.style.display = "block";
loginForm.style.display = "none";
}
});
#signUpForm {
position: relative;
float: left;
background-color: #09f;
width: 100px;
height: 100px;
display: block;
margin-right: 20px;
}
#loginForm {
position: relative;
float: left;
background-color: #f00;
width: 100px;
height: 100px;
display: none;
}
#sign_up_btn {
position: relative;
float: left;
margin-right: 20px;
}
<input type="button" id="sign_up_btn" value="Sign up" />
<div id="signUpForm">Sign up form</div>
<div id="loginForm">Log in form</div>

You can do this way.
var show = function (elem) {
elem.style.display = 'block';
};
var hide = function (elem) {
elem.style.display = 'none';
};
var toggle = function (elem) {
// If the element is visible, hide it
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
return;
}
// Otherwise, show it
show(elem);
};
// Listen for click events
document.addEventListener('click', function (event) {
// Make sure clicked element is our toggle
if (!event.target.classList.contains('toggle')) return;
// Prevent default link behavior
event.preventDefault();
// Get the content
var content = document.querySelector(event.target.hash);
if (!content) return;
// Toggle the content
toggle(content);
}, false);
<p>
<a class="toggle" href="#example">Toggle Div</a>
</p>
<div class="toggle-content" id="example">
Here's some text we want to toggle visibility of. Let's do it!
</div>

If signUpForm and loginForm are ids then you can try the following:
document.getElementById('sign_up_btn').addEventListener('click', function(){
elToggle();
});
document.getElementById('login_btn').addEventListener('click', function(){
elToggle();
});
function elToggle(){
var s = document.getElementById('signUpForm');
if (s.style.display == "none") {
s.style.display = "block";
} else {
s.style.display = "none";
}
var l = document.getElementById('loginForm');
if (l.style.display == "none") {
l.style.display = "block";
} else {
l.style.display = "none";
}
}

How to stop mousedown event on reaching specific number in increment

How can I break, kill or stop mousedown event when hits an specific benchmark?
For example in following code, I want to disable the Key and event when the temp hits 30
$(document).ready(function() {
var temp = 0;
var to = null;
var iv = null;
$("#ClickMe").on("mousedown", function() {
temp++;
$("#Temp").html(temp);
to = setTimeout(function() {
iv = setInterval(function() {
temp++;
$("#Temp").html(temp);
}, 75);
}, 500);
}).on("mouseup mouseleave", function() {
clearTimeout(to);
clearInterval(iv);
});
});
div {
margin: 10px;
padding: 26px;
background-color: yellow;
text-align: center;
border-radius: 10px;
max-width: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="ClickMe">CLICK ME</button>
<div id="Temp">0</div>

ok, complete answer, with code...
$(document).ready(function() {
var temp = 0;
var to = null;
var iv = null;
$("#ClickMe")
.on("mousedown", function() {
temp++;
$("#Temp").html(temp);
to = setTimeout(function() {
iv = setInterval(moreClick, 75);
}, 500);
})
.on("mouseup mouseleave", function() {
clearTimeout(to);
clearInterval(iv);
test_stopClick();
});
function moreClick() {
$("#Temp").html(++temp);
test_stopClick();
}
function test_stopClick() {
if (temp >= 30 ) {
clearTimeout(to);
clearInterval(iv);
$("#ClickMe")
.off("mousedown mouseup mouseleave")
.prop('disabled', true);
}
}
});
div {
margin: 10px;
padding: 26px;
background-color: yellow;
text-align: center;
border-radius: 10px;
max-width: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="ClickMe">CLICK ME</button>
<div id="Temp">0</div>

Add an if statement, and then use jQuery's .off() method:
$(document).ready(function() {
var temp = 0;
var to = null;
var iv = null;
$("#ClickMe").on("mousedown", function() {
if (temp < 30) {
temp++;
$("#Temp").html(temp);
to = setTimeout(function() {
iv = setInterval(function() {
temp++;
$("#Temp").html(temp);
}, 75);
}, 500);
} else {
$("#ClickMe").off("mousedown");
}
}).on("mouseup mouseleave", function() {
clearTimeout(to);
clearInterval(iv);
});
});
div {
margin: 10px;
padding: 26px;
background-color: yellow;
text-align: center;
border-radius: 10px;
max-width: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="ClickMe">CLICK ME</button>
<div id="Temp">0</div>

How to speed up fadein / fadeout

I'm using the following code to fadein/fadeout images every second which works fine but I would like to fade the images in and out every 1/2 second. I can change the setInterval to 500 but this simply causes a bit of a mess. I clearly need to redfine fadein and fadeout.
I have bootstrap loaded so I'm guessing the functions are defined within the bootstrap js but how do I respecify their timing?
var $els = $('div[id^=image]'),
i = 0,
len = $els.length;
var start = 1;
var end = 999999999999999;
jQuery(function () {
$els.slice(1).hide();
spin = setInterval(function () {
$els.eq(i).fadeOut(function () {
i = Math.floor(Math.random() * len);
$els.eq(i).fadeIn();
});
start = new Date().getTime();
if (start > end) {
clearInterval(spin);
}
}, 1000);
{% for m in myusers %}
if (i == {{ forloop.counter0 }}) { document.getElementById('name{{ forloop.counter0 }}').style.display = 'Block';}
{% endfor %}
});

Since you are using jQuery, why not use fadeOut/fadeIn or fadeToggle?
$(document).ready(function() {
setInterval(function() {
$('.a1, .a2').stop().fadeToggle(500);
}, 500);
});
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 1px;
display: inline-block;
}
.a1,
.a2 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: blue;
}
.a2 {
display: none;
background-color: red;
}
.wrapper2 .a1 {
display: none;
}
.wrapper2 .a2 {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="a1"></div>
<div class="a2"></div>
</div>
<div class="wrapper wrapper2">
<div class="a1"></div>
<div class="a2"></div>
</div>

var box = document.getElementById('box');
function fadeOutIn(elem, speed ) {
if (!elem.style.opacity) {
elem.style.opacity = 1;
} // end if
var outInterval = setInterval(function() {
elem.style.opacity -= 0.02;
if (elem.style.opacity <= 0) {
clearInterval(outInterval);
var inInterval = setInterval(function() {
elem.style.opacity = Number(elem.style.opacity)+0.02;
if (elem.style.opacity >= 1)
clearInterval(inInterval);
}, speed/50 );
} // end if
}, speed/50 );
} // end fadeOut()
fadeOutIn(box, 2000 );
Hello please see my solution . It is your helpful or not.
Thanks.

How to fade svg path in/out one after the other?

I am doing the following but it is fading in/out the path all at once and not one after the other
var periodClass = jQuery(this).parent().attr("class");
jQuery("svg path").each(function(i) {
var elem = jQuery(this);
if (elem.hasClass(periodClass)) {
elem.addClass('active').css('transition-delay', i/5000 + 's');
} else {
elem.removeClass('active').css('transition-delay', i/5000 + 's');
}
});
CSS
path {
opacity: 0;
transition-property: opacity;
transition-duration: 0.7s;
}
path.active {
opacity: 1;
transition-property: opacity;
transition-duration: 0.7s;
}
Also tried this but still, all at once
var periodClass = jQuery(this).parent().attr("class");
jQuery("svg path").each(function(i) {
var elem = jQuery(this);
if (elem.hasClass(periodClass)) {
elem.addClass('active');
elem.each(function(index) {
$(this).delay(400*index).fadeIn(300);
});
} else {
elem.removeClass('active');
elem.each(function(index) {
$(this).delay(400*index).fadeOut(300);
});
}
});

You need to use setTimeout();
here's an example
$(document).ready(function(){
$('div').each(function(i){
var ThisIt = $(this);
setTimeout(function(){
ThisIt.addClass('active');
} , i * 1000);
});
});
div{
margin: 20px;
padding: 10px;
font-size: 30px;
text-align: center;
background : #eee;
display: none;
}
.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

Well, one way to do it:
var pnum = 0;
var $paths = $("svg path");
nextFade();
function nextFade () {
$paths.eq(pnum).fadeOut( "slow", function() {
// Animation complete. Increase counter Call next fade.
pnum++;
if(pnum < $paths.length){
nextFade();
}
});
}

Using Parallax with Image Slideshow

I'm trying to create a parallax effect with a simple slideshow that I made.
First, I have one with just the basic parallax.js implementation:
fiddle: https://jsfiddle.net/jzhang172/bcdkvqtq/1/
.parallax-window {
min-height: 400px;
position:relative;
}
.ok{
font-size:50px;
background:gray;
color:blue;
height:300px;
width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll" data-image-src="http://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951g">
</div>
<div class="ok">Hey there</div>
This works, however, now I want this effect on image slideshow, with or without parallax.js is fine but I would like the same parallax effect:
I'm not sure how to apply it to the images:
fiddle: https://jsfiddle.net/jzhang172/k4fygvhg/1/
$(document).ready(function() {
var slides = $('.featured-wrapper img');
var slideAtm = slides.length;
var currentPos = 0;
slides.hide();
function roll(){
var slide = slides.eq(currentPos);
slide.fadeIn(2000);
setTimeout(up,1500);
}
roll();
function up(){
currentPos +=1;
slides.fadeOut(1500);
setTimeout(roll, 500);
if(currentPos > slideAtm -1){
currentPos = 0;
}
}
});
.featured-wrapper img{
max-width:200%;
max-height:200%;
min-width:100vw;
}
.featured-wrapper{
height:500px;
width:100%;
overflow:hidden;
}
.things{
font-size:50px;
height:500px;
width:100%;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="featured-wrapper" data-parallax="scroll">
<img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png" alt="">
<img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png" alt="">
<img src="https://assets.pokemon.com/static2/_ui/img/account/sign-up.png" alt="">
<img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
<img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
</div>
<div class="things">I'm the stuff underneath</div>

My proposal is to preload the images and, using the complete events of fadeIn / fadeOut instead of setTimeOut.
I hope this could help you.
var imagesArray = ["http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
"http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
"https://assets.pokemon.com/static2/_ui/img/account/sign-up.png",
"http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png",
"http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png"];
function preloadImg(pictureUrls, callback) {
var i, j, loaded = 0;
var imagesArray = [];
for (i = 0, j = pictureUrls.length; i < j; i++) {
imagesArray.push(new Image());
}
for (i = 0, j = pictureUrls.length; i < j; i++) {
(function (img, src) {
img.onload = function () {
if (++loaded == pictureUrls.length && callback) {
callback(imagesArray);
}
};
img.src = src;
}(imagesArray[i], pictureUrls[i]));
}
};
function roll(imagesArray, currentPos, max){
if (max < 0) {
return;
}
var slide = $('.parallax-mirror').find('img').attr('src', imagesArray[currentPos].src);
slide.fadeIn(2000, function() {
slide.fadeOut(1500, function() {
currentPos++;
if(currentPos >= imagesArray.length){
currentPos = 0;
max--;
}
roll(imagesArray, currentPos, max);
});
});
}
$(function () {
preloadImg(imagesArray, function (imagesArray) {
roll(imagesArray, 0, 3);
});
});
.parallax-window {
min-height: 400px;
position:relative;
}
.ok {
font-size:50px;
background:gray;
color:blue;
height:500px;
width:100%;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll"
data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="ok">I'm the stuff underneath</div>

Parallax effects are easy to maintain if you conceptually boil them down to their basics. I've added 2 lines of code to your project which (hopefully) will provide you with the result you're after.
The code I added was
.featured-wrapper img{
z-index: -1;
position: fixed;
}
https://jsfiddle.net/simonstern/k4fygvhg/6/

Try this, Hope this Helps..:)
fiddle link https://jsfiddle.net/e05m68wd/1/
$(document).ready(function() {
var imgSrc = ["https://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png", "https://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png", "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png"];
var counter = 1;
var duration = 2000;
var tTime = 300;
var v = setInterval(function() {
$('.parallax-mirror').animate({
'opacity': 0
}, {
duration: tTime,
complete: function() {
$(this).find('img').attr('src', imgSrc[counter]).end().animate({
'opacity': 1
}, tTime);
}
});
if (counter > imgSrc.length - 1) {
counter = 0
} else {
counter++
};
},
duration);
});
.featured-wrapper {
height: 500px;
width: 100%;
overflow: hidden;
}
.things {
font-size: 50px;
height: 500px;
width: 100%;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="featured-wrapper" data-parallax="scroll" data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="things">I'm the stuff underneath</div>