Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 4bc3b40

Browse files
Docs (popup): popup examples page update
1 parent 2fb9aea commit 4bc3b40

File tree

2 files changed

+51
-32
lines changed

2 files changed

+51
-32
lines changed

docs/pages/popup/examples.html

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,23 @@ <h1>Popup examples</h1>
2727
<div data-role="content" class="ui-body">
2828
<div class="content-primary">
2929

30-
<h2>Popup examples</h2>
31-
32-
3330
<h2>Scaling images</h2>
3431

35-
<p>By default the framework CSS sets the <code>max-width</code> and <code>max-height</code> of images that are immediate children of the popup to 100%. Because of the absolute positioning of the popup container and screen, the height is not adjusted to fit the screen on all browsers. You can prevent vertical scrolling with a simple script that scales the image to fit the screen.</p>
32+
<p>The framework CSS contains rules that make images that are immediate children of the popup scale to fit the screen. Because of the absolute positioning of the popup container and screen, the height is not adjusted to screen height on all browsers. You can prevent vertical scrolling with a simple script that sets the <code>max-height</code> of the image.</p>
3633

3734
<p>In the two examples below the divs with <code>data-role="popup"</code> have a class of <code>photopopup</code>. The handler is bound to the <code>popupbeforeposition</code> event, which makes sure the image is not only scaled before it is shown but also when the screen is resized (orientation change). We distract 60px from the height to create a 30px margin at the top and bottom.</p>
3835

3936
<pre><code>
40-
// scale images
41-
$( ".photopopup" ).on({
42-
popupbeforeposition: function( event ) {
43-
var inner = $( window ).height() - 60 + "px";
44-
$( "img, .photopopup" ).css( "max-height", inner );
45-
}
46-
});
37+
$( document ).on( "pageinit", function() {
38+
// set max-height for image
39+
$( ".photopopup" ).on({
40+
popupbeforeposition: function() {
41+
var inner = $( window ).height() - 60 + "px";
42+
$( "img, .photopopup" ).css( "max-height", inner );
43+
}
44+
});
45+
});
46+
4747
</code></pre>
4848

4949
<a href="#popupPhotoLandscape" data-rel="popup" data-position-to="window" data-role="button" data-inline="true">Photo landscape</a>
@@ -59,20 +59,39 @@ <h2>Scaling images</h2>
5959

6060
<h2>Setting the size of an iframe</h2>
6161

62+
<p>When you use an iframe inside a popup it is important to initially set the width and height attributes to 0. This prevents the page to break on platforms like Android 2.3. Note that you have to set the attributes, because setting the style height and width properties with CSS doesn't work here. You can leave the desired width and height in the markup for browsers that have JavaScript disabled and use <code>prop()</code> to set the attributes upon the <code>pageinit</code> event.</p>
63+
64+
<pre><code>
65+
$( document ).on( "pageinit", function() {
66+
// set the width and height of iframe to 0
67+
$("iframe")
68+
.prop( "width", 0 )
69+
.prop( "height", 0 );
70+
});
71+
</code></pre>
6272

73+
<p>In the same way you can set the width and height back, by binding to the <code>popupbeforeposition</code> event. To scale down the iframe to fit the screen you use the following function:</p>
74+
75+
<pre><code>
76+
$( document ).on( "pageinit", function() {
77+
78+
79+
});
80+
</code></pre>
6381

64-
<a href="#popupMap" data-rel="popup" data-position-to="window" data-role="button" data-inline="true">Map</a>
6582
<a href="#popupVideo" data-rel="popup" data-position-to="window" data-role="button" data-inline="true">Video</a>
6683

84+
<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="c" class="ui-content">
85+
<iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" frameborder="0" seamless webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
86+
</div>
87+
88+
<a href="#popupMap" data-rel="popup" data-position-to="window" data-role="button" data-inline="true">Map</a>
89+
6790
<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false">
6891
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
69-
<iframe id="mapiframe" src="map.html" width="480" height="320" frameborder="0" seamless webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
92+
<iframe src="map.html" width="480" height="320" frameborder="0" seamless webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
7093
</div>
7194

72-
<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="c" class="ui-content">
73-
<iframe id="vidiframe" src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" frameborder="0" seamless webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
74-
</div>
75-
7695
</div><!--/content-primary -->
7796

7897
<div class="content-secondary">

docs/pages/popup/popup.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@ $( document ).on( "pageinit", function() {
33

44
// scale images
55
$( ".photopopup" ).on({
6-
popupbeforeposition: function( event ) {
6+
popupbeforeposition: function() {
77
var inner = $( window ).height() - 60 + "px";
88
$( "img, .photopopup" ).css( "max-height", inner );
99
}
1010
});
1111

1212
// set the size of iframes
13-
$("#mapiframe, #vidiframe")
13+
$( "iframe" )
1414
.prop( "width", 0 )
15-
.prop( "height", 0 );
16-
$( "#mapiframe" ).contents().find( "#map_canvas" ).css( { "width" : 0, "height" : 0 } );
15+
.prop( "height", "auto" );
16+
$( "#popupMap iframe" ).contents().find( "#map_canvas" ).css( { "width" : 0, "height" : 0 } );
1717

18-
function sizes(iframewidth, iframeheight, padding, border) {
18+
function sizes( iframewidth, iframeheight, padding, border ) {
1919
var sw = $( window ).width() - 30,
2020
sh = $( window ).height() - 30,
2121
ip = 2 * padding,
@@ -45,35 +45,35 @@ $( document ).on( "pageinit", function() {
4545
};
4646

4747
$( "#popupMap" ).on({
48-
popupbeforeposition: function( event ) {
48+
popupbeforeposition: function() {
4949
var size = sizes(480, 320, 0, 1),
5050
w = size.width,
5151
h = size.height;
5252

53-
$( "#mapiframe" )
53+
$( "#popupMap iframe" )
5454
.prop( "width", w )
5555
.prop( "height", h );
56-
$( "#mapiframe" ).contents().find( "#map_canvas" ).css( { "width": w, "height" : h } );
56+
$( "#popupMap iframe" ).contents().find( "#map_canvas" ).css( { "width": w, "height" : h } );
5757
},
58-
popupafterclose: function( event ) {
59-
$("#mapiframe")
58+
popupafterclose: function() {
59+
$("#popupMap iframe")
6060
.prop( "width", 0 )
6161
.prop( "height", 0 );
62-
$( "#mapiframe" ).contents().find( "#map_canvas" ).css( { "width": 0, "height" : 0 } );
62+
$( "#popupMap iframe" ).contents().find( "#map_canvas" ).css( { "width": 0, "height" : 0 } );
6363
}
6464
});
6565
$( "#popupVideo" ).on({
66-
popupbeforeposition: function( event ) {
66+
popupbeforeposition: function() {
6767
var size = sizes(497, 298, 15, 1),
6868
w = size.width,
6969
h = size.height;
7070

71-
$( "#vidiframe" )
71+
$( "#popupVideo iframe" )
7272
.prop( "width", w )
7373
.prop( "height", h );
7474
},
75-
popupafterclose: function( event ) {
76-
$("#vidiframe")
75+
popupafterclose: function() {
76+
$("#popupVideo iframe")
7777
.prop( "width", 0 )
7878
.prop( "height", 0 );
7979
}

0 commit comments

Comments
 (0)