jQuery.appear runs script while visible to user

Question

I want to use this script to run a command every second when an element is visible until it disappears. https://github.com/morr/jquery.appear

However, I'm missing a manual and the example doesn't help me either.

From the page:

$('someselector').appear(); // It supports optinal hash with "force_process" and "interval" keys. Check source code for details.

I think this would be the right code fragment for this?

My goal is to replace the source of an element as soon as its ID becomes visible.

$.get( 'https://localhost/LightRoom1.php', function( data ) { $('#LightRoom1').prop( 'src', data ); } );

This should be done every second when #LightRoom1 becomes visible and stop when it is not visible.

There are multiple elements beginning with #Light*. So the id has to be passed into the path and the id selector as well.

Any help or advice is appreciated, Thank you in advance.

documentation http://morr.github.io/appear.html – madalinivascu Nov 15 '16 at 08:07 — madalinivascu, Nov 15 '16 at 08:07
Yes, unfortunately I couldn't change it to fit my needs. – Nov 15 '16 at 08:16 — , Nov 15 '16 at 08:16

score 0 · Answer 1 · answered Nov 15 '16 at 08:21

Something like this?

var $myDiv = $('#LightRoom');

// Bind handler for the 'appear' event
$myDiv.on('appear', function() {
    // element appeared, execute your code
});

// Bind handler for the 'disappear' event
$myDiv.on('disappear', function() {
    // element disappeared, execute your code
});

Hope this helps.

score 0 · Answer 2 · answered Nov 15 '16 at 08:41

I think you have to use the event listeners:

 $('someselector').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport
});
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
  // this element is now outside browser viewport
});

and jquery wildcard selector such as "[id^=LightRoom]" to select any ID starting with "LightRoom". Then you have to set an interval with javascript function setInterval() to repeat your code every n seconds and clear it when the element disappear using clearInterval()

Check if this code can help you:

var intervals = [];
$("[id^=LightRoom]").on('appear', function(event, $all_appeared_elements) {
// create an interval to repeat action every 1 second 
// and store it inside interval array using id as key
var appeared = $(this).attr("id");
intervals[appeared] = setInterval(function(){ 
                            $.get( 'https://localhost/" + appeared + ".php', function( data ) { 
                                $(appeared).prop( 'src', data ); 
                            } );
                        }, 1000);
});

$("[id^=LightRoom]").on('disappear', function(event, $all_disappeared_elements) {
// delete intervals for non-visible elements
    var disappeared = $(this).attr("id");
    clearInterval(intervals[disappeared]);
});

Thanks, that looks promising. However it doesn't work yet. I just added your code in my js. Do I have to change anything else? — , Nov 15 '16 at 11:11
Hm I can't use the variables appeared in the path. If I set it manually it works. The string is right though... — , Nov 16 '16 at 18:06
check if you can see "appeared" value inside setInterval function. If it is undefined so you have to change the previous code to make possible passing "appeared" as a function parameter. Here you can find some hints: [link](http://stackoverflow.com/questions/15410384/javascript-setinterval-function-with-arguments) — Enrico Corona, Nov 18 '16 at 07:55
http://stackoverflow.com/questions/15410384/javascript-setinterval-function-with-arguments — Enrico Corona, Nov 18 '16 at 07:55

jQuery.appear runs script while visible to user

2 Answers2