How to check if jQM popup fits user's viewport?

Question

So I've managed to add scrollbars to large jQM popups with css('overflow-y', 'scroll'). But how to do this only when the popup is larger than the user's viewport?

I'm trying with the jquery-visible plugin but I can't get it to respond:

http://jsfiddle.net/mmRnq/124/

$('#test-button').on('click', function(e) {     
  $('#confirmDialog').popup('open');

  // https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport  

  if(!$('#confirmDialog').visible(true)) {
    alert('Popup not fully visible - add overflow scrolling');
    $('#confirmDialog').css('overflow-y', 'scroll'); 
  }  
});

Answer 1

You can use

overflow-y: auto

This makes the scrollbar only visible when it is needed.

Updated FIDDLE

UPDATE:

You can also just make the content of the popup scrollable so the titlebar remains in view:

#confirmDialog .ui-content {
    overflow-y: auto;
}

$('#confirmDialog').on({
  popupbeforeposition: function() {
      var maxHeight = $(window).height() - 120;
      $('#confirmDialog .ui-content').height(maxHeight);
  }
});

DEMO

Answer 2

I had a popup too large, although it was because of a searchable list. As I wanted to keep the search field at the top whilst scrolling the list only, I had to do this:

$("#confirmDialog").on({
    popupbeforeposition: function (e, ui) {
        var maxHeight = $(window).height() - 100 + "px";
        $("#confirmDialog .ui-content").css("max-height", maxHeight);
    },
    popupafteropen: function (e, ui) {
        var maxHeight = $(window).height() - 150 + "px";
        $("#confirmDialog .ui-content ul").css("max-height", maxHeight).css("overflow-y", "scroll");
    }
});

Remember do not perform arithmetic on maxHeight once assigned as it's a string, so this doesn't work:

$("#confirmDialog .ui-content").css("max-height", maxHeight - 50);