We Keep Coding

How to make a generic toggle function in JQuery?

I have a sidemenu in HTML like this:
_Layout.cshtml
<div class="col nav-left h-100">
<p>Menu</p>
</div>
In my Site.js I have made a generic JQuery function for the toggle:
var eventHandler = {
addToggle: function addToggle(btnElem, openEvent, closeEvent) {
const isClosedClass = 'this-is-closed';
btnElem.click(function () {
if ($(this).hasClass(isClosedClass)) {
openEvent();
} else {
closeEvent();
}
});
}
};
In my _Layout.cshtml I call this function like this:
<script>
eventHandler.addToggle($(".btn-toggle-something"),
function () {
// Slide down
},
function () {
// Slide up
});
</script>
Now I getting stuck how to write the logic for the actual toggle on a div.
How can I toggle my side menu with a generic function?
Sources I looked:
https://api.jquery.com/toggle/
How to toggle (hide / show) sidebar div using jQuery

.slideUp() and .slideDown() in combination with .toggleClass() will work - please see below:
var eventHandler = {
addToggle: function addToggle(btnElem, openEvent, closeEvent) {
const isClosedClass = 'this-is-closed';
btnElem.click(function () {
if ($(this).hasClass(isClosedClass)) {
openEvent();
} else {
closeEvent();
}
// Toggle `isClosedClass` for next time this is clicked.
btnElem.toggleClass(isClosedClass);
});
}
};
// Bind slideDown/slideUp.
var leftNav = $('.nav-left');
eventHandler.addToggle($('.btn-toggle-something'),
function () {
leftNav.slideDown();
},
function () {
leftNav.slideUp();
}
);
body {
margin: 0;
padding: 0;
}
p {
margin: 0;
}
.nav-left {
background-color: lightskyblue;
width: 200px;
height: 400px;
}
.btn-toggle-something {
cursor: pointer;
position: fixed;
top: 0;
left: 250px;
height: 50px;
width: 50px;
background-color: salmon;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col nav-left h-100">
<p>Menu</p>
</div>
<div class="btn-toggle-something">Toggle</div>

setInterval issue in custom jquery image slider with both auto slide and buttons

I am creating a custom image slider with custom slide effect in jQuery which has both next & previous buttons and also slides automatically with 5 seconds timeout. Although it works nicely in a quick look but sometimes( I dont know exactly when, maybe when I press the buttons or if I leave it open for some time and minimize the window) the iterval bugs and the slides change after 1 second or less. Also when i press the button i tell it to 1) clear iterval 2) change slide 3) set interval again which means that after i change a slide with the button the timer is set to 5 seconds from the start but this is not happening all the times.Here is the code.
$(document).ready(function() {
'use strict';
var $carousel = $('.carousel');
var $nextBtn = $('#next');
var $prevBtn = $('#prev');
var animationSpeed = 1000;
var pause = 5000;
var interval;
function nextSlide() {
$('.carousel__list').animate({
left: '-200%'
}, 500, function() {
$('.carousel__list').css('left', '-100%');
$('.carousel__item').last().after($('.carousel__item').first());
});
}
function prevSlide() {
$('.carousel__list').animate({
left: '0%'
}, 400, function() {
$('.carousel__list').css('left', '-100%');
$('.carousel__item').first().before($('.carousel__item').last());
});
}
function startSlider() {
interval = setInterval(function() {
nextSlide();
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
$carousel.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$nextBtn.on('click', function() {
stopSlider();
nextSlide();
startSlider();
});
$prevBtn.on('click', function() {
stopSlider();
prevSlide();
startSlider();
});
});
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.carousel {
width: 100%;
height: 65vh;
overflow: hidden;
position: relative;
}
.carousel__list {
width: 400%;
height: 100%;
left: -100%;
position: relative;
list-style: none;
}
.carousel__item {
width: calc(100% / 4);
height: 100%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="carousel">
<ul class="carousel__list">
<li class="carousel__item" style="background-color: red"></li>
<li class="carousel__item" style="background-color: green"></li>
<li class="carousel__item" style="background-color: blue"></li>
<li class="carousel__item" style="background-color: yellow"></li>
</ul>
</section>
<button id="prev">PREVIOUS</button>
<button id="next">NEXT</button>
And here is a codepen: https://codepen.io/anon/pen/erpyJj

You are creating more intervals than you think and you don't actually clear each one because you overwrite the interval variable and then you don't a have a reference to the previous intervals, which may still be active.
What you could do is put every interval you create in an array, then when you need to stop all intervals, iterate through that array, clear each interval and empty the array.
// ...
var intervals = [];
// ...
function stopSlider() {
console.log("stopSlider() intervals (Before clear): ", intervals);
intervals.forEach(function(interval) {
clearInterval(interval); // stop one interval
});
intervals = []; // clear the array
console.log("stopSlider() intervals (After clear): ", intervals);
}
Here is your demo with many console logs. You can see that it doesn't matter how much you click on any button, the slider only automatically slides every 5 s.
$(document).ready(function() {
"use strict";
//cache dom elements
var $carousel = $(".carousel");
var $nextBtn = $("#next");
var $prevBtn = $("#prev");
var animationSpeed = 1000;
var pause = 5000;
var intervals = [];
function nextSlide() {
console.log("nextSlide() intervals: ", intervals);
$(".carousel__list").animate({
left: "-200%"
}, 500, function() {
$(".carousel__list").css("left", "-100%");
$(".carousel__item")
.last()
.after($(".carousel__item").first());
});
}
function prevSlide() {
console.log("prevSlide() intervals: ", intervals);
$(".carousel__list").animate({
left: "0%"
}, 400, function() {
$(".carousel__list").css("left", "-100%");
$(".carousel__item")
.first()
.before($(".carousel__item").last());
});
}
function startSlider() {
console.log("startSlider() interval (BEFORE): ", intervals);
var interval = setInterval(function() {
nextSlide();
}, pause);
intervals.push(interval);
console.log("startSlider() interval (AFTER): ", intervals);
}
function stopSlider() {
console.log("stopSlider() intervals (Before clear): ", intervals);
intervals.forEach(function(interval) {
clearInterval(interval); // stop one interval
});
intervals = []; // clear the array
console.log("stopSlider() intervals (After clear): ", intervals);
}
$carousel.on("mouseenter", stopSlider).on("mouseleave", startSlider);
startSlider();
$nextBtn.on("click", function() {
stopSlider();
nextSlide();
startSlider();
});
$prevBtn.on("click", function() {
stopSlider();
prevSlide();
startSlider();
});
});
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.carousel {
width: 100%;
height: 20vh;
overflow: hidden;
position: relative;
}
.carousel__list {
width: 400%;
height: 100%;
left: -100%;
position: relative;
list-style: none;
}
.carousel__item {
width: calc(100% / 4);
height: 100%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="carousel">
<ul class="carousel__list">
<li class="carousel__item" style="background-color: red"></li>
<li class="carousel__item" style="background-color: green"></li>
<li class="carousel__item" style="background-color: blue"></li>
<li class="carousel__item" style="background-color: yellow"></li>
</ul>
</section>
<button id="prev">PREVIOUS</button>
<button id="next">NEXT</button>

How to call a image class on a regular interval

I am having four classes inside each class a image is called
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
and my css class contains
.ban01 { background-image:url(../images/banner/01.jpg); }
.ban02 { background-image:url(../images/banner/02.jpg); }
.ban03 { background-image:url(../images/banner/03.jpg); }
.ban04 { background-image:url(../images/banner/04.jpg); }
and my Jquery is
$(document).ready(function () {
var totDivs = $(".banner ban03").length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban03").eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
});
how to call these classes in regular intervals sorry if i repeated the question again

html
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
style
.banner { height: 50px }
.ban01 { background: green }
.ban02 { background: blue }
.ban03 { background: red }
.ban04 { background: orange }
javascript
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(change, 2000);
function change(){
$(".banner").hide().eq(currDiv).show();
currDiv = (currDiv + 1) % totDivs;
}
change();
});
http://jsfiddle.net/b2Btj/1/

Did you look on this answer... :-)
jquery-timed-change-of-item-class
Try this while I'm doing your coding. :-D
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.a, .b, .c, .d, .e {
height: 120px;
width: 200px;
}
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
.e {
background-color: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<h1>Testing</h1>
<div id="test" class="a">How Are You Buddy?</div>
<script type="text/javascript">
$( document ).ready(function() {
var array = ['a','b','c','d','e'];//Here is your classes
var len = array.length;
var i=0;
function changeDivClass(d) {
$("#test").removeClass();
$("#test").addClass(array[d]);
}
setInterval(function() {
if(len>=i){
return changeDivClass(i++);
}else{
i=0;
$("#test").removeClass();
$("#test").addClass('a');
}
}, 5000);
});
</script>
</body>
</html>

#Maikay yes I want to rotate the images
Why use JavaScript to rotate image ?
This is possible with only css. Use the property : animation.
.imageRotate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-animation:spin 4s linear 1; // '1' for a single animation, if you need an infinite animation replace '1' by 'infinite'
-moz-animation:spin 4s linear 1;
animation:spin 4s linear 1;
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
<div id="ban01">
<img class="imageRotate" src="http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png">
</div>

not sure what exactly the click trigger on the banner element will do, but maybe this helps:
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(function() {
if (currDiv > totDivs) {
clearInterval(myInterval);
return;
}
$(".banner").eq(currDiv).trigger("click");
currDiv++;
}, 2000);
});

what you could do is that you could run a for loop if you know the counts of the "div"
for(var count=0;count<3;count++)
{
var totDivs = $(".banner ban0"+count).length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban0"+count).eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
}
May this could solve your issue .

Fading the background image of the section - only background

I have this section
<section ID="Cover">
<div id="searchEngine">hello</div>
</section>
I want to fade in/out the background image of Cover. I am using the following function to do that but it fades the whole section. Is there a way I can fade the background only? Something like
$("#Cover").css("background-image").fadeOut(); ??
(I am also setting this image for the first time in the below function)
var imageID=0;
var time=0;
function changeimage(every_seconds)
{
//change the image
if(imageID==0)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover1.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
time=1000;
}
else
{
if(imageID==1)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover2.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==2)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover3.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==3)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover4.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==4)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover5.jpg)");
$("#Cover").fadeIn(time);});
imageID=0;
}
}
}
}
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}

I agree with TrueBlueAussie, It will be easier, if you are using instead of CSS background-img.
Here is a working sample.
<html>
<head>
<style type="text/css">
#bgImg { position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: -1;}
#mainContent{width: 960px; margin: 20px auto; padding: 15px; background: #f2f2f2; text-align: center;}
</style>
</head>
<body>
<img src="yourImg.jpg" id="bgImg">
<section id="mainContent">
<h2>Your Heading</h2>
<p>Your content....</p>
<button id="inBtn">Background Image fade in</button>
<button id="outBtn">Background Image fade out</button>
</section>
</body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
/*
resize function
From Dave Jay's Blog
url: http://davejay.exit42design.com/entry/Design/44/
*/
function resize(){
$("#bgImg")
.width($(window).width())
.height($(window).width() * .67);
if($("#bgImg").height() <= $(window).height()){
$("#bgImg")
.height($(window).height())
.width($(window).height() * 1.5);
}
}
$(document).ready(function(){
resize();
$("#inBtn").on("click",function(){
$("#bgImg").fadeIn();
});
$("#outBtn").on("click",function(){
$("#bgImg").fadeOut();
});
});
$(window).resize(function(){ resize(); });
</script>
</html>

How to command if ( ..) don't executive setTimeout()

This Demo,
After landing page it will show btn2(green area), then user have 2 option:
1. user do nothing - setTimeout()
2. user hover to btn2- show btn3(blue).
I stuck in 2. after hover to btn2 and btn3 be show. btn1(red) still fadeIn how to cancel it?
Any suggestion will be appreciated.
<div class="btn btn1"></div>
<div class="btn btn2"></div>
<div class="btn btn3"></div>
.btn{
width: 200px;
position: absolute;
}
.btn1{
background-color: red;
height: 100px;
width: 100px;
}
.btn2{
background-color: green;
height: 200px;
opacity: 0.3;
display: none;
}
.btn3{
background-color: blue;
height: 200px;
opacity: 0.3;
display: none;
}
jQuery
$(function(){
function navctr(){
//landing
$('.btn1').hide();
$('.btn2').show();
setTimeout(function(){
$('.btn2').fadeOut(50);
$('.btn1').fadeIn(50);
}, 2250);
//after click
$('.btn1').click(function(){
$('.btn1').fadeOut(100);
$('.btn2').delay(100).fadeIn(50);
});
//both
$('.btn2').hover(function(){
$('.btn2').hide();
$('.btn3').fadeIn(100);
});
$('.btn3').mouseleave(function(){
$('.btn3').fadeOut(50);
$('.btn1').fadeIn(100);
});
};
navctr();
});

Use the method clearTimeout() : documentation it will remove a timeout previously set on your document.
With your code it would be something like this :
$(function(){
function navctr(){
var myTimeout;
//landing
$('.btn1').hide();
$('.btn2').show();
myTimeout = setTimeout(function(){
$('.btn2').fadeOut(50);
$('.btn1').fadeIn(50);
}, 2250);
//after click
$('.btn1').click(function(){
$('.btn1').fadeOut(100);
$('.btn2').delay(100).fadeIn(50);
});
//both
$('.btn2').hover(function(){
$('.btn2').hide();
$('.btn3').fadeIn(100);
clearTimeout(myTimeout); // remove the setTimeout
});
$('.btn3').mouseleave(function(){
$('.btn3').fadeOut(50);
$('.btn1').fadeIn(100);
});
};
navctr();
});