Jquery Mobile Popup not centered on first click

Question

I have a confusing problem with centering a jQuery Mobile popup. When I click it the first time it is not centered and appears in the corner of my page. After closing it and opening it again it is suddenly centered.

This is my code:

$(document).on("pageshow",function(){
  $('.image_link').on('click', function(event){
    var id = $(this).children('img').attr("id");
    $("#show_image_img").attr("src",sPath + "/view/images/" + id);
    $("#show_image").popup('open');
    $("#show_image" ).popup({ positionTo: "window" });
  });
});

and this is my html code

<div data-role="popup" id="show_image" data-theme="c" class="ui-corner-all">
  <div style="padding:20px 30px;">
    <img id="show_image_img" src="" />
  </div>
</div>

Does anybody have an idea how to solve this problem? I tried already various things like changing the pageshow event to a pagebeforeshow and so on.

Answer 1

I believe on first click the popup is loading before the image is completely downloaded, so it does not know the size to use for positioning. Therefore, the top-left corner is centered.

If you know the image size ahead of time, you could pre-size the IMG tag in the popup via CSS

If you don't have too many images on the page, you could try pre-loading them

You could also add a small setTimeout delay on the popup to allow the image download to complete:

$(document).on("pageshow", function () {
    $('.image_link').on('click', function (event) {
        $("#show_image_img").attr("src", "http://www.aai.ee/planets/nineplanets/gif/SmallWorlds.jpg");

        setTimeout(OpenPopup, 50);
    });
});

function OpenPopup(){
    $("#show_image").popup({ positionTo: "window" }).popup('open');
}

Answer 2

update

The image is being loaded after opening the popup, resulting in miscalculating popup's dimensions.

To solve this, reposition popup on popupafteropen event.

$("#show_image")
    .popup("open")
    .on("popupafteropen", function () {
    $(this)
        .popup("reposition", {
        "positionTo": "window"
    });
});

You are updating positionTo after opening the popup, you should do it before or pass it as an option inline with open.

$("#show_image")
    .popup('open', {
    positionTo: "window"
});

Demo

Answer 3

You can reposition the popup after the image is loaded :

$(document).on("pageshow", function () {
    $('.image_link').on('click', function (event) {
        var $img=$("#show_image_img").attr("src", "http://www.thinkstockphotos.com/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg");
        var $popup=$("#show_image").popup("open", {
            "positionTo": "window"
        });
        $img.one('load',function(){
            $popup.popup("reposition", {
                "positionTo": "window"
            });
        });
    });
});

edit: added the positionto window at the popup opening because if the image is not loaded (dead link for example) then the popup was not centered.

Answer 4

In your $(document).ready function wait until "afteropen" on the popup and then reposition the popup. Also note the "tolerance." I have it set to "0,0,0,0" which will let you fill the entire screen on an iPhone 4 without any border around your popup - if your popup needs to fill the entire screen:

$(document).ready(function()
{
  // Init the jqm popup
  $("#popup_modal").popup({
              positionTo: "window", history: false, tolerance: "0,0,0,0"});

  // Wait until the popup finishes opening and reposition it
  $("#popup_modal").popup({
              afteropen: function (event, ui)
              {
                  $('#popup_modal').popup('reposition', 'positionTo: window');
              }
 });

 // Show the popup initially
 $("popup_modal").popup('open');
});

Answer 5

I think timeout is also not a permanent solution.. Because you don't for sure know how much time your data would take to load. I think if its an image loading, then probably giving image height is better. If data is coming from ajax call, then best thing is to open the popup inside the success case of ajax, after the data has been populated into the popup div. This is what was the case for me.