2

I have javascript code which automatically changing background of div. How I can stop this script when I click on link. I would like to stop changing background and show div with class="content" when I click on link class="one" or class="two". And I would like to start again changing background when I click class="start". 

$(window).load(function() {
  var i = 0;
  var images = ['koles-3-ok.png', 'koles-3.png'];
  var image = $('.div1');
  var ImgPath = "" //The file path to your images
    //Initial Background image setup
  image.css('background-image', 'url(http://katet.eu/images/koles-3.png)');

  //Change image at regular intervals
  setInterval(function() {
    image.fadeOut(1000, function() {
      image.css('background-image', 'url(' + images[i++] + ')');
      image.fadeIn(1000);
    });
    if (i == images.length)
      i = 0;
  }, 5000);
});

$(document).ready(function() {

  // Optional code to hide all divs
  $(".content").hide();
  // Show chosen div, and hide all others
  $("a").click(function(e) {
    $("#" + $(this).attr("class")).removeClass("hide").fadeIn("slow").siblings('.content').hide();
  });

});
.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid black;
}
.hide {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="start">Index</a>
<a href="#" class="one">About</a>
<a href="#" class="two" id="slide">Contact</a>

<div class="content hide" id="one">
  <h1>Lorem Impsum 1</h1>
</div>
<div class="content hide" id="two">
  <p>lorem 2
  </p>
</div>

<div class="div1">
  sdcsdf
</div>

jsfiddle: https://jsfiddle.net/omj1/d112y264/

meks
  • 77
  • 1
  • 2
  • 9
  • 1
    Have a look at this: [clearInterval](http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) – guitarman Jan 28 '16 at 12:19

4 Answers4

2

You could save the intervalID returned by the setInterval() and then use the clearInterval() to stop it. See setInterval() and clearInterval()

drosam
  • 2,866
  • 3
  • 16
  • 18
1

To achieve what you want, you can use the clearInterval() Method. 

$(document).ready(function(){
   var i = 0;
   var myTimer;
   var images = ['http://katet.eu/images/koles-3-ok.png', 'http://katet.eu/images/koles-3.png'];
   var image = $('.div1');
   var ImgPath = "" //The file path to your images
   
   //Initial Background image setup
   image.css('background-image', 'url(http://katet.eu/images/koles-3.png)');
      
   myTimer = setInterval(changeBackground, 3000);
      
   function changeBackground() {
         image.fadeOut(1000, function () {
            image.css('background-image', 'url('+ images[i++] +')');
            image.fadeIn(1000);
         });
         if(i == images.length) {
            i = 0;
         }
   }

   $("a").click(function (e) {
         e.preventDefault();
         if($(this).is(".one") || $(this).is(".two")) {
            if (myTimer) { 
               clearInterval(myTimer);
            }
         } 
         else {
            $(".content").hide();
            myTimer = setInterval(changeBackground, 3000);
         }
         $("#" + $(this).attr("class")).removeClass("hide").fadeIn("slow").siblings('.content').hide();
   });
      
});
.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid black;
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="slide">Paintings</a>
<a href="#" class="one">About</a>
<a href="#" class="two" id="slide">Contact</a>
    
<div class="content hide" id="one">
  <h1>Lorem Impsum 1</h1>
</div>
<div class="content hide" id="two">
  <p>lorem 2</p> 
</div>
      
<div class="div1">sdcsdf</div>
smdsgn
  • 1,736
  • 1
  • 11
  • 11
0

Well, according to me you cannot disable javascript. Because the button would need controls (javascript) to enable and disable javascript on user requirements. Well you can stop some functions i.e.

function demo(){
document.writeln("Hello, World");
}

HTML Button markup

<button onClick="demo.stop()">Stop Function</button>

The .stop() will prevent the demo() to execute.

I hope this clarifies. Thanks.

KodeRex
  • 9
  • 5
0

$(window).load(function() {
  var i = 0;
  var images = ['koles-3-ok.png', 'koles-3.png'];
  var image = $('.div1');
  var ImgPath = "" //The file path to your images
    //Initial Background image setup
  image.css('background-image', 'url(http://katet.eu/images/koles-3.png)');

  //Change image at regular intervals
  setInterval(function() {
    image.fadeOut(1000, function() {
      image.css('background-image', 'url(' + images[i++] + ')');
      image.fadeIn(1000);
    });
    if (i == images.length)
      i = 0;
  }, 5000);
});

$(document).ready(function() {

  $(".start").click(function(e) {
      $(".div1").show();
      $("#one").hide();   
      $("#two").hide();                       
  });
  $(".one").click(function(e) {
      $(".div1").hide();
      $("#one").show();
      $("#two").hide();  
  });
  $(".two").click(function(e) {
      $(".div1").hide();
      $("#one").hide();
      $("#two").show();  
  });
});
.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid black;
}
.hide {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="start">Index</a>
<a href="#" class="one">About</a>
<a href="#" class="two" id="slide">Contact</a>

<div class="content" style="display:none;" id="one">
  <h1>Lorem Impsum 1</h1>
</div>
<div class="content" style="display:none;" id="two">
  <p>lorem 2
  </p>
</div>

<div class="div1">
  sdcsdf
</div>
Sujithrao
  • 789
  • 3
  • 12
  • 27