Detect when a list - item is not in the viewport anymore


#1

(Using Ionic 1.x)

Hi there !

In my ionic app, I’ve got a tabbed interface. One of my tab displays all the contacts of the user :

To monetize my app, I decided to use the Cordova/PhoneGap plugin for Facebook Audience Network Ads, you can see the native test ad and its “clickable area” in green. When the user tap on it, it triggers the ad and open a promotional website.

This one is my problem. When you scroll the contact list, the ad vanish under the header and its “clickable area” too.

So I get this :

So here is my problem : when the ad is not longer visible by the user, I need to suppress its “clickable area”, however when the user taps on the header the ad will be triggered !

So I tryied many tricks and hacks to figure out how to detect when the ad list - item is not longer visible by the user, but they were either uneffective, either too performance demanding.

For example, I tried to know when the header div was overlapping the ad list-item with Jquery, but I didn’t manage to get it because of the complex structure of the ionic rendered dom.

I hope someone have already work with native ads in lists,

Best regards,

Squix

EDIT :

Finally I found something here :smiley:

Watching the offset position of the ad in the Ionic Scroll event seems to do the trick :

$ionicScrollDelegate.getScrollView().onScroll = function() {

    if( $("div.tab-nav.tabs").offset().top > $("#nativead").offset().top ) {
    
      console.log("DEBUG: Ad is not visible");

      if(FacebookAds) FacebookAds.setNativeAdClickArea(nativeId, null, null, null, null);

    }
}

#2

Did you find any solution?

I’m having the same problem, but am using Ionic 2.


#3

No I can’t manage to find a solution, have you tried some hacks ?