CODEWITHSUNDEEP
javascriptjquerycss
meks
meks

Reputation: 77

How to stop executing javascript after click?

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/

Upvotes: 2

Views: 982

Answers (4)

smdsgn
smdsgn

Reputation: 1746

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>

Upvotes: 1

Sujithrao
Sujithrao

Reputation: 785

$(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>

Upvotes: 0

drosam
drosam

Reputation: 2896

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

Upvotes: 2

KodeRex
KodeRex

Reputation: 9

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.

Upvotes: 0

Related Questions