Question

This might be rediculous, asking about such a huge bit of code…but basically I have a whole section that loops through 4 divs of content. that works fine. Then i have a section on if you hover over a div, that section will stay active, or if you click the div it will stay constantly active. that bit works on its own aswell. but when i combine them, i have the problem that the loop will always work even if you are hovering, because the loop never stops.

Now, is there a way to make the hover and click bit also pause the loop section. essentailly i am trying to code my own smaller version of all those sliders you see on the internetz

thanks.

$(window).load(function(){
var clicked = 0;
var i = 1;                    
var j = (i - 1);

function myLoop () {       
setTimeout(function () {
   if (clicked == 0) {
$("#nHstuff4").hide();$("#nHpicture4").hide();
$("#nH4").removeClass("active"); 

$("#nHstuff" + j).hide();$("#nHpicture" + j).hide();     
$("#nH" + j).removeClass("active");

$("#nHstuff" + i).show();$("#nHpicture" + i).show();
$("#nH" + i).addClass("active");

        i++;
        j++;

  if (i < 5) {        
     myLoop();        
  }   
  else if (i == 5) {
      i = 1;
      j = 0;
      myLoop();
  } 
   }else{} } ,3000);
}

myLoop();                     

$("#nH1").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH1").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH2").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH2").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH3").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH3").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH4").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH4").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});

$("#nH1").hover(function() {if (clicked == 0) {
    $("#nH1stuff").show();$("#nH1picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH1stuff").hide();$("#nH1picture").hide();
    }
    else {}
});

$("#nH2").hover(function() {if (clicked == 0) {
    $("#nH2stuff").show();$("#nH2picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH2stuff").hide();$("#nH2picture").hide();
    }
    else {}
});

$("#nH3").hover(function() {if (clicked == 0) {
    $("#nH3stuff").show();$("#nH3picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH3stuff").hide();$("#nH3picture").hide();
    }
    else {}
}); 

$("#nH4").hover(function() {if (clicked == 0) {
    $("#nH4stuff").show();$("#nH4picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH4stuff").hide();$("#nH4picture").hide();
    }
    else {}
});
});

Answer 1

Try this…

$(window).load(function(){
var clicked = 0;
var i = 1;                    
var j = (i - 1);
var hovering = false;

function myLoop () {       
setTimeout(function () {
    if (hovering) return;
   if (clicked == 0) {
$("#nHstuff4").hide();$("#nHpicture4").hide();
$("#nH4").removeClass("active"); 

$("#nHstuff" + j).hide();$("#nHpicture" + j).hide();     
$("#nH" + j).removeClass("active");

$("#nHstuff" + i).show();$("#nHpicture" + i).show();
$("#nH" + i).addClass("active");

        i++;
        j++;

  if (i < 5) {        
     myLoop();        
  }   
  else if (i == 5) {
      i = 1;
      j = 0;
      myLoop();
  } 
   }else{} } ,3000);
}

myLoop();                     

$("#nH1").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH1").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH2").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH2").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH3").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH3").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH4").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH4").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});

$("#nH1").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH1stuff").show();$("#nH1picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH1stuff").hide();$("#nH1picture").hide();
    }
    else {}
});

$("#nH2").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH2stuff").show();$("#nH2picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH2stuff").hide();$("#nH2picture").hide();
    }
    else {}
});

$("#nH3").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH3stuff").show();$("#nH3picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH3stuff").hide();$("#nH3picture").hide();
    }
    else {}
}); 

$("#nH4").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH4stuff").show();$("#nH4picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH4stuff").hide();$("#nH4picture").hide();
    }
    else {}
});
});

I’ve simply added the variable hovering and I set it to true when hovering and false when not. Then I added a conditional return in the timeout. (It’s similar to what you did with clicked, but using a boolean value rather than an integer).

There’s a better way to do the timeout. You could use setInterval so you don’t have to keep calling it, and you could then clearInterval when hovering and do another setInterval when you stop hovering. What you have will work though. Just do some googling about setInterval as it’s more appropriate for something like this.

Incidentally, kudos for making your own version and learning how to do it, rather than just using a plugin 🙂 Plugins are great and usually very handy, but you can’t beat knowing how to do it yourself!