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.

which jQM version are you using? – Omar Jan 23 '14 at 10:12 — Omar, Jan 23 '14 at 10:12

score 8 · Accepted Answer · answered Jan 23 '14 at 15:24

8

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');
}

answered Jan 23 '14 at 15:24

ezanker

24,628
1
20
35

I was using this method with a timeout of 100ms but it turned out that it was not always enough when used in a mobile device (loading image from sd). the time needed depends on the size of the image, the speed of the device, the speed of the network... that's why I now use the load event of the image. – QuickFix Jan 24 '14 at 11:15
1

Jannis, 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. – Muhammad Tanweer Oct 24 '14 at 22:38

QuickFix · Answer 2 · 2014-01-24T11:20:52.797

7

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.

edited Jan 24 '14 at 11:20

answered Jan 23 '14 at 17:25

QuickFix

11,661
2
38
50

@QuickFix, i agree that in most situations this is a better answer than mine. +1! In the case where you know image sizes ahead of time, you can have the popup open in the correct place before the image loads. – ezanker Jan 24 '14 at 15:14
yeah, I hadn't seen your code was in the "you could also" part ;) – QuickFix Jan 24 '14 at 15:42
most of times it is not possible to know the size, so according to me this answer works perfectly, thanks – Manik Arora Mar 31 '15 at 09:15

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 23 '14 at 10:25

Omar

32,302
9
69
112

Your demo has the same Problem. The popup is shown on the bottom left side. http://imagizer.imageshack.us/v2/800x600q90/545/hj97.jpg – J-H Jan 23 '14 at 13:22
@JannisHanke it's an image size problem, you need to position it on `popupbeforeposition` event, to reposition it. Try this http://jsfiddle.net/avC68/1/ – Omar Jan 23 '14 at 13:54
1

@JannisHanke check updated answer and demo http://jsfiddle.net/Palestinian/avC68/ – Omar Jan 23 '14 at 16:25

score 0 · Answer 4 · answered Oct 24 '14 at 22:39

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.

score 0 · Answer 5 · edited Dec 11 '15 at 19:43

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');
});

Jquery Mobile Popup not centered on first click

5 Answers5

update

Linked