dom - UI5: Check if a control is currently rendered and visible

Question

In a SAPUI5 application I would like to update the content of a control (e. g. a tile) only when this is currently visible to the user. I created a function like this:

updatePage: function() {
  for (var i = 0; i < this.myTiles.length; i++) {
    if (this.myTiles[i].updater) {
      this.myTiles[i].updater();
    }
  }
  setTimeout(this.updatePage.bind(this), 10000);
},

.. where the updater is a custom function I added to the tiles that is in charge to update their content.

The problem is: I want to check if the tile is currently visible to the user (i. e. is not in a page or in a tab that is not currently selected, but was rendered previously).
Is there a way to achieve this using object properties? Do I need to manage it manually?

Answer 1

You can utilize jQuery do achieve that.

// determine whether your control is still part of the active DOM
jQuery.contains(document, yourControl.$());

// determine whether your control is visible (in terms of CSS)
yourControl.$().is(':visible');

// combined
MyControl.prototype.isVisible = function() {
  return this.$().length && // has rendered at all
    jQuery.contains(document, this.$()) && // is part of active DOM
    this.$().is(':visible'); // is visible
};

Elements could still be invisible to the user by being:

• out of the viewport
• visibility: hidden
• opacity: 0
• ...

Also check this answer

BR Chris

http://api.jquery.com/jQuery.contains/

http://api.jquery.com/visible-selector/