locked
Popup not center screen at the first click RRS feed

  • 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");
    }
    

    Saturday, January 10, 2015 6:05 AM

Answers

  • 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


    • Marked as answer by Angie Xu Monday, January 12, 2015 9:39 AM
    • Edited by Chung Pham Tuesday, January 13, 2015 1:37 AM Update code for very large size images
    Monday, January 12, 2015 9:09 AM