This demo shows the ”Resize on element resize” feature and a couple of new features of Advanced iFrame pro 5.10 which are only available in the pro version of the advanced iframe.
Please read this overview about resize if you want to use it.
This can be used if your application inside the iframe does change the height dynamically by showing/hiding e.g. divs.
Example 26: Resize on element resize same domain
This example does resize the iframe if you show/hide elements in the iframe with jQuery. With this new feature you are able to detect if the size of an element changes. If this is the case than the iframe is resized. This can be on click, by an Ajax call, typing with the keyboard where a menu opens, a timer .... So actually any change of the size. The big advantage is that this feature is most of the time easier to configure than the options before and also more powerful. But it has the disadvantage that the change of the size is not send by an event but the defined elements are checked in a fix interval. So e.g. every 100ms a certain div is checked and if the size has changed the iframe is resized.
Also the following features are shown here:
- Add a css style to each parent element of the iframe - the thin red border you see below is set with this dynamic style
- Dynamic src parameters - The src is defined with a placeholder
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="{site}/wp-content/plugins/advanced-iframe/example/example_dynamic_26.html" onload_resize="true" width="800" height="100" resize_on_element_resize="#content" resize_on_element_resize_delay="100" id="example26" content_id=".ai-class-0" content_styles="border: 1px solid red" add_css_class_parent="true" scrolling="no"]
Example 27: Resize on element resize on a different domain
This example does the same resize as the example 26 but on a different domain. You see a little delay between the resize because of the additional browser communication.
Also the following features are shown here:
- Write css as style directly to the header - The header and the footer section you see below are hidden with this setting. so the css is modified already in the head and not after the ready event. Also the text color of the main file is changed. See example 26 how the original file looks like.
- Add the id to the url of the iframe (pass_id_by_url). So you don't need to specify the id for the external workaround as it is automatically extracted inside the iframe. This parameter is also needed in the settings because it is rendered to ai_external.js
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.mdempfle.de/examples/example27/example_dynamic.html" width="800" height="100" scrolling="no" id="example27" pass_id_by_url="ai_id"]
The settings in the external page are:
<script>
var updateIframeHeight = "true";
var hide_page_until_loaded_external = "true";
var write_css_directly = "true";
var resize_on_element_resize = "#content";
var resize_on_element_resize_delay = 50;
var iframe_url_id = "ai_id";
var iframe_hide_elements = "#iframe-header,#iframe-footer";
var iframe_content_id = "#iframe-content";
var iframe_content_styles = "color:#ff0000";
/script>
<script src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>