0

I have created a small piece of code that creates a DIV at a random 'fixed' location every 80ms. This div shows up for about 2seconds and then removes itself (including the code generated). However when leaving the part of the page where this is happening (using scrolling); I want the generator to stop.

And to avoid executing the code everytime the user uses his scroll (duplicate generators, because of scrolling) I thought it would be most useful to use a true/false statement.

if (focuson = true){window.setInterval(function(){$(generator);}, 80);}

$(window).scroll(function(){
if  ($(window).scrollTop() > resolutieh){
    var focuson = false;
    window.clearInterval(generator); generator = 0;
    }
else{
    var focuson = true;
}
});

The code above actually works but results in a visual glitch; when the last generated DIV gets removed: every part of the screen at that moment, that is not 'filled' with div-content will be filled with big white chunks (basically the 'background-image' on repeat x/y). Also scrolling back to the location where the generator is active doesnt activate it again.

The following piece of code seems more logical to me (although it doesnt work):

if (focuson = true){window.setInterval(function(){$(generator);}, 80);}
if (focuson = false){window.clearInterval(function(){$(generator);}, 0);}

$(window).scroll(function(){
if  ($(window).scrollTop() > resolutieh){
    var focuson = false;;
    }
else{
    var focuson = true;
}
});

I basically want to avoid the visual glitch by either stopping the generator 'properly' or setting its timer so low that it takes less time to calculate. A cool bonus would be that if you would come back to the part of the page where the generator is spawning, it would turn on again.

Any suggestions?

Kind Regards.

Narayan
  • 17
  • 5
  • 1
    Problem here `if (focuson = true)`. That statement will always be true, and this one will be true as well `if (focuson = false)`. Also you're declaring `focuson` twice, JS has no block scope. – elclanrs Jun 01 '13 at 08:40
  • What @elclanrs is trying to point out is that you need to use `===` to compare, not `=`. – Barmar Jun 01 '13 at 09:05
  • I don't understand what your interval function does. `$(generator)` won't make any changes to the DOM. The scroll handler seems to expect `generator` to contain the value returned by `setInterval`, but I don't see where you're doing that. – Barmar Jun 01 '13 at 09:08
  • @@elclanrs Basically you're telling me that I cant/shouldn't use true/false. How should I fix the problem? If i use a function withink the if/else of window.scroll I have the problem of executing the code everytime the user uses the scroll (=generator overload). @Barmar Thank you for your concrete solution. I tried the '===', however that didn't work. The $(generator) uses math.random for x/y coordinates and appends the DIV's to a parent, and removes them after 2s. By only using: window.setInterval(function(){$(generator);}, 80); - without the above true/false it works. – Narayan Jun 01 '13 at 09:21
  • The problem is that your `if(focuson ...)` code isn't part of any event handler. It will be executed once when the page first loads, not whenever the value of `focuson` is updated. – Barmar Jun 01 '13 at 09:24
  • @Barmar Thank you very much. To give you an impression I have made you a fiddle: http://jsfiddle.net/VwnCT/2/ - On the bottom side I have added the above code. Are you trying to tell me that I have to include the if focuson inside the window.scroll function? – Narayan Jun 01 '13 at 09:37
  • Not related to the problem, but `$(generator)` and `$(bubble)` should be `generator()` and `bubble()`. I'm not sure why it works the way you've written it, but it's not right. – Barmar Jun 01 '13 at 09:44
  • Actually, maybe that is part of the problem. $(functionname) is short for `$(document).ready(functionname)`. So each time you do that, you're adding another function to the ready event handler. – Barmar Jun 01 '13 at 09:47
  • If i remove the $ from the function, it stops working: http://jsfiddle.net/VwnCT/3/ - If i then wrap the code in `$(document).ready(function() {});` it also stops working. – Narayan Jun 01 '13 at 09:59
  • Anyways, is there any other way of setting up an easy toggle? Or a way to activate and deactivate? – Narayan Jun 01 '13 at 11:10

0 Answers0