Popup not center screen at the first click

Question

Hi All,
I have just met an issue:
At a ViewProduct dialog, when click on the photo (the resized one) to show a popup which displays the full-size photo. I want center the popup on sceen (as in http://msdn.microsoft.com/en-us/library/jj733572.aspx#centerpopup).
The width & height of the photo in popup are "Fit to Content". At the first click, the popup's not centered. After closing the popup, from the second click in ViewProduct, the popup's centered correctly.
Hope you can help me. Thankyou.
My code:
myapp.ViewProduct.PhotoURL1_postRender = function (element, contentItem) {
// Write code here.
displayPhoto(element);
var img = $(element).find("img");
$(element).css({
'cursor': 'pointer'
$(element).prop('title', 'Click here to display full-size photo');
$(element).click(function () {
// Note:If using JQuery Mobile 1.3 (or higher) use
// "popupcreate" rather than "popupbeforeposition"
$(window).one("popupbeforeposition", function (e) {
$(e.target).popup({
positionTo: "window",
transtition: "flow"
}, 100);
contentItem.screen.showPopup("FullScreenPhoto");
function displayPhoto(element) {
$(element).css({
'min-width': '100%',
'min-height': '100%',
'width': '100%',
'height': '100%',
'display': 'inline'
$(element).find("div.msls-image-border").addClass("responsive");
$(element).find("img").removeProp("style");
$(element).find("img").addClass("responsive");

Answer 1

Hi All,
I have found a solution :-)
myapp.ViewProduct.FullScreenPhoto_postRender = function (element, contentItem) {
// Write code here.
// to fix the popup not screen-centered at the Fist Click when photo is "Fit to Content"
var myimg = $(element).find("img");
$(myimg).one('load', function (e) {
var container = $(element).closest("div.ui-popup-container.ui-popup-active");
// Ref source: css-tricks.com/snippets/jquery/get-an-images-native-width/
// Create new offscreen image to test
var theImage = new Image();
theImage.src = myimg.attr("src");
// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;
// Ref source: stackoverflow.com/questions/7060422/center-item-on-screen-with-jquery
var obj = $(container);
var obj_width = $(container).outerWidth(true);
var obj_height = $(container).outerHeight(true);
var window_width = window.innerWidth ? window.innerWidth : $(window).width();
var window_height = window.innerHeight ? window.innerHeight : $(window).height();
if ($(window).width() > imageWidth) {
$(container).animate({ left: (window_width - obj_width) / 2, top: (window_height - obj_height) / 2 }, 0);
else {
$(container).animate({ left: 0, top: 0 }, 0); //for very large image
element.title = "Click to close";
$(element).css({
'cursor': 'pointer'
$(element).click(function () {
contentItem.screen.closePopup("FullScreenPhoto"); //click to close
Thanks to ezanker & QuickFix at the link Jquery Mobile Popup not centered on first click (http://stackoverflow.com/questions/21304763/jquery-mobile-popup-not-centered-on-first-click?rq=1) and Center an element on the screen using jQuery (http://www.queness.com/code-snippet/6853/center-an-element-on-the-screen-using-jquery) and CSS-Tricks at http://css-tricks.com/snippets/jquery/get-an-images-native-width/ and at Chris Ingis http://stackoverflow.com/questions/7060422/center-item-on-screen-with-jquery