?>
</h2>
<p>
<?php
_e('<p>Iframes do often slow down the loading of pages because more content needs to be loaded at the same time.</p>
<p>The lazy load feature can improve this by loading the iframe only when needed and can be configured in several ways:</p>
<ol>
<li>The iframe is loaded when it is visible</li>
<li>The iframe is loaded after the parent page is loaded</li>
<li>The iframe is loaded manually</li>
</ol>', 'advanced-iframe');
echo '<table class="form-table">';
// lazy load
printTrueFalse($devOptions, __('Enable lazy load', 'advanced-iframe'), 'enable_lazy_load', __('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" ', 'advanced-iframe'), 'false', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/lazy-loading', false);
printNumberInput($devOptions, __(' Lazy load threshold', 'advanced-iframe'), 'enable_lazy_load_threshold', __('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="" ', 'advanced-iframe'), 'text', '3000');
printNumberInput($devOptions, __(' Lazy load fadein time', 'advanced-iframe'), 'enable_lazy_load_fadetime', __('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="" ', 'advanced-iframe'), 'text', '0');
printTrueFalse($devOptions, __(' Reserve iframe space', 'advanced-iframe'), 'enable_lazy_load_reserve_space', __('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" ', 'advanced-iframe'), 'true', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/lazy-loading', false);
printScollAutoManuall($devOptions, __(' How trigger lazy loading', 'advanced-iframe'), 'enable_lazy_load_manual', __('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" enable_lazy_load_manual="auto" or enable_lazy_load_manual="true" ', 'advanced-iframe'));
printTextInput($devOptions, __(' Element that triggers the lazy load', 'advanced-iframe'), 'enable_lazy_load_manual_element', __('If you enable "How trigger lazy loading -> manually" you have a Javascript function that triggers the lazy load. With this setting you can add an click event with this Javascript function to the element you define here. So if you e.g. have a tab with the id="tab1" you simply enter #tab1 here. Any jQuery selector does work here. So you can even attach this to several elements. Shortcode attribute: enable_lazy_load_manual_element=""', 'advanced-iframe'));
echo '</table>';
if ($devOptions['single_save_button'] == 'false') {
?>
<p class="button-submit">
<input class="button-primary" type="submit" name="update_iframe-loader" value="<?php
_e('Update Settings', 'advanced-iframe');
?>
"/>
</p>
<?php
}
_e('Free url checker', 'advanced-iframe');
?>
</strong>
</th> <td>
<?php
_e('<strong>Not all pages</strong> can be included in an iframe because they have a header flag this does not allow this. Please use the free iframe checker to find out if the page you want to include does work on all browsers: <a target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker/">Free iframe checker</a>.', 'advanced-iframe');
?>
</td>
</tr>
<?php
printNumberInput($devOptions, __('Width', 'advanced-iframe'), 'width', __('The width of the iframe. You can specify the value in px or in %. If you don\'t specify anything px is assumed. Pro user can also do basic calculations here if you have e.g. a fix left navigation on a page. e.g. 100%-200px. See <a target="_blank" href="http://caniuse.com/#feat=calc">http://caniuse.com/#feat=calc</a> for supported browsers! Shortcode attribute: width=""', 'advanced-iframe'));
printNumberInput($devOptions, __('Height', 'advanced-iframe'), 'height', __('The height of the iframe. You can specify the value in px or in %. If you don\'t specify anything px is assumed. Please note that % does most of the time does NOT give the expected result (e.g. 100% is only 150px) because the % are not from the iframe page but from the parent element. If you like that the iframe is resized to the content please go to \'<a id="resize-same-link" href="#rt">Resize the iframe to the content height/width</a>\' if you are one hte same domain or the "<a id="external-workaround-link" href="#xss">External workaround</a>" if the iframe is on a diffent domain. Pro user can also do basic calculations here if you have e.g. a fix header or footer on a page. e.g. 100%-200px. See <a target="_blank" href="http://caniuse.com/#feat=calc">http://caniuse.com/#feat=calc</a> for supported browsers! Shortcode attribute: height=""', 'advanced-iframe'));
printAutoNo($devOptions, __('Scrolling', 'advanced-iframe'), 'scrolling', __('Defines if scrollbars are shown if the page is too big for your iframe. Please note: If you select \'Yes\' IE does always show scrollbars on many pages! So only use this if needed. Scrolling "none" means that the attribute is not rendered at all and can be set by css to enable the scrollbars responsive. Shortcode attribute: scrolling="auto" or scrolling="no" or scrolling="none"', 'advanced-iframe'));
printNumberInput($devOptions, __('Margin width', 'advanced-iframe'), 'marginwidth', __('The margin width of the iframe. You can specify the value in px. If you don\'t specify anything px is assumed. Shortcode attribute: marginwidth=""', 'advanced-iframe'));
printNumberInput($devOptions, __('Margin height', 'advanced-iframe'), 'marginheight', __('The margin height of the iframe. You can specify the value in px. If you don\'t specify anything px is assumed. Shortcode attribute: marginheight=""', 'advanced-iframe'));
printNumberInput($devOptions, __('Frame border', 'advanced-iframe'), 'frameborder', __('The frame border of the iframe. You can specify the value in px. If you don\'t specify anything px is assumed. Shortcode attribute: frameborder=""', 'advanced-iframe'));
printTrueFalse($devOptions, __('Transparency', 'advanced-iframe'), 'transparency', __('If you like that the iframe is transparent and your background is shown you should set this to \'Yes\'. If this value is not set then the iframe is transparent in IE but transparent in e.g. Firefox. So by default you should leave this to \'Yes\'. Shortcode attribute: transparency="true" or transparency="false" ', 'advanced-iframe'));
printTextInput($devOptions, __('Class', 'advanced-iframe'), 'class', __('You can define a class for the iframe if you like. Shortcode attribute: class=""', 'advanced-iframe'));
if ($evanto) {
$style_fs = '<br /><input type="button" onclick="aiPresetFullscreen(); return false;" value="Set settings for fullscreen iframe" name="presetFullscreen" class="button-primary" id="presetFullscreen" />';
} else {
$style_fs = '';
}
printTextInput($devOptions, __('Style', 'advanced-iframe'), 'style', __('You can define styles for the iframe if you like. The recommended way is to put the styles in a css file and use the class option. With the button below the width, height, content_id, content_styles, hide_content_until_iframe_color and the needed styles above for a fullscreen iframe are set. Also check the settings at the height where you can do calculations to add fixed headers/footers. Shortcode attribute: style=""' . $style_fs, 'advanced-iframe'));
printTextInput($devOptions, __('Id', 'advanced-iframe'), 'id', __('Enter the \'id\' attribute of the iframe. Allowed values are only a-zA-Z0-9_. Do NOT use any other characters because the id is also used to generate unique javascript functions! Other characters will be removed when you save! If a src directly in a shortcode is set and no id than an id is generated automatically if several iframes are on one page to avoid configuration problems. Shortcode attribute: id=""', 'advanced-iframe'));
printTextInput($devOptions, __('Name', 'advanced-iframe'), 'name', __('Enter the \'name\' attribute of the iframe. Shortcode attribute: name=""', 'advanced-iframe'));
printTrueFalse($devOptions, __('Allow full screen', 'advanced-iframe'), 'allowfullscreen', __('allowfullscreen is an HTML attribute that enables videos to be displayed in fullscreen mode. Currently this is a new html attribute not supported by all browsers. So please check all of the browsers you want to support. Shortcode attribute: allowfullscreen="true" or allowfullscreen="false"', 'advanced-iframe'));
?>
</table>
<?php
if ($devOptions['single_save_button'] == 'false') {
</p>
<table class="form-table">
<?php
printTextInput($devOptions, __('Onload', 'advanced-iframe'), '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 following settings first! There you find a solution for iframe resize and one for scrolling the parent to the top. 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=""', 'advanced-iframe'));
printTrueFalse($devOptions, __('Resize iframe to content height', 'advanced-iframe'), 'onload_resize', __('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" ', 'advanced-iframe'));
printNumberInput($devOptions, __(' Resize delay', 'advanced-iframe'), 'onload_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=""', 'advanced-iframe'));
printHeightTrueFalse($devOptions, __('Store height in cookie', 'advanced-iframe'), 'store_height_in_cookie', __('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. <strong>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.</stong>. Shortcode attribute: store_height_in_cookie="true" or store_height_in_cookie="false" ', 'advanced-iframe'));
printHeightNumberInput($devOptions, __('Additional height', 'advanced-iframe'), 'additional_height', __('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=""', 'advanced-iframe'));
printTrueFalse($devOptions, __('Resize iframe to content width', 'advanced-iframe'), 'onload_resize_width', __('If you like that the iframe is resized to the width of the content you should set this to \'Yes\'. 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" ', 'advanced-iframe'));
printNumberInput($devOptions, __('Resize on click events', 'advanced-iframe'), 'resize_on_click', __('If you like that the iframe is resized after clicks in the iframe please enter the timeout here. Otherwise leave this field 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=""', 'advanced-iframe'));
printTextInput($devOptions, __(' Elements where the<br/> clicks are intercepted', 'advanced-iframe'), 'resize_on_click_elements', __('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=""', 'advanced-iframe'));
printNumberInput($devOptions, __('Resize on AJAX events', 'advanced-iframe'), 'resize_on_ajax', __('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=""', 'advanced-iframe'));
printTrueFalse($devOptions, __(' AJAX events are jQuery', 'advanced-iframe'), 'resize_on_ajax_jquery', __('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" ', 'advanced-iframe'));
if ($evanto) {
printTextInput($devOptions, __('Resize on element resize', 'advanced-iframe'), '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 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.<br />If you only specify "body" then the iframe does enlarge nicely but does not get smaller anymore. So 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. 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=""', 'advanced-iframe'), 'text', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize', true);
printNumberInput($devOptions, __(' Poll interval for the<br/> resize detection', 'advanced-iframe'), 'resize_on_element_resize_delay', __('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=""', 'advanced-iframe'), 'text', '', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize', true);
}
?>
</table>
<?php
if ($evanto) {
?>
<h3><?php
_e('Resize hidden iframes on tabs', 'advanced-iframe');
?>
</h3>
<p><?php
_e('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 "<a href="#howtoid">How to find the id and the attributes</a>" above how 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.', 'advanced-iframe');
?>
</p>
_e('Zoom', 'advanced-iframe');
?>
</h1>
<div>
<div id="icon-options-general" class="icon_ai">
<br>
</div><h2>
<?php
_e('Zoom', 'advanced-iframe');
?>
</h2>
<p>
<?php
_e('All major browsers do now support the zoom of iframes. Depending on your setup you can use a static zoom factor or even automatic zoom.', 'advanced-iframe');
echo '<table class="form-table">';
printNumberInput($devOptions, __('Zoom iframe', 'advanced-iframe'), 'iframe_zoom', __('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=""', 'advanced-iframe'), 'text', '', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/zoom-iframe-content');
printTrueFalse($devOptions, __(' Support zoom on IE8', 'advanced-iframe'), 'iframe_zoom_ie8', __('Zoom on IE8 does require the browser detection. And the browser detection does need a lot of memory during processing. 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-iframe-custom/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"', 'advanced-iframe'), 'false');
printTrueFalse($devOptions, __(' Zoom absolute fix', 'advanced-iframe'), 'use_zoom_absolute_fix', __('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"', 'advanced-iframe'), 'false');
printSameRemote($devOptions, __('Auto zoom iframe', 'advanced-iframe'), 'auto_zoom', __('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" ', 'advanced-iframe'), 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-zoom-iframe-content', true);
printTextInput($devOptions, __(' Auto zoom by ratio', 'advanced-iframe'), '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. 0.80|800. 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=""', 'advanced-iframe'), 'text', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-zoom-iframe-content#e35');
echo '</table>';
if ($devOptions['single_save_button'] == 'false') {
?>
<p class="button-submit">
<input class="button-primary" type="submit" name="update_iframe-loader" value="<?php
_e('Update Settings', 'advanced-iframe');
?>
"/>
</p>
<?php
<div id="icon-options-general" class="icon_ai">
<br>
</div> <h2>
<?php
_e('Include content directly', 'advanced-iframe');
?>
</h2>
<p>
<?php
_e('You can also include content directly with jQuery. The page is loaded and the part you specify below is included by Javascript into the page. The cool thing is that you can specify an id or a class which specify the content area that should be included. <strong>This feature does only work if the page is loaded from the SAME domain.</strong>. If you use the setting below no iframe is used anymore. So only include stuff that is for display only.<br/>Please note: Loading the external content is done after the page is fully loaded and takes some time. Therefore some extra settings below are possible to make the integration as invisible as possible. The included div has the id ai_temp_>iframe_name<. So if you need to overwrite some css you can put it in an extra file and add this in the section "Additional files" ', 'advanced-iframe');
_e('</p><p>"Include html" does write the given string directly and all other settings are not used!', 'advanced-iframe');
echo '<table class="form-table">';
printTextInput($devOptions, __('Include url', 'advanced-iframe'), 'include_url', __('Enter the full URL to your page you want to include. e.g. http://www.tinywebgallery.com. <strong>If you specify this then the page is included directly, the iframe settings above are not used and no iframe is included.</strong>. Shortcode attribute: include_url=""', 'advanced-iframe'));
printTextInput($devOptions, __('Include content', 'advanced-iframe'), 'include_content', __('You can specify an id or a class which specify the content area that should be included. For an id please use e.g. #id, for a class use .class. Shortcode attribute: include_content=""', 'advanced-iframe'));
printNumberInput($devOptions, __('Include height', 'advanced-iframe'), 'include_height', __('You can specify the height of the content that should be included. If you do this the space for the content is already reserved and this prevents that you maybe see when the page gets updated. You should specify the value in px. Shortcode attribute: include_height=""', 'advanced-iframe'));
printNumberInput($devOptions, __('Include fade', 'advanced-iframe'), 'include_fade', __('You can specify a fade in time that is used when the content is done loading. If you leave this setting entry the content is shown right away. If you specify a time in milliseconds then this content is faded in in the given time. This does sometimes looks nicer than if the content suddenly appears. Shortcode attribute: include_fade=""', 'advanced-iframe'));
printTrueFalse($devOptions, __('Hide page until include is loaded', 'advanced-iframe'), 'include_hide_page_until_loaded', __('If you like to hide the whole page until the extra content is loaded you should set this to \'Yes\'. You should test this setting and decide what looks best for you. Shortcode attribute: include_hide_page_until_loaded="true" or include_hide_page_until_loaded="false" ', 'advanced-iframe'));
if ($evanto) {
printTextInput($devOptions, __('Include html', 'advanced-iframe'), 'include_html', __('If you enter something here the given string is written instead of an iframe. This is especially helpful if you e.g. use the browser detection and you want to display a simple text, image or link instead of the iframe in this case. If you set this include_url is also ignored! Only the following tags are allowed: br, em, p, div(id, class, style), a(href, target, class, style), img(src, class, style, width, height). Shortcode attribute: include_html=""', 'advanced-iframe'));
}
echo '</table>';
if ($devOptions['single_save_button'] == 'false') {
?>
<p class="button-submit">
<input class="button-primary" type="submit" name="update_iframe-loader" value="<?php
_e('Update Settings', 'advanced-iframe');
?>
"/>
</p>
<?php
<?php
if ($evanto) {
?>
<p>
<?php
_e('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! Please go to the <a target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo">pro demo</a> for some working examples. Please also check the 5 options below. These are the advanced features to handle changes in the iframe', 'advanced-iframe');
echo '<p><input id="s" class="button-primary" type="button" name="update_iframe-loader" onclick="openSelectorWindow(\'' . site_url() . '/wp-content/plugins/advanced-iframe/includes/advanced-iframe-area-selector.html\');" value="';
_e('Open the area selector', 'advanced-iframe');
echo '" /></p>';
echo '<table class="form-table">';
printTrueFalse($devOptions, __('Show only part of the iframe', 'advanced-iframe'), 'show_part_of_iframe', __('Show only part of the iframe. You have to enable this to use all the options below. Please read the text above. Shortcode attribute: show_part_of_iframe="true" or show_part_of_iframe="false" ', 'advanced-iframe'), 'false', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe', false);
printNumberInput($devOptions, __(' Upper left corner x', 'advanced-iframe'), 'show_part_of_iframe_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=""', 'advanced-iframe'));
printNumberInput($devOptions, __(' Upper left corner y<br /> (top distance)', 'advanced-iframe'), 'show_part_of_iframe_y', __('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=""', 'advanced-iframe'));
printNumberInput($devOptions, __(' Width of the visible<br /> content', 'advanced-iframe'), 'show_part_of_iframe_width', __('Specifies the width of the content in pixel that should be shown. Shortcode attribute: show_part_of_iframe_width=""', 'advanced-iframe'));
printNumberInput($devOptions, __(' Height of the visible<br /> content', 'advanced-iframe'), 'show_part_of_iframe_height', __('Specifies the height of the content in pixel that should be shown. Shortcode attribute: show_part_of_iframe_height=""', 'advanced-iframe'));
printTrueFalse($devOptions, __(' Enable horizontal<br /> scrollbar', 'advanced-iframe'), 'show_part_of_iframe_allow_scrollbar_horizontal', __('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" ', 'advanced-iframe'), 'false');
printTrueFalse($devOptions, __(' Enable vertical scrollbar', 'advanced-iframe'), 'show_part_of_iframe_allow_scrollbar_vertical', __('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" ', 'advanced-iframe'), 'false');
printTextInput($devOptions, __(' Viewport style', 'advanced-iframe'), 'show_part_of_iframe_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=""', 'advanced-iframe'));
echo '</table>';
echo '<p>';
_e('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.', 'advanced-iframe');
echo '</p><table class="form-table">';
printTextInput($devOptions, __(' Change the viewport<br /> when iframe changes<br /> to the next step', 'advanced-iframe'), 'show_part_of_iframe_next_viewports', __('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. Shortcode attribute: show_part_of_iframe_next_viewports=""', 'advanced-iframe'));
printTrueFalse($devOptions, __(' Restart the viewports<br /> from the beginning<br /> after the last step.', 'advanced-iframe'), 'show_part_of_iframe_next_viewports_loop', __('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" ', 'advanced-iframe'));
printTextInput($devOptions, __(' Open iFrame in new<br /> window after the<br /> last step', 'advanced-iframe'), 'show_part_of_iframe_new_window', __('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 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" ', 'advanced-iframe'));
printTextInput($devOptions, __(' Url that is opened<br /> after the last step', 'advanced-iframe'), 'show_part_of_iframe_new_url', __('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="" ', 'advanced-iframe'));
printTrueFalse($devOptions, __(' Hide the iframe after<br /> the last step', 'advanced-iframe'), 'show_part_of_iframe_next_viewports_hide', __('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" ', 'advanced-iframe'));
printTextInput($devOptions, __('Hide/cover parts of the iframe. Make an iframe read only', 'advanced-iframe'), 'hide_part_of_iframe', __('Please note: This is an advanced setting! You need to know basic html/css! You can define an area which will be hidden by a rectangle you define. This can e.g. be used to hide a logo. 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 <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo#e8">pro demo</a> 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 possilbe 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,http://www.tinywebgallery.com,_blank". Shortcode attribute: hide_part_of_iframe=""', 'advanced-iframe'));
echo '</table>';
if ($devOptions['single_save_button'] == 'false') {
</div>
<div style="clear:left;"></div>
</div>
', 'advanced-iframe');
?>
<table class="form-table">
<?php
printTrueFalse($devOptions, __('Scrolls the parent window to the top', 'advanced-iframe'), 'onload_scroll_top', __('If you like that if you click on a link in the iframe the parent page should scroll to the top 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();" to the iframe. If you select the resize iframe as well then onload="aiResizeIframe(this);aiScrollToTop();" is generated. If you like a different order please enter the javascript functions directly in the onload parameter in the order you like. Shortcode attribute: onload_scroll_top="true" or onload_scroll_top="false" ', 'advanced-iframe'));
printTrueFalse($devOptions, __('Hide the iframe until it is loaded', 'advanced-iframe'), 'hide_page_until_loaded', __('This setting hides the iframe until it is loaded. This prevents the iframe white flash issue while loading. When you use the external workaround please check the setting for the "<a id="external-workaround-link" href="#xss">External workaround</a>". 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" ', 'advanced-iframe'));
if ($evanto) {
printTrueFalse($devOptions, __('Show loading icon', 'advanced-iframe'), 'show_iframe_loader', __('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" ', 'advanced-iframe'), 'false', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/zoom-iframe-content');
printTextInput($devOptions, __('Hide the content until iframe is loaded', 'advanced-iframe'), 'hide_content_until_iframe_color', __('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. Shortcode attribute: hide_content_until_iframe_color=""', 'advanced-iframe'));
printTrueFalse($devOptions, __('Enable responsive iframe', 'advanced-iframe'), 'enable_responsive_iframe', __('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 <strong>AND also the resize the iframe to the content height (direct or by external workaround)</strong>, 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 <a href="http://www.tinywebgallery.com/blog/responsive-iframes-with-advanced-iframe-pro" target="_blank">this post</a> for details and take a look <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/responsive-iframes" target="_blank">pro demo</a>. 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" ', 'advanced-iframe'), 'false', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/responsive-iframes', true);
printNumberInput($devOptions, __('Set Iframe height by ratio', 'advanced-iframe'), 'iframe_height_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="" ', 'advanced-iframe'), 'text', '', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/responsive-videos', false);
printTextInput($devOptions, __('Reload interval', 'advanced-iframe'), '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=""', 'advanced-iframe'));
}
?>
<tr>
<th scope="row"><strong><?php
_e('Browser detection', 'advanced-iframe');
?>
</strong>
</th><td>
<?php
_e('You can now 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 <a id="browser-detection-link" href="#browser-detection">browser detection</a> section for details. Shortcode: browser=""', 'advanced-iframe');
?>
</td>
</tr>
