1

I want to continuously execute specific Javascript function only when part of HTML document is visible. That implies stopping the execution of function when that part is not visible again.

Getting out of visible scope means that element is out by:

  • scrolling out (either vertical or horizontal)
  • changing to some other browser tab
  • shutting down tab/window/entire browser.

Example code: I have HTML with a style to make sure that I have div main (entire page) and div target that is on my screen (1920 X 1080) below visible scope:

<html>
<head>
    <title>Title</title>
<style type="text/css">
    #main{
        height: 2300px;
    }
    .target{
        border: 1px solid black;
        position: relative;
        top:1000px;
        width:150px;
        height: 150px;
    }
</style>
<script scr="js/jquery.js"></script>
</head>
<body>
    <div id="main">
        <div class="target"></div>
    </div>
</body>
</html>

What is the JS/Jquery code that will order:

when div.target is currently visible trigger execution of my_function()

when div.target is scrolled out or tab is changed, stop execution of my_function() ?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Miloš Đakonović
  • 3,751
  • 5
  • 35
  • 55
  • 2
    I'd say continuously executed scripts will throw an error after a time. Also it's not possible to scroll page, if a script is executed. – Teemu Nov 22 '12 at 08:49
  • @Teemu: I've seen such solutions working. Why in the world I would not be able to scroll page after script execution? – Miloš Đakonović Nov 22 '12 at 08:58
  • 1
    @Teemu you could use `setInterval` so the function isn't called continuesly but periodicly ergo it is not blocking the UI. Or run it in a background worker. (depending on what's in the function). The isVisible part is a little trickier then Ahren is insinuating. Scrolling out of view is not detected by `:visible`. maybe [this](https://groups.google.com/forum/?fromgroups=#!topic/pdxjs/fO-3ApxbgRQ) will help – VDP Nov 22 '12 at 09:00
  • *was* insinuating, I deleted my answer after thinking it through properly... I agree on `setInterval` or `setTimeout` point. – ahren Nov 22 '12 at 09:01
  • That's right VDP, periodicly execution by setInterval() was what I have in mind. – Miloš Đakonović Nov 22 '12 at 09:03
  • @VDP I agree with your opinion, but in the question there was "continuously execute". Miloshio: I'm sorry, my comment was a bit poor, I meant: while script is executed, it freezes the browser. You can test this with a simple `while(true);` loop. – Teemu Nov 22 '12 at 09:07
  • This is potentially a duplicate of this: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling except for the "tab is changed" part. which is why I hesitate to click close. – slebetman Nov 22 '12 at 09:19

1 Answers1

1

OK, I know this is a bad method of answering. The standard is to close this question and point to the duplicate question, but this question has two parts and two separate answers. So, I'm putting the links to the answers here:

Part 1: Detect when an HTML element is not in scroll view

Check if element is visible after scrolling

Part 2: Detect when tab is not in view

How to tell if browser/tab is active

Both of the above seem to have working answers. Just implement both to get what you want.

Community
  • 1
  • 1
slebetman
  • 109,858
  • 19
  • 140
  • 171