-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
initial example of the iframe-resizer not functioning with height: 100%
- Loading branch information
0 parents
commit 21fc626
Showing
18 changed files
with
2,870 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| html { | ||
| word-wrap: break-word; | ||
| word-break: break-word; | ||
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| font-size: 87.5%; | ||
| -ms-text-size-adjust: 100%; | ||
| -webkit-text-size-adjust: 100%; | ||
| text-size-adjust: 100%; | ||
| height: 100%; | ||
| } | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| dl, | ||
| ol, | ||
| ul, | ||
| p, | ||
| table { | ||
| margin: 0; | ||
| } | ||
| ol, | ||
| ul { | ||
| padding-left: 0; | ||
| padding-right: 0; | ||
| list-style: none; | ||
| } | ||
| dd { | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| body { | ||
| line-height: 20px; | ||
| line-height: 1.4285714285714286rem; | ||
| margin: 0; | ||
| font-size: 1em; | ||
| background-color: #ffffff; | ||
| color: #1c1f21; | ||
| height: 100%; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>iFrame message passing test</title> | ||
| <meta name="description" content="iFrame message passing test"> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <style> | ||
| a.back { float:right; margin-left:8px;} | ||
| body {border:solid 1px red;} | ||
| p{padding:5px 212px 5px 5px;margin:0 0 5px;} | ||
| #abs{ | ||
| position: absolute; | ||
| top:0; | ||
| right:0; | ||
| width: 200px; | ||
| height: 600px; | ||
| background-color: wheat; | ||
| } | ||
| a.top{ | ||
| position: absolute; | ||
| bottom:0; | ||
| right:0; | ||
| margin:5px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <p> | ||
| <b>iFrame</b> | ||
|
|
||
| <a href="frame.content.html" class="back">Back to page 1</a> | ||
| | ||
| <a href="#"" class="back" onclick="if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,99999);return false;">Bottom</a> | ||
| | ||
| <a href="#"" class="back" onclick="if ('parentIFrame' in window) window.parentIFrame.scrollToOffset(0,0);return false;">Scroll to iFrame</a> | ||
| | ||
| <a href="#test" class="back" >Jump to iFrame anchor</a> | ||
| <a href="#anchorParentTest" class="back" >Jump to parent anchor</a> | ||
| </p> | ||
| <p> | ||
| 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. | ||
| </p> | ||
| <p> | ||
| 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. | ||
| </p> | ||
| <p data-iframe-height> | ||
| <b>Height Calculation Method</b> | ||
| <select name="heightCalculationMethod"> | ||
| <option>bodyOffset</option> | ||
| <option>bodyScroll</option> | ||
| <option>documentElementOffset</option> | ||
| <option>documentElementScroll</option> | ||
| <option>max</option> | ||
| <option>min</option> | ||
| <option>grow</option> | ||
| <option>lowestElement</option> | ||
| <option>taggedElement</option> | ||
| </select> | ||
| </p> | ||
| <p> | ||
| <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> | ||
| </p> | ||
| <a name="test">Test in page anchor</a> | ||
|
|
||
| <div id="abs"> | ||
| Absolute positioned element | ||
| <a href='#' class="top" onclick="if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,0);return false;">Top</a> | ||
| </div> | ||
|
|
||
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | ||
| <script type="text/javascript" src="../js/ie8.polyfils.min.js"></script> | ||
| <script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script> | ||
| <script> | ||
|
|
||
| $('select').on('change',function(){ | ||
| if ('parentIFrame' in window){ | ||
| parentIFrame.setHeightCalculationMethod($(this).val()); | ||
| parentIFrame.size(); | ||
| } | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,213 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>iFrame message passing test</title> | ||
| <meta name="description" content="iFrame message passing test"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | ||
|
|
||
| <link rel="stylesheet" media="all" href="/assets/foundation.css" /> | ||
| <meta content='width=100%, initial-scale=1, user-scalable=no' name='viewport'> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div id='global-wrapper'> | ||
| <div class='orion-Layout'> | ||
| <div class='orion-Layout-main'> | ||
|
|
||
| <div id='orion-Layout-main-content'> | ||
| <div id="ion-visit-list-content-panel" visit_list_patient_id="1316024" class="terraVM-ContentPanel content-panel content-panels-alternative content-panels-grouped "> | ||
| <header class="terraVM-Header bar"> | ||
| <h1>Visit List</h1> | ||
| </header> | ||
| <div class="content-panel-inner"> | ||
| <div class="content-panel-body pad-none"> | ||
| <div> | ||
| <div id="ion-visit-list-timeline" class="orionViz-Timeline margin-sides" data-timeline-data="{"datapoints":[["time-x","2015-10-03T19:21:00.000Z","2017-01-29T08:33:05.000Z"],["time-y",0,0],["x","2015-12-03T06:00:00.000Z","2016-03-23T15:40:00.000Z","2016-03-24T17:44:00.000Z","2016-03-29T20:35:00.000Z","2016-03-30T15:38:00.000Z","2016-04-07T17:20:00.000Z"],["y",0,0,0,0,0,0],["today-line-x","2016-11-29T21:54:05.963Z","2016-11-29T21:54:05.963Z"],["today-line-y",-10,10]],"popup_data":[{"url":"/patients/1316024/encounters/4950397/orion/visit","content":null,"selector":null},{"url":"/patients/1316024/encounters/6024298/orion/visit","content":null,"selector":null},{"url":"/patients/1316024/encounters/6038161/orion/visit","content":null,"selector":null},{"url":"/patients/1316024/encounters/6090179/orion/visit","content":null,"selector":null},{"url":"/patients/1316024/encounters/6097726/orion/visit","content":null,"selector":null},{"url":"/patients/1316024/encounters/6188499/orion/visit","content":null,"selector":null}],"tick_formats":{"full_date":"%-m/%-d/%y","hour_only":"%-I%p","short_time":"%-I:%M%p","seconds_only":":%S","milliseconds_only":".%L"},"min_date":"2015-10-03T19:21:00.000Z","max_date":"2017-01-29T08:33:05.000Z","colors":["#0092E0","#0092E0","#FFCE3B"]}"></div> | ||
| <ul data-terra-responsive-element="true" class="terraVM-List list-divided-tight list-selectable"> | ||
| <li class="selection-static"> | ||
| <header id="ion-visit-list-future-header" class="terraVM-Header bar terraVM-SubsectionHeader" vm-selectable="false"> | ||
| <h1>Future</h1> | ||
| </header> | ||
| </li> | ||
| <li class="selection-static"> | ||
| <div class="terraVM-NoData-md" data-reactroot="" data-reactid="1" data-react-checksum="1047213844"> | ||
| <p class="terraVM-NoData-heading" data-reactid="2">No future visits for this patient</p> | ||
| </div> | ||
| </li> | ||
| <li class="selection-static"> | ||
| <header id="ion-visit-list-previous-header" class="terraVM-Header bar terraVM-SubsectionHeader" vm-selectable="false"> | ||
| <h1>Previous</h1> | ||
| </header> | ||
| </li> | ||
| <li class="terraVM-u-chevron"> | ||
| <div class="ion-visit-list-item js-navigator-discloseDetailTrigger terraVM-ResponsiveModel terraVM-ResponsiveModel--element" visit_list_encounter_id="6188499" vm-selectable="true" data-nav-content-url="/patients/1316024/encounters/6188499/orion/visit" data-nav-add-close-button="true" data-terra-responsive-element="true" data-terra-js-mq-sizes="xxs"> | ||
| <div class="terraVM-ResponsiveModel-container" data-rm-sizes="xxs xs sm md"> | ||
| <div class="terraVM-CompactCard terraVM-CompactCard--twoColumns terraVM-CompactCard--defaultTheme terraVM-CompactCard--accessoryAlignCenter terraVM-CompactCard--truncated"> | ||
| <div class="terraVM-CompactCard-body"> | ||
| <div class="terraVM-CompactCard-rowContainer"> | ||
| <div class="terraVM-CompactCard-row"> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">Apr 7, 2016 5:20 PM</div> | ||
| </div> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">Inpatient</div> | ||
| </div> | ||
| </div> | ||
| <div class="terraVM-CompactCard-row"> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">--</div> | ||
| </div> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">Foo, Bar</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="terraVM-ResponsiveModel-container" data-rm-sizes="lg xl xxl"> | ||
| <div class="terraVM-TableCard terraVM-TableCard--truncated"> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">Apr 7, 2016 5:20 PM</div> | ||
| </div> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">Inpatient</div> | ||
| </div> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">--</div> | ||
| </div> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">Foo, Bar</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li class="terraVM-u-chevron"> | ||
| <div class="ion-visit-list-item js-navigator-discloseDetailTrigger terraVM-ResponsiveModel terraVM-ResponsiveModel--element" visit_list_encounter_id="6097726" vm-selectable="true" data-nav-content-url="/patients/1316024/encounters/6097726/orion/visit" data-nav-add-close-button="true" data-terra-responsive-element="true" data-terra-js-mq-sizes="xxs"> | ||
| <div class="terraVM-ResponsiveModel-container" data-rm-sizes="xxs xs sm md"> | ||
| <div class="terraVM-CompactCard terraVM-CompactCard--twoColumns terraVM-CompactCard--defaultTheme terraVM-CompactCard--accessoryAlignCenter terraVM-CompactCard--truncated"> | ||
| <div class="terraVM-CompactCard-body"> | ||
| <div class="terraVM-CompactCard-rowContainer"> | ||
| <div class="terraVM-CompactCard-row"> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">Mar 30, 2016 3:38 PM</div> | ||
| </div> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">Inpatient</div> | ||
| </div> | ||
| </div> | ||
| <div class="terraVM-CompactCard-row"> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">--</div> | ||
| </div> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">Baz, Bar</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="terraVM-ResponsiveModel-container" data-rm-sizes="lg xl xxl"> | ||
| <div class="terraVM-TableCard terraVM-TableCard--truncated"> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">Mar 30, 2016 3:38 PM</div> | ||
| </div> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">Inpatient</div> | ||
| </div> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">--</div> | ||
| </div> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">Baz, Bar</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li class="terraVM-u-chevron"> | ||
| <div class="ion-visit-list-item js-navigator-discloseDetailTrigger terraVM-ResponsiveModel terraVM-ResponsiveModel--element" visit_list_encounter_id="6090179" vm-selectable="true" data-nav-content-url="/patients/1316024/encounters/6090179/orion/visit" data-nav-add-close-button="true" data-terra-responsive-element="true" data-terra-js-mq-sizes="xxs"> | ||
| <div class="terraVM-ResponsiveModel-container" data-rm-sizes="xxs xs sm md"> | ||
| <div class="terraVM-CompactCard terraVM-CompactCard--twoColumns terraVM-CompactCard--defaultTheme terraVM-CompactCard--accessoryAlignCenter terraVM-CompactCard--truncated"> | ||
| <div class="terraVM-CompactCard-body"> | ||
| <div class="terraVM-CompactCard-rowContainer"> | ||
| <div class="terraVM-CompactCard-row"> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">Mar 29, 2016 8:35 PM</div> | ||
| </div> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">Inpatient</div> | ||
| </div> | ||
| </div> | ||
| <div class="terraVM-CompactCard-row"> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">--</div> | ||
| </div> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">FooBar, Baz</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="terraVM-ResponsiveModel-container" data-rm-sizes="lg xl xxl"> | ||
| <div class="terraVM-TableCard terraVM-TableCard--truncated"> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">Mar 29, 2016 8:35 PM</div> | ||
| </div> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">Inpatient</div> | ||
| </div> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">--</div> | ||
| </div> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">FooBar, Baz</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li class="terraVM-u-chevron"> | ||
| <div id="ion-visit-list-view-more" vm-selectable="true" class="js-navigator-showPageTrigger terraVM-ResponsiveModel terraVM-ResponsiveModel--element" data-nav-content-url="/patients/1316024/orion/visit-list" data-terra-responsive-element="true" data-terra-js-mq-sizes="xxs"> | ||
| <div class="terraVM-ResponsiveModel-container" data-rm-sizes="xxs xs sm md"> | ||
| <div class="terraVM-CompactCard terraVM-CompactCard--twoColumns terraVM-CompactCard--defaultTheme terraVM-CompactCard--accessoryAlignCenter terraVM-CompactCard--truncated"> | ||
| <div class="terraVM-CompactCard-body"> | ||
| <div class="terraVM-CompactCard-rowContainer"> | ||
| <div class="terraVM-CompactCard-row"> | ||
| <div class="terraVM-CompactCard-content"> | ||
| <div class="terraVM-CompactCard-text">View More...</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="terraVM-ResponsiveModel-container" data-rm-sizes="lg xl xxl"> | ||
| <div class="terraVM-TableCard terraVM-TableCard--truncated"> | ||
| <div class="terraVM-TableCard-content terraVM-TableCard-content--medium"> | ||
| <div class="terraVM-TableCard-text">View More...</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div></div> | ||
|
|
||
| </div> | ||
| <script src="/assets/iframeResizer.contentWindow.js"></script> | ||
|
|
||
| </div> | ||
| <script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js" defer></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.