We Keep Coding

How do I stop a function? ( jQuery, .hover() )

When you hover over the squares of the picture change one after another using the interval function. Can't solve 2 problems.
1. The function should be started only at the square on which the point.
2. The function should stop if the cursor has left the square.
Help me think.
$('.block').hover(function(){
setInterval(myFuncSuper2, 3000);
});
// Change pic on hover
function changePic(i) {
setTimeout(function () {
jQuery(".hero-cat_" + i).addClass("active");
jQuery(".hero-cat_" + i).siblings().removeClass("active")
}, i * 1000)
}
function myFuncSuper2() {
for (let i = 0; i <= 3; i++) {
changePic(i);
}
}
.block {
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
cursor: pointer;
}
.block img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
display: none;
}
.block img.active {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>

What you are trying to achieve needs two things:
mouseenter and mouseleave
1.2. because mousehover will keep on adding events when you keep hovering. you need to stop that.
And this for context of current element
2.1 because you need to enable only selected element for hover, not entire .block set
$('.block').mouseenter(startMyFunc);
$('.block').mouseleave(stopMyFunc);
var myInterval;
function myFuncSuper2() {
for (let i = 0; i <= 3; i++) {
setTimeout(function() {
jQuery(this).find(".hero-cat_" + i).addClass("active");
jQuery(this).find(".hero-cat_" + i).siblings().removeClass("active")
}.bind(this), i * 300)
}
}
function startMyFunc() {
myInterval = window.setInterval(myFuncSuper2.bind(this), 1000)
}
function stopMyFunc() {
if (myInterval) {
clearInterval(myInterval);
}
}
.block {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
cursor: pointer;
}
.block img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
display: none;
}
.block img.active {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>

-- Edit: added clearing the timeouts created in myFuncSuper2 ---
Set the function for hover off, and clear the interval
var interval = null;
var timeouts = [0,0,0];
$('.hero-category').hover(function () {
interval = setInterval(myFuncSuper2, 3000)
}, function() {
if (interval) clearInterval(interval);
for (var i = 0; i < timeouts.length; i++) {
if (timeouts[i] !== 0) {
clearTimeout(timeouts[i]);
}
}
});
function myFuncSuper2() {
for (let i = 0; i <= 3; i++) {
timeouts[i] = setTimeout(function() {
jQuery(this).find(".hero-cat_" + i).addClass("active");
jQuery(this).find(".hero-cat_" + i).siblings().removeClass("active")
}.bind(this), i * 300)
}
}

how to show a div when vimeo video reaches certain second?

I am using Froogaloop.js to pause and play the vimeo video externally . Now I want to show a div after 20 second of video has been played. How to achieve this, I searched a lot and was not able to crack the code for it. This is what I have tried so far..
var iframe = document.getElementById('video');
// $f == Froogaloop
var player = $f(iframe);
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.api("play");
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.api("pause");
});
.button {
width: 48px;
height: 48px;
cursor: pointer;
}
.defs {
position: absolute;
top: -9999px;
left: -9999px;
}
iframe {
float: left;
width: 350px;
height: 200px;
}
.buttons {
padding: 1rem;
background: #f06d06;
float: left;
}
body {
padding: 1rem;
}
.show--div-20sec {
width: 100%;
background: red;
height: 80px;
float: left;
display: none;
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/froogaloop.js"></script>
<iframe src="https://player.vimeo.com/video/80312270?api=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>
<!-----------Show this div when video has been played for 20 seconds----->
<div class="show--div-20sec">
Show me after 20 second of video play
</div>
<div class="buttons">
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
</div>
Help much appriciated.. Thanks in advance :)

Try this code
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
var status = $('.status');
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.api("play");
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.api("pause");
});
setTimeout(function () {
player.addEvent('ready', function() {
player.addEvent('playProgress', onPlayProgress);
});
});
function onPlayProgress(data, id) {
var Time = data.seconds;
if (Time >= '20') {
$('.show--div-20sec').show();
}
}
});
DEMO

This is answer of your question i guess, you just need to modify the console.log part.
$(function() {
var iframe = $('#video')[0];
console.log()
var player = $f(iframe);
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause() {}
function onFinish() {}
function onPlayProgress(data) {
if (data.seconds >= 20) {
$('.show--div-20sec').css('display', 'block')
}
}
});
.button {
width: 48px;
height: 48px;
cursor: pointer;
}
.defs {
position: absolute;
top: -9999px;
left: -9999px;
}
iframe {
float: left;
width: 350px;
height: 200px;
}
.buttons {
padding: 1rem;
background: #f06d06;
float: left;
}
body {
padding: 1rem;
}
.show--div-20sec {
width: 100%;
background: red;
height: 80px;
float: left;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe src="//player.vimeo.com/video/80312270?api=1&player_id=video" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>
<!-----------Show this div when video has been played for 20 seconds----->
<div class="show--div-20sec">
Show me after 20 second of video play
</div>
<div class="buttons">
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
</div>

How to add next previous button to js jQuery slider?

I have watch a tutorial on youtube on how to create slider using jquery jquery tutorial slider
But no Previous and Next Button
How to add Previous and Next Button to Jquery Slider
Here is the code:
'use strict';
$(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
#slider {
width: 720px;
height: 400px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}
/* helper css, since we don't have images */
.slide1 {background: red;}
.slide2 {background: blue;}
.slide3 {background: green;}
.slide4 {background: purple;}
.slide5 {background: pink;}
<div class="container">
<div class="header">
<h1 class="text-muted">jQuery Basic Slider</h1>
</div>
<div id="slider">
<ul class="slides">
<li class="slide slide1">slide1</li>
<li class="slide slide2">slide2</li>
<li class="slide slide3">slide3</li>
<li class="slide slide4">slide4</li>
<li class="slide slide5">slide5</li>
<li class="slide slide1">slide1</li>
</ul>
</div>
</div>
Thank you
Thank you

Try this! I added comments in the code about why I did what I did.
$(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var margin = 0; //Create variable for margin
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var length = $slides.length;
var interval;
//Make this a function do that you don't need to keep repeating it
function Slider() {
$slideContainer.animate({
'margin-left': margin //make the margin a variable, so that you can access it in multiple functions
}, animationSpeed, function() {
console.log(currentSlide)
if (currentSlide === length) { //Stop incremening currentSlide here so that it'll be easier to increment later
currentSlide = 1;
margin = 0;
$slideContainer.css('margin-left', 0);
}
});
}
function contSlider() { //changed from startSlider to contSlider
interval = setInterval(function() {
margin -= width; //minus width from the margin
currentSlide++; //Stop incremening currentSlide here
Slider() //tell broswer "insert slider code here"
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
function three() {
clearInterval(interval); //Stop the orignal slider
Slider(); //Immediately perform the slider function
contSlider(); //Continue the slider function
}
function prevSlider() {
if (currentSlide > 1) { //Don't run code if first slide
currentSlide--; //Minus 1 from currentSlide
} else { //if the first slide, move it to the last one
margin = -width * (length - 1); //margin is the value of the last slide
$slideContainer.css('margin-left', margin); //move to the last slide instantly
currentSlide = (length - 1) //make current slide the second last slide (slide 5)
}
margin += width; //Plus a width (to make it move to the previous slide
three(); //Run the three functions
}
function nextSlider() {
if (currentSlide < length){ //Don't run code if last slide
margin -= width; //Minus a width (to make it move to the previous slide
currentSlide++; //Plus 1 from currentSlide
}
three(); //Run the three functions
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', contSlider);
//Make the functions happen when their buttons are clicked (This could be anything)
$(".prev-slide").on("click", prevSlider);
$(".next-slide").on("click", nextSlider) //
contSlider();
});
.button { display: none }
#slider:hover .button {
display: block;
font-size: 3em;
font-weight: bold;
color: #fff;
position: absolute;
top: 180px;
cursor: pointer;
}
.prev-slide {
left: 10px;
}
.next-slide {
right: 10px;
}
#slider {
width: 720px;
height: 400px;
overflow: hidden;
position: relative;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}
/* helper css, since we don't have images */
.slide1 {
background: red;
}
.slide2 {
background: blue;
}
.slide3 {
background: green;
}
.slide4 {
background: purple;
}
.slide5 {
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<h1 class="text-muted">jQuery Basic Slider</h1>
</div>
<div id="slider">
<div class="prev-slide button"><</div>
<div class="next-slide button">></div>
<ul class="slides">
<li class="slide slide1">slide1</li>
<li class="slide slide2">slide2</li>
<li class="slide slide3">slide3</li>
<li class="slide slide4">slide4</li>
<li class="slide slide5">slide5</li>
<li class="slide slide1">slide1</li>
</ul>
</div>
</div>

you can add a click function to next and prev and adding(next) or deducting(prev) margin-left like this:
$('#next').click(function(){
pauseSlider();
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
console.log(width);
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
startSlider();
});
$('#prev').click(function(){
console.log(currentSlide);
console.log($slides.length);
pauseSlider();
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
if (--currentSlide === 1) {
currentSlide = 6;
$slideContainer.css('margin-left', -(width * 5));
console.log('first');
}
});
startSlider();
});
Check the codepen I created for testing: http://codepen.io/adrianrios/pen/evLOyQ
I hope this will help.

restart animation jquery and javascript

Hi i'm creating a jquery slider and i'm having problems to restar the slider when the time(in the setInterval) is over. When the 3 images slide and the last one is showing the animation stays there, but i want to restart to the first image and start the loop again. Could someone help me?
Thanks!
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Slider Jquery Test</title>
<link href="slider.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/slidertest.js"></script>
</head>
<body>
<div id="container">
<ul id="buttons" class="buttons">
<li><img id="left_b" class="left_b" src="imagens/flechae.png" alt="Anterior" onMouseOver="this.src='imagens/flechaehover.png'" onMouseOut="this.src='imagens/flechae.png'"></li>
<li><img id="right_b" class="right_b" src="imagens/flechad.png" alt="Proximo" onMouseOver="this.src='imagens/flechadhover.png'" onMouseOut="this.src='imagens/flechad.png'"></li>
</ul>
<ul id="gallery" class="gallery">
<li><img id="1" class="images" src="imagens/imagem1.jpg" alt="Imagem 1"></li>
<li><img id="2" class="images" src="imagens/imagem2.jpg" alt="Imagem 2"></li>
<li><img id="3" class="images" src="imagens/imagem3.jpg" alt="Imagem 3"></li>
</ul>
</div>
</body>
</html>
CSS
#charset "utf-8";
body{
width: 100%;
height: auto;
}
#container {
width: 100%;
height: auto;
margin: 0;
padding: 0;
/*overflow: hidden;*/
}
.buttons {
width: 100%;
height: auto;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
display: none;
}
.buttons li {
width: 100%;
height: auto;
position: relative;
margin: 0;
padding: 0;
}
.left_b {
width: 20px;
height: 80px;
position: relative;
float: left;
margin-left: 30px;
margin-top: 250px;
}
.right_b {
width: 20px;
height: 80px;
position: relative;
float: right;
margin-right: 30px;
margin-top: 250px;
}
.gallery {
width: 100%;
height: auto;
list-style: none;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.gallery li {
width: auto;
height: auto;
position: relative;
float: left;
}
.images {
width: 1200px;
height: 720px;
position: relative;
float: left;
}
JavaScript
$(function(){
slide();
// Slider
function slide()
{
// Variables
var interval = 0;
var time = 3000;
var seconds = 1000;
var current_image = 1;
var num_images = 0;
var total_width = 0;
var slide_left = "+=1200px";
var slide_right = "-=1200px";
var right_b = $(".right_b");
var left_b = $(".left_b");
var left = "margin-left";
var width = "width";
var gallery = $(".gallery");
var galleryLi = $(".gallery li");
var images = $(".images");
var buttons_class = $(".buttons");
var container = $("#container");
// Calling functions
imagesSize();
hideButtons();
animation();
// Functions
function animation()
{
if(current_image < num_images)
{
loop();
clickRight();
clickLeft();
}
}
function hideButtons()
{
container.hover(function(){
buttons_class.fadeIn();
}, function(){
buttons_class.fadeOut();
});
}
function imagesSize()
{
galleryLi.each(function(){
num_images++;
total_width += 1200;
});
gallery.css(width, total_width + "px");
}
function loop()
{
if(current_image >= 1){
interval = setInterval(moveLeft, time);
}
else if(current_image === num_images){
clearLoop();
moveLeft();
}
}
function clearLoop()
{
clearInterval(interval);
}
function moveLeft()
{
if(current_image < num_images){
gallery.animate({left: slide_right}, seconds);
current_image++;
}
}
function clickRight()
{
right_b.click(function(){
moveLeft();
clearLoop();
loop();
});
}
function moveRight()
{
if(current_image > 1){
gallery.animate({"margin-left": slide_left}, seconds);
current_image--;
}
}
function clickLeft()
{
left_b.click(function(){
moveRight();
clearLoop();
loop();
});
}
} // end of function slide
}); // End of main function

function loop()
{
if(current_image >= 1){
interval = setInterval(moveLeft, time);
}
else if(current_image === num_images){
clearLoop(); // Clear the previous interval
moveLeft();
// Add these two lines after setTimeout to finish the animation.
setTimeout(function(){
current_image = 1;
loop();
}, seconds);
}
}

Jquery image slider Image comes down and fades out

I created a image slider in Jquery, as I move my image clicking the forward or backward button the image which has to change comes down and then fades out. Its like a small fluctuation. Why is this happening ?
JSfiddle link - https://jsfiddle.net/76xjmfjo/2/
HTML
<div class="container">
<img class="back" src="http://placehold.it/50x20/000000"></img>
<div class="slide-container">
<div class="slide">
<img src="http://placehold.it/940x350">
</div>
<div class="slide ">
<img src="http://placehold.it/940x350">
</div>
<div class="slide">
<img src="http://placehold.it/940x350">
</div>
</div>
<img class="forward" src="http://placehold.it/50x20/000000"></img>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.container{
width: 980px;
margin: 0 auto;
}
.slide-container{
position: relative;
margin : 0 auto;
width: 958px;
height: 368px;
}
.slide{
width: 940px;
position: absolute;
padding: 4px;
border: 5px solid black ;
z-index: 1;
}
.active{
position: relative;
}
.back,.forward{
top: 150px;
position:absolute;
z-index: 10000;
cursor: pointer;
}
.forward{
left: 950px;
}
jQUERY
$(document).ready(function () {
var speed = 500;
//showing the first image (adding class active)
$('.slide').first().addClass('active');
$('.slide').hide();
$('.active').show();
//assigning events for the forward and backward buttons
$('.forward').on('click', function () {
nextSlide();
});
$('.back').on('click', function () {
prevSlide();
});
//next Slide function
function nextSlide() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldActive').is(':last-child')) {
$('.oldActive').removeClass('oldActive');
$('.slide').first().addClass('active');
}
else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}
//Previous slide function
function prevSlide() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldActive').is(':first-child')) {
$('.oldActive').removeClass('oldActive');
$('.slide').last().addClass('active');
}
else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(500);
$('.active').fadeIn(500);
}
});

Just fadeIn $('.active') on complete function of $('.slide');
$('.slide').fadeOut(speed, function(){
$('.active').fadeIn(speed);
});