annotate iframe-resizer/example/frame.absolute.html @ 0:ac5f9272033b draft

first upload
author saskia-hiltemann
date Tue, 01 Jul 2014 11:42:23 -0400
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
1 <!DOCTYPE html>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
2 <html>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
3 <head>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
4 <meta charset="utf-8">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
5 <title>iFrame message passing test</title>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
6 <meta name="description" content="iFrame message passing test">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
7 <style>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
8 a.back { float:right; }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
9 body {border:solid 1px red;}
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
10 p{padding:5px 212px 5px 5px;margin:0 0 5px;}
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
11 #abs{
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
12 position: absolute;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
13 top:0;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
14 right:0;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
15 width: 200px;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
16 height: 600px;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
17 background-color: wheat;
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
18 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
19 </style>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
20 </head>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
21 <body>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
22
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
23 <p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
24 <b>iFrame</b>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
25 <a href="frame.content.html" class="back">Back to page 1</a>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
26 </p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
27 <p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
28 This page has an absolute position elemnt that take it out side the normal document body, which is marked with a red border on this page. This prevents the normal height calculation, which is based on the body tag from returning the correct height. To work around this you can set the <b>heightCalculationMethod</b> option to use one of the other page height propeties.
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
29 </p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
30 <p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
31 Use the dropdown to change the sizing method of the page, select the different sizing options to see how the effect the page. Note that they can have different effects in different browsers, so you are normally best off selecting <b>max</b> if you need to change away from the default <b>bodyOffset</b> option.
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
32 </p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
33 <p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
34 <b>Height Calculation Method</b>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
35 <select name="heightCalculationMethod">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
36 <option>bodyOffset</option>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
37 <option>bodyScroll</option>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
38 <option>documentElementOffset</option>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
39 <option>documentElementScroll</option>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
40 <option>max</option>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
41 <option>min</option>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
42 <option>grow</option>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
43 <option>lowestElement</option>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
44 </select>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
45 </p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
46 <p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
47 <i>This option should be used sparingly, as the alternate methods can be less acurate at working out the correct page size, can cause screen flicker and can sometimes fail to reduce in size when the frame content changes in browsers that do not support mutationObservers (See <a href="http://caniuse.com/mutationobserver">caniuse.com</a> for details).</i>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
48 </p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
49
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
50 <div id="abs">Absolute positioned element</div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
51
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
52 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
53 <script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
54 <script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
55
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
56 $('select').on('change',function(){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
57 if ('parentIFrame' in window){
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
58 parentIFrame.setHeightCalculationMethod($(this).val());
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
59 parentIFrame.size();
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
60 }
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
61 });
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
62
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
63 </script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
64
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
65 </body>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
66 </html>