Advanced iframe Pro v7.5.2 (Your installation is up to date - view history)

Transcription

1 Dashboard Posts Media Pages Comments Projects TablePress Appearance Plugins 1 Users Tools Settings General Writing Reading Discussion Advanced iframe Pro v7.5.2 (Your installation is up to date - view history) If you start using advanced iframe please read the quickstart guide on the options tab first. After that continue with an iframe like described on the basic tab. Only if the iframe appears add additional features. Go to the free and the pro demos page for running examples. Settings updated. Search for settings The search does look for the search term in the label and the description of each setting on all tabs. Tabs with findings are marked yellow. It does not search in the additional documentation that does exist in each section. Please use the browser search for a full text of this page. Options Basic Settings Advanced Settings External workaround Add/Include files Help / FAQ Please open the section where you want to change a default setting. Please note that some of the advanced features require basic html/css knowhow! You can open several sections at once for easier navigation. Advanced features Advanced features The following options are already features which are not html standard anymore. All the options do already require additional Javascript, css or dynamic processing. Media Permalinks Advanced iframe Pro BridgeDD Duplicate Page Quicklinks: Auto height/width Show only a part of the iframe Hide/cover parts of the iframe Zoom Lazy load Url parameter handling Modify the iframe Modify the parent page Open iframe in layer PDF Embedder TinyMCE Advanced WP w3all Menu Editor SEO 4 Advanced iframe Pro Security Divi Mass Pages/Posts Creator Page Revolution Slider Punch Fonts Smart Forms Scrolls the parent window/iframe to the top Hide the iframe until it is loaded Yes Iframe False If you like that if you click on a link in the iframe the parent page should scroll to the top of the whole page you should set this to 'Yes'. Please note that this is done by Javascript! So if a user has Javascript deactivated no scrolling is done. This setting generates the code onload="aiscrolltotop("id","true");" to the iframe. If you select the resize iframe as well then onload="airesizeiframe(this);aiscrolltotop("your_id","true");" is generated. If you like a different order please enter the javascript functions directly in the onload parameter in the order you like. You can also scroll to the top of the iframe by selecting 'Iframe'. Then this setting generates the code onload="aiscrolltotop("your_id","iframe");". Shortcode attribute: onload_scroll_top="true", onload_scroll_top="iframe" or onload_scroll_top="false" Yes No This setting hides the iframe until it is loaded. This prevents the iframe white flash issue while loading. When you use the external Page 1 of 21

2 Collapse menu workaround please check the setting for the "External workaround". The setting there overwrites this setting because otherwise the iframe is maybe shown too early! Shortcode attribute: hide_page_until_loaded="true" or hide_page_until_loaded="false" Show loading icon Yes No You can show a loading icon until the page in the iframe is fully loaded. You can use your own image with the size of 66 x 66 px by replacing the file img/loader.gif. Shortcode attribute: show_iframe_loader="true" or show_iframe_loader="false" Hide the content until iframe is loaded If you define a color here (e.g. #ffffff) the content of the main page is hidden until the iframe is loaded. Especially if the iframe does cover most of your page the iframe looks more integrated. If you use fullscreen iframes sometimes it is better to keep this additional layer as the fullscreen iframe is on top of this. Add keep to your color then. E.g. #ffffff keep. Shortcode attribute: hide_content_until_iframe_color="" Enable responsive iframe Yes No You can enable that the width of iframe is responsive. This features adds a max-width:100% to the iframe. So the defined width is the maximum width of the iframe. If the surrounding element gets smaller than this, the iframe is responsive and does shrink! When you enable this feature AND also the resize the iframe to the content height (direct or by external workaround), the height does get responsive too! And this is the big difference to any other pure css solution which only work for iframes with a certain ratio e.g. for videos. Please read this post for details and take a look pro demo. Please note that this feature does NOT work together with "Show only a part of an iframe" and "Hidden tabs". Shortcode attribute: enable_responsive_iframe="true" or enable_responsive_iframe="false" Set Iframe height by ratio This setting enables you to set the height of an iframe depending on the width of an iframe with a given ratio. If you have a static site you know the width of an iframe and you can set the height to a fix value. But if you e.g. have an iframe width of 100% and responsive layout you do not know the height. Using auto height does solve this most of the time but sometimes the content inside the iframe is fully dynamic too (like a video which does scale). If this is the case you can define a ratio here. e.g. 0.5 means that if you have a width of 1000 you have a height of 500. If the width changes to 800 the height changes to 400. Please use a. as decimal char. This setting does also work together with "Enable responsive iframe". Scalling the browser does change the height also if you enable the setting above. If you enable this setting the local resize settings are disabled! Shortcode attribute: iframe_height_ratio="" Page 2 of 21

3 Reload interval You can reload the iframe in a given interval. Enter the intervall im ms or leave the field blank for no reload. Shortcode attribute: reload_interval="" Browser detection You can specify browser specific iframes. This is imporant especially for the "Show only part of the iframe" feature where browser differences of a few pixels can matter. But you can use this for other things as well because mobile, iphone, ipad can also be detected. Please read the browser detection section for details. Shortcode: browser="" Update Settings Resize the iframe to the content height/width Resize the iframe to the content height/width Options if the iframe is on the same domain PLEASE READ THIS FIRST: Only if the content from the iframe comes from the same domain it is possible that the onload attribute can execute Javascript directly which does e.g. resize the iframe to the height of the content or scroll the parent window to the top. If this is the case you can use the settings below. If you want to include an iframe from a different domain please go to the "External workaround" where I explain how this can be done if you can modify the web site that should be included. So if you are on a different domain and cannot edit the external iframe page no interaction between parent and iframe is possible! Please note: The resize implementation for the same domain is the same for the pro and the free version. But the external workaround of the PRO version has additional options like you can define the element to measure and it has some additional tricks that the measurements do work. So if you have problems with the auto height on the same domain try the external workaround with including ai_external.js! Resize iframe to content height Yes No If you like that the iframe is resized to the height of the content you should set this to 'Yes'. Please note that this is done by Javascript! So if a user has Javascript deactivated or a not supported browser the iframe does not get resized. Please set the height of the iframe to the minimum pixels the iframe should have! Some web pages use 100% of the height. Specifying a too big value as height does not gives you the expected result. This setting generates the code onload="airesizeiframe(this);" to the iframe. Shortcode attribute: onload_resize="true" or onload_resize="false" Resize delay Sometimes the external page does not have its full height after loading because e.g. parts of the page are build by Javascript. If this is the case you can define a timeout in millisecounds until the resize is called. Otherwise leave this field empty.. Shortcode attribute: onload_resize_delay="" Page 3 of 21

4 Store height in cookie Yes No If you enable the dynamic resize the value is calculated each time when the page is loaded. So each time it took a little time until the resize of the iframe is done. And this is visible sometimes if the content page loads very slow or is on a different domain or depends on the browser. By enabling this option the last calculated height is stored in a cookie and available right away. The iframe is then first resized to this height and later on when the new height comes it is updated. By default this is disabled because when you have dynamic content in the iframe it is possible that the iframe does not shrink. So please try this setting with your destination page. If you use several iframes on one page please don't use this because currently only one cookie per page is supported. Also you cannot use this feature if you include the ai.js file at the bottom. If you use iframe on different pages different id are needed because the id is part of the cookie.. Shortcode attribute: store_height_in_cookie="true" or store_height_in_cookie="false" Additional height 0 If you like that the iframe is higher than the calculated value you can add some extra height here. This number is then added to the calculated one. This is e.g. needed if one of your tested browsers displays a scrollbar because of 1 or 2 pixel. Or you have an invisible area that is shown by the click on a button that can increase the size of the page. This option is NOT possible when "Store height in cookie" is enabled because this would cause that the height will increase at each reload of the parent page. If you use several iframes please use the same setting for all of them because there is only one global variable. Shortcode attribute: additional_height="" Resize iframe to content width Yes No If you like that the iframe is resized to the width of the content you should set this to 'Yes'. PLEASE NOTE: Normally this is NOT what you want. Most people like a width of 100%! If you have a responsive layout this setting should be false. If your iframe has only a width of 1px disable the feature! Please note that this is done by Javascript and only in combination with resizing the content height! So if a user has Javascript deactivated or a not supported browser the iframe does not get resized. This setting generates the code onload="airesizeiframe(this, 'true');" to the iframe. Shortcode attribute: onload_resize_width="true" or onload_resize_width="false" Resize on click events If you like that the iframe is resized after clicks in the iframe please enter the timeout here. Otherwise leave this field Page 4 of 21

5 empty. The number is the timeout in milliseconds until the resize is called. This setting intercepts the clicks on the element specified below. Catching happens BEFORE the actual action on e.g. the link. Therefore you need to enter a number > 0 because the original action is done later. 100 is a good value to start with! If you have e.g. a slide down effect you should add the time here it takes to get the full height. This setting does only work on the SAME domain by default. If you like to get this working across different domains use the "Resize on Element resize" feature of the pro version. Shortcode attribute: resize_on_click="" Elements where the clicks are intercepted a You can define the tags and ids where the clicks should be intercepted. By default all links "a" are intercepted. To define a specific id you have to add the id with a :. So intercepting all links with the id "testid" you have to enter "a:testid". The id you specify is compared with "contains". So if you use "a:test" all links with an id containing test are intercepted. You can add several tags separated by ",". So "a:test,button:submitid" would work fine. Always try to specify the elements as exactly as possible to avoid any problems with other Javascript on the site. If you leave this field empty resize on click events is NOT enabled at all! Shortcode attribute: resize_on_click_elements="" Resize on AJAX events If you like that the iframe is resized after each AJAX event in the iframe please enter a number here. Otherwise leave this field empty. The number is the timeout in milliseconds until the resize is called. This setting intercepts the AJAX call after the callback was executed. So for many pages 0 should work fine. But if you have e.g. a slide down effect you should add the time here to get the full height. Currently only jquery and direct XMLHttpRequest are supported as AJAX calls on the included page! See the "AJAX events are jquery" setting. This setting does only work on the SAME domain by default. If you like to get this working across different domains use the "Resize on Element resize" feature of the pro version. Shortcode attribute: resize_on_ajax="" AJAX events are jquery Yes No Currently only direct XMLHttpRequest and jquery AJAX call can be intercepted. Please select true = jquery, false = XMLHttpRequest. Shortcode attribute: resize_on_ajax_jquery="true" or resize_on_ajax_jquery="false" Resize on element resize With this setting 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 Page 5 of 21

6 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 (see below). So e.g. every 100ms a certain div is checked and if the size has changed the iframe is resized. If you only specify "body" then the iframe does enlarge nicely but does not get smaller anymore. Therefore you should not use this! The best way to configure this is to use the outermost element where the change can happen. Please see example 26 for a working example. This feature does also trigger all css/js modifications inside the iframe again! You can use the jquery syntax to specify the elements. Most likely the outermost div (e.g. #main, #page, #wrap) is the one you need. This feature is also available in the external workaround while "Resize on click events" and "Resize on AJAX events" not yet! Shortcode attribute: resize_on_element_resize="" Poll interval for the resize detection 250 The invervall in ms the specified element is checked for a change of the size. The minimum polling time is 50ms. If you a smaller value the default of 250 is used. Shortcode attribute: resize_on_element_resize_delay="" Onload Enter the 'onload' script of the iframe you want to execute. You can enter Javascript that is executed when the iframe is loaded. Please check the settings before first! There you find a solution for iframe resize. Please note that the output is escaped for security reasons with the Wordpress function esc_js. So please define your Javascript functions in your parent page, read all needed parameters inside the functions and call this function here. I recommend to use only the following characters: a-za-z_0-9();. Also note that the 2 settings below also use the onload event. So if you set them to true the code is appended to your onload function. If you like a different order of the predefined functions (aishowelementonly(id,element); airesizeiframe(this); and aiscrolltotop();) please set the settings below to 'No' and enter them here directly. Shortcode attribute: onload="" Resize hidden iframes on tabs Elements that are hidden with display:none return a size of 0 when the height is measured. This is very often the case when tabs are used and you place an iframe on a tab that is not shown by default. The next settings are needed for a workaround that moves the hidden element out of the viewport, shows and measures the iframe and moves everything back. To get this working you need to provide the id or class of the tab that is hidden and depending on the tabs plugin also the id or class of the tab that is visible by default to get the correct width. Please read the section "How to find the id and the attributes" to find the right id or class. E.g. Tabby Responsive Tabs and Post UI Tabs work fine with this solution. Even nested tabs do work! If you need a custom solution please contact me for an offer. Page 6 of 21

7 IMPORTANT: If you use this feature with the external workaround you NEED to set a resize delay because otherwise the height is measured while the element is still hidden. This can be done by setting "var onload_resize_delay = 200;" before the external workaround script. Depending on the size of your page you might have to increase this value. As the tab is hidden this should not be a problem. For details please see the "External workaround". Please note: Check the lazy load feature! It does also support hidden tabs and is maybe the better solution as you only load the iframe when it is really visible. Please note: This feature is not supported for responsive iframes because the size of the hidden tabs are not calculated at each resize. Hidden tab(s) with iframe The id or class of the tab that is hidden. You need to define the element that has display:none set. E.g. For "Tabby Responsive Tabs" this would be #tablist1-panel2 if the iframe is on the 2nd tab. For "Post UI Tabs" it would be #tabs-1-2. If you have nested hidden elements all elements need to be defined here. You need to specify each hidden element starting from the outermost. e.g. #tablist1-panel2,#tabs-1-2 if you use "Tabby Responsive Tabs" and inside the tabs "Post UI Tabs. Shortcode attribute: tab_hidden="" Visible tab The id or class of the tab that is visible by default. This is needed to preserve the width of the first hidden tab. Depending on your css this is not needed but e.g. for "Tabby Responsive Tabs" you would need #tablist1-panel1 in the default setup. If you have defined several elements at "Hidden tab(s) with iframe" you need to specify the element that has the same width as the hidden element you have defined first above. Shortcode attribute: tab_visible="" Update Settings Show only a part of the iframe Show only a part of the iframe You can only show a part of the iframe. This solution DOES WORK across domains without any hacks! This is a solution that works only with css by placing a window over the iframe which does a clipping. All areas of the iframe that are not inside the window cannot be seen. Please specify the upper left corner coordinates x and y and the height and width that should be shown. Specify a fixed height and width in the iframe options at the top for optimal results! Simply select the area you want to show with the graphical area selector! You can even zoom the selected area that it fits properly e.g. on a mobile phone. Please go to the pro demo for some working examples. Please also check the additional 5 options. These are the advanced features to handle changes in the iframe. Also media queries are supported! This enables you to show different areas depending on the browser width. Please see example 55 for a working demo. Open the area selector Show me an image how the settings are used. Show only part of the iframe Yes No Show only part of the iframe. You have to enable this to use all the options below. Please read the text above. Shortcode Page 7 of 21

8 attribute: show_part_of_iframe="true" or show_part_of_iframe="false" Upper left corner x Specifies the x coordinate of the upper left corner of the view window. Enter the x-offset from the left border of your external iframe page you want to show. Shortcode attribute: show_part_of_iframe_x="". Show me an image how this settings is used. Upper left corner y (top distance) Specifies the y coordinate of the upper left corner. Enter the y- offset from the top border of your external iframe page you want to show. Shortcode attribute: show_part_of_iframe_y="". Show me an image how this settings is used. Width of the visible content Specifies the width of the content in pixel that should be shown. Shortcode attribute: show_part_of_iframe_width="". Show me an image how this settings is used. Height of the visible content Specifies the height of the content in pixel that should be shown. Shortcode attribute: show_part_of_iframe_height="". Show me an image how this settings is used. Enable horizontal scrollbar Yes No By default you specify a fixed area you want to show from the external page. Settings this to "true" will show a horizontal scrollbar if needed. Shortcode attribute: show_part_of_iframe_allow_scrollbar_horizontal="true" or show_part_of_iframe_allow_scrollbar_horizontal="false". Show me an image how this settings is used. Enable vertical scrollbar Yes No By default you specify a fixed area you want to show from the external page. Settings this to "true" will show a vertical scrollbar if needed. Shortcode attribute: show_part_of_iframe_allow_scrollbar_vertical="true" or show_part_of_iframe_allow_scrollbar_vertical="false". Show me an image how this settings is used. Viewport style Show part of an iframe does create an additional div which is the element you can style here. If you e.g. want to add a border you can use "border: 2px solid #ff0000;". Using the style, border or class in the default settings do not work as they are all related to the iframe directly! Shortcode attribute: show_part_of_iframe_style="" Page 8 of 21

9 Enable auto zoom Yes No Full This zoom setting enables you to zoom the viewport automatically to the available space. The difference to the normal zoom options is that the whole selected area is zoomed and not the content of the iframe only. This zoom works like the "Auto zoom by ratio" but you don't have to specify a ratio as the height and the width is already known from the settings above. This feature does check the size of the div around the viewport and calculates the needed zoom factor and offsets. Therefore you have to select a fixed viewport (e.g. width:500) because otherwise the calculated zoom would always be 1. If you select "Yes" the zoom does only shrink the viewport which is normally the best choice because looks good on desktop and is shown smaller on mobile devices. If you select "Full" the viewport is also enlaged. Also the feature "Hide/cover parts of the iframe" is supported. So if you place e.g. a colored div over a certain area to hide it it is also zoomed Shortcode attribute: show_part_of_iframe_zoom="true", show_part_of_iframe_zoom="false" or show_part_of_iframe_zoom="full" With the following 5 options you can do something when the page in the iframe does change. The parent page does only know the url of the iframe that is loaded initially. This is a browser restriction when the pages are not on the same domain. The parent only can find out when the page inside does change. But it does not know to which url. So the options below rely on a counting of the onload event. But for certain solutions (e.g. show only the login part of a page and then open the result page as parent) this will work. Change the viewport when iframe changes to the next step You can define different viewports when the page inside the iframe does change and a onload event is fired. Each time this event is fired a different viewport is shown. A viewport is defined the following way: left,top,width,height e.g. 50,100,500,600. You can define several viewports (if you e.g. have a straigt workflow) by separating the viewports by ; e.g. 50,100,500,600;10,40,200,400. Each viewport has its own class: ai-viewport-x. X is the number of the viewport starting with 0! You can e.g. enable scroll for specific viewports with this setting. Shortcode attribute: show_part_of_iframe_next_viewports="" Restart the viewports from the beginning after the last step. Yes No If you define different viewports it could make sense always to use them in a loop. E.g. if you have an image gallery where you have an overview with viewport 1 and a detail page with viewport 2. And you can only can come from the overview to the detail page and back. Shortcode attribute: show_part_of_iframe_next_viewports_loop="true" or show_part_of_iframe_next_viewports_loop="false" Open iframe in new window after the last step You can define if the iframe is opened in a new tab/window or as full window. the options you can use are "_top" = as full Page 9 of 21

10 window, "_blank" = new tab/window or you leave it blank to stay in the iframe. Because of the browser restriction not the current url of the iframe can be loaded. It is either the initial one or the one you specify in the next setting. Shortcode attribute: show_part_of_iframe_new_window="", show_part_of_iframe_new_window="_top" or show_part_of_iframe_new_window="_blank" Url that is opened after the last step You can define the url that is loaded after the last step. This enables you to jump to a certain page after your workflow. This is useful with the above. Shortcode attribute: show_part_of_iframe_new_url="" Hide the iframe after the last step Yes No Hides the iframe after the last step completely. Shortcode attribute: show_part_of_iframe_next_viewports_hide="true" or show_part_of_iframe_next_viewports_hide="false" Update Settings Hide/cover parts of the iframe. Hide/cover parts of the iframe. Please note: This is an advanced setting! You need to know basic html/css to use all possibilities of this feature! You can define an area which will be hidden by a rectangle you define. This can e.g. be used to hide a logo. Open the area selector in the hide parts mode Hide/cover parts of the iframe. Make an iframe read only A rectangle is defined the following way: left,top,width,height,color,z-index e.g. 10,20,200,50,#ffffff,10. This defines a rectangle in white with the z-index of 10. z-index means the layer the rectangle is placed. If you don't see your rectangle please use a higher z-index. You can also define a background image here! use e.g. 10,20,200,50,#ffffff;background-image:url(your-logo.gif);background-repeat:no-repeat;,10 for a white rectangle with the given background image. Use the area selector to get the coordinates very easy. You can specify several rectangles by separating them by. Please see the pro demo for a cool example where a logo is exchanged. You can also create read only iframes with this feature. Use hide_part_of_iframe="0,0,100%,100%,transparent,10". For a working example please see example 21 of the pro demo. It is also possible to define an optional link and an optional target for this area. Parameter 7 is the url and parameter 8 the target. So a working example would be: hide_part_of_iframe="0,0,100%,100%,transparent,10, The divs can also be right and bottom aligned. You need to specify the prefix r for right instead of left and b for bottom instead of top. An example would look like this: r10,b20,200,50,#ffffff,10. Also media queries are supported! This enables you to hides areas depending on the browser width. Please see example 50 for a working demo. Page 10 of 21

11 The div does also support the usage of an external html files even with shortcodes. Below you see the existing external files, how to use them and you can also create/edit/delete them. Also you can hide the divs by click or hide them after a given time of ms. Add $hide or $hidexxxx where XXXX is the time in ms. So $hide3000 hides the div after 3 seconds. You can add this like an additional file or even together with it. e.g. #ffffff$hide or #ffffff$file$hide3000 is possible. For this feature it also makes sense to use semi transpartent backrounds. rgba is therefore supported now. The only thing which is important is that, needs to replaced by ;. So rgba(1;1;1;0.5) has to be used here. Shortcode attribute: hide_part_of_iframe="" Existing external div files You can show a custom html inside the div you create. This makes it possible to show whatever you like over the other iframe. Also shortcodes are supported in the external file. You can use this file if you attach the id of the file to the style settings seperated by a $. So 10,20,200,50,#ffffff$123,10 has to be used if your id is 123 (file name = hide_123.html) The following external div files in the folder "advanced-iframe-custom" currently exist. Please note that you can view/edit this files with the plugin editor of Wordpress by clicking on the "Edit/View" link. No custom external div files found. Create a custom external div file. Only specify the id. All files are named "hide_{id}.html": Create external div file Update Settings Modify the iframe Modify the iframe Modify the content of the iframe if the iframe page is on the same domain or if you can use the external workaround. With the following options you can modify the content of the iframe. IMPORTANT: This is only possible if the iframe comes from the same domain because of the same origin policy of Javascript. If you can use the "External workaround", you can also use this setting in the pro version. Please read the section "How to find the id and the attributes" above how to find the right styles. If the content comes from a different domain you have to modify the iframe page by e.g. adding a Javascript function that is then called by the onload function you can set above or you add a parameter in the url that you can read in the iframe and display the page differently then. You should also use the external workaround to modify the iframe if your page loads quite slow and you see the modifications on subsequent pages. The reason is that the direct modification can only be done after the page is loaded and the "Hide until loaded" is only working for the 1st page. The external workaround is able to hide the iframe until it is modified always and also css can be added to the header directly. Add css class to iframe elements Yes No Sometimes it is not possible to modify existing css classes in the iframe because they are also used somewhere else or there is no unique selector for this element. Also it is sometimes needed that each iframe page do need a different unique selector. Setting this attribute to true causes that in the iframe an unique is created from Page 11 of 21

12 the iframe url and is added as class to the body and his children. Then you are also able to e.g. hide a element on one page and show it on another page. Shortcode attribute: add_css_class_iframe="true" or add_css_class_iframe="false" Hide elements in iframe This setting allows you to hide elements inside the iframe. This can be used to hide e.g. a div or a heading. Usage: If you want to hide a div you have to enter a hash (#) followed by the id e.g. #header. If you want to hide a heading which is a <h2> you have to enter h2. You can define several elements separated by, e.g. #header,h2. I recommend using firebug to find the elements and the ids. You can use any valid jquery selector pattern here! Also the width and height of the elements are set to 0 because e.g. auto height or auto zoom could have problems measuring! Shortcode attribute: iframe_hide_elements="" Show only one element You can define which part of the page should be shown in the iframe. You can define the id (e.g. #id) or the class (.class) which should be shown. Be aware that all other elements below the body are removed! So if your css relies on a certain structure you have to add additional css by "Content id in iframe" below. Very often also a background is defined for the header which you should remove below. e.g. by setting background-image: none; in the body. This can be done at "Content id in iframe" and "Content styles in iframe" below. Shortcode attribute: onload_show_element_only="" With the next 2 options you can modify the css of your iframe if it is on the same domain or if you can use the external workaround and have the pro version. This settings are save to the ai_external.js. The first option defines the id/class/element you want to modify and at the 2nd option you define the styles you want to change. Content id in iframe Set the id of the element starting with a hash (#) that defines element you want to modify the css. You can use any valid jquery selector pattern here! In the field below you then define the style you want to overwrite. You can also define more than one element. Please separate them by and provide the styles below. Please read the note below how to find this id for other templates. #content h2 means that you want to set a new style for the div content and the heading h2 below. Shortcode attribute: iframe_content_id="" Content styles in iframe Define the styles that have to be overwritten to enable the full width. Most of the time you have to modify some of the following attributes: width, margin-left, margin-right, padding-left. Please use ; as separator between styles. If you have defined more than one element above (Content id in iframe) please separate the Page 12 of 21

13 different style sets with. The default values are: Wordpress default: 'width:450px;padding-left:45px;'. Twenty Ten: 'marginleft:20px;margin-right:240px'. inove: 'width:605px'. Please read the note below how to find these styles for other templates. If you have defined #content h2 at the Content id you can e.g. set 'width:650px;padding-left:25px; padding-left:15px;'. Shortcode attribute: iframe_content_styles="" Add css styles to iframe This setting does add the css you enter here directly as last element to the body of the iframe page. The big difference to the two settings before is, that not the css styles are modified by Javascript but a style element is added directly to the iframe. The advantage is that also!important can be used to overwrite such styles. This setting is only supported for the same domain. The disadvantage is that adding the style element is still done after the iframe is fully loaded and that writting valid css is a little bit more complicated. Use "Write css directly" for the external workaround. Enter the styles without <style>. The value is sanitized at the output! Therefore not all styles do work! e.g. body > p cannot be used. Use external files if you need this. Shortcode attribute: iframe_content_css="" With the next 2 options you can modify the target of links in your iframe if it is on the same domain or if you can use the external workaround and have the pro version. This settings are save to the ai_external.js.. Change iframe links/forms target Change links of the iframe page to open the url at a different target. This option does add the attribute target="your target" to the links you define. The targets are defined in the next setting. You can use any valid jquery selector pattern here! So if your link e.g. has an id="link1" you have to use "a#link1". If you want to change all links e.g. in the div with the id="menu-div" you have to use "#menu-div a". If you e.g. only want to change all links of pdfs you can use "a[href$=.pdf]"). Also the target of a form can be changed. So using "form" will change the target of all forms. You can also define more than one element. Please separate them with. Shortcode attribute: change_iframe_links="" Change iframe links/forms target value Here you define the targets for the links you define in the setting before. If you have defined more than one element above (Change iframe links) please separate the different targets with. E.g. "_blank _top". Shortcode attribute: change_iframe_links_target="" Update Settings Modify the parent page Modify the parent page Page 13 of 21

14 With the following options you can modify your template on the fly to give the iframe more space! At most templates you would have to create a page template with a special css and this is quite complicated. By using the options below your template is modified on the fly by jquery. Please look at the screenshots to make these options more clear. The options are very useful for templates that have a top navigation because otherwise your menu is gone! If you still want to do this you should add a back link to the page. The examples below are for Twenty Ten, inove and the default Wordpress theme. Please also look at "Add css styles to parent" if you have the pro version because there the css is directly written to the page which should work for many setups! Hide elements This setting allows you to hide elements when the iframe is shown. This can be used to hide the sidebar or the heading. Usage: If you want to hide a div you have to enter a hash (#) followed by the id e.g. #sidebar. If you want to hide a heading which is a <h2> you have to enter h2. You can define several elements separated by, e.g. #sidebar,h2. This gives you a lot more space to show the content of the iframe. To get the id of the sidebar go to Appearance -> Editor -> Click on 'Sidebar' on the right side. Then look for the first 'div' you find. The id of this div is the one you need. For some common templates the id is e.g. #menu, #sidebar, or #primary. For Twenty Ten and inove you can remove the sidebar directly: Page attributes -> Template -> no sidebar. Wordpress default: '#sidebar'. I recommend using firebug (see below) to find the elements and the ids. You can use any valid jquery selector pattern here! Shortcode attribute: hide_elements="" With the next 2 options you can modify the css of your parent page. The first option defines the id/class/element you want to modify and at the 2nd option you define the styles you want to change. Content id Some templates do not use the full width for their content and even most 'One column, no sidebar Page Template' templates only remove the sidebar but do not change the content width. Set the e.g. id of the div starting with a hash (#) that defines the content. You can use any valid jquery selector pattern here! In the field below you then define the style you want to overwrite. For Twenty Ten and WordPress Default the id is #content, for inove it is #main. You can also define more than one element. Please separate them with and provide the styles below. Please read the note below how to find this id for other templates. #content h2 means that you want to set a new style for the div content and the heading h2 below. Shortcode attribute: content_id="" Content styles Define the styles that have to be overwritten to enable the full width. Most of the time you have to modify some of the following attributes: width, margin-left, margin-right, padding-left. Please use ; as separator between styles. If you have defined more than one element above (Content id) please separate the different style sets with. The default values are: Wordpress default: 'width:450px;padding-left:45px;'. Twenty Ten: 'marginleft:20px;margin-right:240px'. inove: 'width:605px'. Read the note below how to find these styles for other templates. If you have Page 14 of 21

15 defined #content h2 at the Content id you can e.g. set 'width:650px;padding-left:25px; padding-left:15px;'. Shortcode attribute: content_styles="" Add css styles to parent This setting does add the css you enter here directly where the plugin is written to the page. The difference to the settings before is, that the modification is not done by jquery but the css is directly written to the parent. The advantage is that also!important can be used to overwrite such styles and that the modifications is not done after the whole page is loaded. You can also use this setting to configure "Hide elements" directly. The disadvantage is that the styles added where the plugin is written and do not overwrite the stlye rendered later and that writting valid css is a little bit more complicated. Enter the styles without <style>. The value is sanitized at the output! Therefore not all styles do work! e.g. body > p cannot be used. Use external files if you need this. Shortcode attribute: parent_content_css="" Add css class to parent elements Yes No Sometimes it is not possible to modify existing css classes of the parent because they are also used somewhere else or there is no unique selector for this element. Setting this attribute to true causes that a new class is added at each parent of the iframe up to the body! If the element has an id the class is named "ai-class- (id)". Otherwise "ai-class-(number)" is added. Then it is easy to identify all parent elements of the iframe and modify them. If you have several iframes on one page the classes could not be unique anymore. You need to set "Include ai.js in the footer" to false if you want to use this! Shortcode attribute: add_css_class_parent="true" or add_css_class_parent="false" Update Settings Open iframe in layer Open iframe in layer With the following options you can modify your template on the fly to give the iframe more space! At most templates you would have to create a page template with a special css and this is quite complicated. By using the options below your template is modified on the fly by jquery. Please look at the screenshots to make these options more clear. The options are very useful for templates that have a top navigation because otherwise your menu is gone! If you still want to do this you should add a back link to the page. The examples below are for Twenty Ten, inove and the default Wordpress theme. Change parent links target Change links of the parent page to open the url inside the iframe. This option does add the attribute target="your id" to the links you define. You can use any valid jquery selector pattern here! So if your link e.g. has an id="link1" you have to use "a#link1". If you want to change all links e.g. in the div Page 15 of 21

16 with the id="menu-div" you have to use "#menu-div a". You can also define more than one element. Please separate them with,. Shortcode attribute: change_parent_links_target="" Show iframe as layer Yes External No If you enable this, the iframe is initally hidden and if you click on a link defined at "Change parent links target" the iframe is shown as a simple lighbox as overlay on the page. So if you use this for external links the user does not leave your page! "External" does simply open all links that are not on the same domain in a layer. The setting at "Change parent links target" is ignored than. This setting does overwrite some iframe settings like height, width and border! Show part of iframe, lazy load, hide part of iframe and iframe loader are disabled as they do not work with this feature. Shortcode attribute: show_iframe_as_layer="true", show_iframe_as_layer="external", show_iframe_as_layer="false" Show layer 100% or original Yes No Original Show the layer with 100% ("Yes") or 96% ("No"). Original does mean that the size you set for the iframe is set as max width/height of the layer and 96% if the parent is smaller than your height/width Shortcode attribute: show_iframe_as_layer_full="true", show_iframe_as_layer_full="false", show_iframe_as_layer_full="original" Layer file id You can add an additional header/footer with custom html above or below the iframe in the layer. Header/Footer files need to be in the folder plugins/advanced-iframe-custom with the following naming convention: layer_{id}.html. The id has to be saved in this text field. Below you see the existing header/footer files and also you can create/edit/delete them. The content of this file is included into a div at the given position. You need to provide the height of your additional content in the next setting. Shortcodes in your custom file are supported! The placeholder {id} is replaced by the id of your iframe. This can be used to reuse a layer file where e.g. different images depending on the iframe should be shown. The id can only contain alphanumeric characters, - and _. The placeholder {src} is replaced by the src of your iframe. This can be used to create a link like: "Go to this page". Shortcode attribute: show_iframe_as_layer_header_file="" Layer header/footer height 100 The height of the additional layer. The height is needed to calculate the height of the iframe properly. Shortcode attribute: show_iframe_as_layer_header_height="" Page 16 of 21

17 Layer header postion Top Bottom Show the additional area above or below the iframe. Shortcode attribute: show_iframe_as_layer_header_position="top" or show_iframe_as_layer_header_position="bottom" Keep the content after closing Yes No To improve performance the content of an iframe is not loaded again if the same opening link is clicked again. It is only hidden and shown then. But sometimes it makes sense to unload the content if e.g. sound should be stopped or it is mandatory that the iframe shows the first page again. Shortcode attribute: show_iframe_as_layer_keep_content="true" or show_iframe_as_layer_keep_content="false" Existing additional layer files The following additional layer files in the folder "advanced-iframe-custom" currently exist. Please note that you can view/edit this files with the plugin editor of Wordpress by clicking on the "Edit/View" link. No custom additional header files found. Create a custom layer file. Only specify the id. All files are named "layer_{id}.html": Create custom layer file Update Settings Zoom Zoom All major browsers do support the zoom of iframes. Depending on your setup you can use a static zoom factor or even automatic zoom which does zoom the content depending on the available space. Please check the examples how the different zoom settings do work. Please note that the zoom below does only zoom the iframe. When you use the "Show only a part of the iframe" the inner content is zoomed. For zoom options of the viewport please check the settings at "Show only a part of the iframe" Zoom iframe You can zoom the content of the iframe with this setting. E.g. entering 0.5 does resize the iframe to 50%. At the iframe width and height you need to enter the FULL size of the iframe. So if you enter width = 1000, height = 500 and zoom = 0.5 than the result will be 500x250. The following browsers are supported: IE8-11, Firefox, Chrome, Safari, Opera. Older versions of IE are not supported. Please test all the browsers you want to support with your page because not all pages do look good in a zoomed mode! "Show only a part of an iframe" and "Resize iframe to content height" are supported. Shortcode attribute: iframe_zoom="" Support zoom on IE8 Yes No Page 17 of 21

18 Zoom on IE8 does require the browser detection. And the browser detection does need a lot of memory during processing and is only available for php > 5.3.x. So by default the IE8 support of zoom is disabled. If you enable this and your system runs out of memory the plugin does automatically disable this support by creating a file called advanced-iframecustom/browser-check-failed.txt. As long as this file does exist the IE8 support for zoom is disabled. Shortcode attribute: iframe_zoom_ie8="true" or iframe_zoom_ie8="false" Zoom absolute fix Yes No Sometimes the zoom measurements need an additional position:absolute to work correctly. Only set this to true if the zooms doens not work as expected. Shortcode attribute: use_zoom_absolute_fix="true" or use_zoom_absolute_fix="false" Auto zoom iframe Same domain Remote domain No This feature does automatically calculates the needed zoom factor to fit the iframe page into the parent page. Especially when you have a responsive website but the remote website is not responsive this is the only way that the page in the iframe does also zoom. Many smartphones and tablets to automatically zoom the parent page but not the iframe page. So there this feature can also be used. This feature works on the same domain and if you are able to use the external workaround and use auto height there (otherwise the width does not get transfered). Shortcode attribute: auto_zoom="same", auto_zoom="remote" or auto_zoom="false" Auto zoom by ratio This setting can be used on the SAME domain if the height of the page cannot be mesured but the ratio of the page is known. And if the width also cannot be measured automatically but is known because the iframe page has a fixed width, you can specify this width by adding with a pipe like ratio width. E.g If you know the the ratio and the width, this setting does also work on REMOTE domains. You don't even need access to the remote domain! For remote domains also select SAME in the setting before as remote means that the height/width information is sent from the remote domain which is not the case here. Shortcode attribute: auto_zoom_by_ratio="" Update Settings Lazy load Lazy load Iframes do often slow down the loading of pages because more content needs to be loaded at the same time. The lazy load feature can improve this by loading the iframe only when needed and can be configured in several ways: Page 18 of 21

19 1. The iframe is loaded when it is visible 2. The iframe is loaded after the parent page is loaded 3. The iframe is loaded manually Enable lazy load Yes No You can enable that iframes are lazy loaded. If you enable this, the iframe is loaded either after the ready event of the parent or if the iframe gets visible. Please check the "Enable lazy load threshold" setting below how to configure this. Shortcode attribute: enable_lazy_load="true" or enable_lazy_load="false" Lazy load threshold 3000 This setting sets the pixels to load earlier. Setting the value e.g. to 200 causes iframe to load 200 pixels before it appears in the viewport. It should be greater or equal zero. The default is set to 3000 which normally is a lazy load after the parent finished loading. If you set this value higher then the distance of the iframe to the top, the iframe is lazy loaded after the parent document ready event is fired. If you leave this field empty 0 is used. Shortcode attribute: enable_lazy_load_threshold="" Lazy load fadein time 0 This setting enables you to fade in the iframe after it is lazy loaded. Enter the time in milliseconds. Depending on the content of the iframe this looks good or not. Please test if you like the behaviour. If you leave this field empty 0 is used. Shortcode attribute: enable_lazy_load_fadetime="" Reserve iframe space Yes No By default the initial height of the iframe is reserved in the layout to avoid jumping when the iframe is loaded. "No" does not reserve the space anymore. Shortcode attribute: enable_lazy_load_reserve_space="true" or enable_lazy_load_reserve_space="false" How trigger lazy loading Default (Scroll) Auto Manually Normally (Default (Scroll)) the iframes are loaded lazy after the settings you specify above. The option "Auto" does check every 50 ms if the iframe is visible in the viewport and should be loaded. This is especially useful for iframes that are hidden when the page is loaded. So this can be used for hidden tabs because when this is shown no internal Javascipt event like scrolling does exist! If you use auto all iframes on the same page do poll because this is a global setting of the plugin. But you also can trigger the loading manually. This can also be used to lazy load tabs or when you want to load the iframe by yourself. For each iframe a Javascript function to show the iframe is created: ailoadiframe_"your id"(); e.g. ailoadiframe_advanced_iframe(); Simply call it when you want. Also see the next option! If you want to avoid polling for tabs use the manual setting. See the lazy load demo for an example. Shortcode attribute: enable_lazy_load_manual="false" Page 19 of 21