You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
Copy file name to clipboardExpand all lines: docs/pages/popup/examples.html
+36-17Lines changed: 36 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -27,23 +27,23 @@ <h1>Popup examples</h1>
27
27
<divdata-role="content" class="ui-body">
28
28
<divclass="content-primary">
29
29
30
-
<h2>Popup examples</h2>
31
-
32
-
33
30
<h2>Scaling images</h2>
34
31
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>
36
33
37
34
<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>
<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>
62
72
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>
0 commit comments