jquery - How to stop executing javascript after click? -

-

i have javascript code automatically changing background of div. how can stop script when click on link. stop changing background , show div class="content" when click on link class="one" or class="two". , start again changing background when click class="start". 

$(window).load(function() {    var = 0;    var images = ['koles-3-ok.png', 'koles-3.png'];    var image = $('.div1');    var imgpath = "" //the file path images      //initial background image setup    image.css('background-image', 'url(http://katet.eu/images/koles-3.png)');      //change image @ regular intervals    setinterval(function() {      image.fadeout(1000, function() {        image.css('background-image', 'url(' + images[i++] + ')');        image.fadein(1000);      });      if (i == images.length)        = 0;    }, 5000);  });    $(document).ready(function() {      // optional code hide divs    $(".content").hide();    // show chosen div, , hide 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/

to achieve want, can use clearinterval() method. 

$(document).ready(function(){     var = 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 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) {              = 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>


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more