Permalink
Browse files

Popup: Correctly enhance popup and its contents before opening

This is a better fix than the one provided in the original PR for this, because
it avoids the use of .enhanceWithin(), and it moves the image width/height
retrieval to popupbeforeposition, which is correct, because during creation the
popup is truncated to 1px x 1px.

Closes gh-7290
Fixes gh-7336
  • Loading branch information...
gabrielschulhof committed Apr 23, 2014
1 parent 5342dfd commit 186d286ecd0a28ca12a1f0d2668dc0b826e0b9ac
Showing with 19 additions and 7 deletions.
  1. +19 −7 demos/popup-dynamic/index.php
@@ -22,22 +22,27 @@
closebtn = '<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>',
header = '<div data-role="header"><h2>' + brand + ' ' + model + '</h2></div>',
img = '<img src="../_assets/img/' + short + '.jpg" alt="' + brand + '" class="photo">',
popup = '<div data-role="popup" id="popup-' + short + '" data-short="' + short +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15">' + closebtn + header + img + '</div>';
popup = '<div data-role="popup" id="popup-' + short + '" data-short="' + short +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15"></div>';
// Create the popup.
$( header )
.appendTo( $( popup )
.appendTo( $.mobile.activePage )
.popup() )
.toolbar()
.before( closebtn )
.after( img );
// Create the popup. Trigger "pagecreate" instead of "create" because currently the framework doesn't bind the enhancement of toolbars to the "create" event (js/widgets/page.sections.js).
$.mobile.activePage.append( popup ).trigger( "pagecreate" );
// Wait with opening the popup until the popup image has been loaded in the DOM.
// This ensures the popup gets the correct size and position
$( ".photo", "#popup-" + short ).load(function() {
var height = $( this ).height(),
width = $( this ).width();
// Set height and width attribute of the image
$( this ).attr({ "height": height, "width": width });
// Open the popup
$( "#popup-" + short ).popup( "open" );
// Clear the fallback
clearTimeout( fallback );
});
// Fallback in case the browser doesn't fire a load event
var fallback = setTimeout(function() {
$( "#popup-" + short ).popup( "open" );
@@ -46,6 +51,13 @@
// Set a max-height to make large images shrink to fit the screen.
$( document ).on( "popupbeforeposition", ".ui-popup", function() {
var image = $( this ).children( "img" ),
height = image.height(),
width = image.width();
// Set height and width attribute of the image
$( this ).attr({ "height": height, "width": width });
// 68px: 2 * 15px for top/bottom tolerance, 38px for the header.
var maxHeight = $( window ).height() - 68 + "px";

0 comments on commit 186d286

Please sign in to comment.