asda2432es

✏️ Editing: Advanced iFrame Pro attribute help.htm

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar"  lang="en-US">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Advanced iFrame Pro &lsaquo; TinyWebGallery Blog &#8212; WordPress</title>
<script type="text/javascript">
addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!='function'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}};
var ajaxurl = '/blog/wp-admin/admin-ajax.php',
	pagenow = 'toplevel_page_advanced-iframe',
	typenow = '',
	adminpage = 'toplevel_page_advanced-iframe',
	thousandsSeparator = ',',
	decimalPoint = '.',
	isRtl = 0;
</script>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel='dns-prefetch' href='//s.w.org' />
<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' href='http://www.tinywebgallery.com/blog/wp-admin/load-styles.php?c=1&amp;dir=ltr&amp;load%5B%5D=dashicons,admin-bar,common,forms,admin-menu,dashboard,list-tables,edit,revisions,media,themes,about,nav-menus,wp-pointer,widgets&amp;load%5B%5D=,site-icon,l10n,buttons,wp-auth-check&amp;ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='fs_common-css'  href='http://www.tinywebgallery.com/blog/wp-content/plugins/yet-another-stars-rating/freemius/assets/css/admin/common.css?ver=4.9.8' type='text/css' media='all' />

<link rel='stylesheet' id='xyz_fbap_style-css'  href='http://www.tinywebgallery.com/blog/wp-content/plugins/facebook-auto-publish/css/style.css?ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='wpstatistics-admin-css-css'  href='http://www.tinywebgallery.com/blog/wp-content/plugins/wp-statistics/assets/css/admin.css?ver=12.3.6.1' type='text/css' media='all' />
<link rel='stylesheet' id='omega-admin-css'  href='http://www.tinywebgallery.com/blog/wp-content/themes/omega/lib/css/admin.css?ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='ai-css-css'  href='http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/css/ai.css?ver=209618' type='text/css' media='all' />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/www.tinywebgallery.com\/blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.8"}};
			!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		
<script type='text/javascript'>
/* <![CDATA[ */
var userSettings = {"url":"\/blog\/","uid":"1","time":"1540131767","secure":""};var quicktagsL10n = {"closeAllOpenTags":"Close all open tags","closeTags":"close tags","enterURL":"Enter the URL","enterImageURL":"Enter the URL of the image","enterImageDescription":"Enter a description of the image","textdirection":"text direction","toggleTextdirection":"Toggle Editor Text Direction","dfw":"Distraction-free writing mode","strong":"Bold","strongClose":"Close bold tag","em":"Italic","emClose":"Close italic tag","link":"Insert link","blockquote":"Blockquote","blockquoteClose":"Close blockquote tag","del":"Deleted text (strikethrough)","delClose":"Close deleted text tag","ins":"Inserted text","insClose":"Close inserted text tag","image":"Insert image","ul":"Bulleted list","ulClose":"Close bulleted list tag","ol":"Numbered list","olClose":"Close numbered list tag","li":"List item","liClose":"Close list item tag","code":"Code","codeClose":"Close code tag","more":"Insert Read More tag"};/* ]]> */
</script>
<script type='text/javascript' src='http://www.tinywebgallery.com/blog/wp-admin/load-scripts.php?c=1&amp;load%5B%5D=jquery-core,jquery-migrate,utils,quicktags&amp;ver=4.9.8'></script>
<script type='text/javascript' src='http://www.tinywebgallery.com/blog/wp-content/plugins/facebook-auto-publish/js/notice.js?ver=4.9.8'></script>
<script type='text/javascript' src='http://www.tinywebgallery.com/blog/wp-content/plugins/jonradio-multiple-themes/js/tabs.js?ver=7.1.1'></script>
<script type='text/javascript' src='http://www.tinywebgallery.com/blog/wp-content/plugins/wp-code-highlight/js/wp-code-highlight-button.js?ver=4.9.8'></script>
<script type='text/javascript' src='http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai.js?ver=209618'></script>
<script type='text/javascript' src='http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/findAndReplaceDOMText.js?ver=209618'></script>
		<script>
			function aioseop_show_pointer(handle, value) {
				if (typeof( jQuery ) != 'undefined') {
					var p_edge = 'bottom';
					var p_align = 'center';
					if (typeof( jQuery(value.pointer_target).pointer) != 'undefined') {
						if (typeof( value.pointer_edge ) != 'undefined') p_edge = value.pointer_edge;
						if (typeof( value.pointer_align ) != 'undefined') p_align = value.pointer_align;
						jQuery(value.pointer_target).pointer({
							content: value.pointer_text,
							position: {
								edge: p_edge,
								align: p_align
							},
							close: function () {
								jQuery.post(ajaxurl, {
									pointer: handle,
									action: 'dismiss-wp-pointer'
								});
							}
						}).pointer('open');
					}
				}
			}
					</script>
			<link id="wp-admin-canonical" rel="canonical" href="http://www.tinywebgallery.com/blog/wp-admin/options-general.php?page=advanced-iframe.php" />
	<script>
		if ( window.history.replaceState ) {
			window.history.replaceState( null, null, document.getElementById( 'wp-admin-canonical' ).href + window.location.hash );
		}
	</script>
<script type="text/javascript">var _wpColorScheme = {"icons":{"base":"#82878c","focus":"#00a0d2","current":"#fff"}};</script>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
	.ep_exclude_alert { font-size: 11px; }
	.new-admin-wp25 { font-size: 11px; background-color: #fff; }
	.new-admin-wp25 .inner {  padding: 8px 12px; background-color: #EAF3FA; border: 1px solid #EAF3FA; -moz-border-radius: 3px; -khtml-border-bottom-radius: 3px; -webkit-border-bottom-radius: 3px; border-bottom-radius: 3px; }
	#ep_admin_meta_box .inner {  padding: inherit; background-color: transparent; border: none; }
	#ep_admin_meta_box .inner label { background-color: none; }
	.new-admin-wp25 .exclude_alert { padding-top: 5px; }
	.new-admin-wp25 .exclude_alert em { font-style: normal; }
  
  #help-header { display: none; }
  #adminmenuwrap, #wpadminbar, #wpfooter, .hide-print, .wp-core-ui .button-primary, #adminmenuback { display: none; }
  #wpcontent, #wpfooter { margin-left: 0px; }
  
</style></head>
<body class="wp-admin wp-core-ui no-js  toplevel_page_advanced-iframe auto-fold admin-bar branch-4-9 version-4-9-8 admin-color-fresh locale-en-us no-customize-support no-svg">
<script type="text/javascript">
	document.body.className = document.body.className.replace('no-js','js');
</script>

<script type="text/javascript">
			(function() {
				var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

request = true;
		
				b[c] = b[c].replace( rcs, ' ' );
				// The customizer requires postMessage and CORS (if the site is cross domain)
				b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
			}());
		</script>
	
	
<div id="wpwrap">

<div class="contextual-help-tabs-wrap">
											</div>
				</div>
			</div>
				</div>
		<style type="text/css">table th {text-align: left;}
</style>
<div id="ai" class="wrap">
  
  <form id="ai_form" name="ai_form" method="post" action="options-general.php?page=advanced-iframe.php">
    <input type="hidden" id="current_tab" name="current_tab" value="1">
    <input type="hidden" id="current_open_sections" name="current_open_sections" value="">
    
    <input type="hidden" id="twg-options" name="twg-options" value="612f77dc5e" /><input type="hidden" name="_wp_http_referer" value="/blog/wp-admin/options-general.php?page=advanced-iframe.php" />
      <div id="icon-options-general" class="icon_ai show-always">
      <br />
      </div>
<h1 class="show-always" class="full-width">Advanced iFrame Pro <small>v7.6</small> <small class="hide-print"><small><small>(Your installation is up to date - <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-history" target="_blank">view history</a>)</small></small></small><div class="header-help">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 <a href="http://www.tinywebgallery.com/blog/advanced-iframe/demo-advanced-iframe-2-0" target="_blank">free</a> and the <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo" target="_blank">pro demos</a> page for running examples.</div><span id="help-header">&nbsp;</span></h1>
<br />
<input type="search" class="ai-input-search" placeholder="Search for settings" />
<div id="ai-input-search-result">
No settings found for this search term.
</div><div id="ai-input-search-result-show">&nbsp;</div>
<div style="clear:left;"></div>
<div id="ai-input-search-help">
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.
</div><h2 class="nav-tab-wrapper show-always"><a id="tab_1" class="nav-tab nav-tab-active" href="#basic"><span>Basic Settings</span></a>
    <a id="tab_2" class="nav-tab advanced-settings-tab" href="#advanced"><span>Advanced Settings</span></a>
    <a id="tab_3" class="nav-tab external-workaround" href="#external-workaround"><span>External workaround</span></a>
    <a id="tab_4" class="nav-tab" href="#add-files"><span>Add/Include files</span></a>
    <a id="tab_5" class="nav-tab help-tab" href="#help"><span>Help / FAQ</span></a>
    <a id="tab_0" class="nav-tab" href="#introduction"><span>Options</span></a>
</h2>

<div style="clear:both;"></div>
<div id="tab_wrapper">
<section id="section-default" class="tab_1"><br>
    <div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div>
    <h2>
Basic settings</h2>
   
    <p class="shortcode hide-print">
      Please use the following shortcode to add an iframe to your page: <br>
            <span> [advanced_iframe]</span>
      <span class="additional-shortcode">or use the "<strong>Add advanced iframe</strong>" button above the editor.</span>
      
        <br/>Specify at least an url and the size. <strong>You can overwrite all of the default administration settings by specifying the attribute in the shortcode to create iframes with different settings!</strong>      
     </p>      
      <p class="hide-print">
      You can also generate a shortcode which does include all settings as shortcode attributes. This shortcode does not use any of the defaults.      <br><br><input id="gen" class="button-primary" type="button" name="generate" value="Generate a shortcode for the current settings" onclick="aiGenerateShortcode(); jQuery('#jquery-gen').show(); return false;"  /></p>
      <div id="jquery-gen" class="hide-print">
      <p  class="hide-print">
      Copy the following shortcode to your page:  
      </p>
      <p id="gen-shortcode"  class="hide-print">
          [advanced_iframe]
      </p>
      
      </div>
      <p class="hide-print">
      Examples if you want to use several iframes with different settings. Also read the <a target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq">FAQ</a>:
      </p>
      <ul class="hide-print">
      <li>[advanced_iframe src="http://www.tinywebgallery.com"] </li>
      <li>[advanced_iframe src="http://www.tinywebgallery.com" width="100%" height="600"]</li>
      <li>[advanced_iframe src="http://www.tinywebgallery.com" id="iframe1" name="iframe1" width="100%" height="600" ]</li>
      <li>[advanced_iframe id="iframe1" name="iframe1" width="100%" height="600"]http://www.tinywebgallery.com[/advanced_iframe]</li>
      </ul>   
    </p>
    <table class="form-table">

<tr>
      <th scope="row" >Security key</th>
      <td><span class="hide-print">
      <input name="securitykey" type="text" id="securitykey" value=""  /><br></span>
      <p class="description">This is the security key which can be used in the shorttag. This is optional since version 7.5.4. If you set this only users who know the security key can insert an advanced iframe. Also they need to have the minimum user role defined in the options to access a page with an advenced iframe. The key was made optional because many user have not the need of a security key and without the configuration is easier. Because of compability reasons security key in a shortcode are ignoered if you don't define a key here! Shortcode attribute: securitykey=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" ><b>Url</b><a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/url-features" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input name="src" type="text" id="src" value="//www.tinywebgallery.com"  /><br></span>
      <div class="hide-print manage-menus nounderline sub-domain-container hide-search ai-input-width"><button style="float:right;" name="checkIframes" class="button-secondary" id="checkIframes" type="submit"><i class="ai-spinner"></i><span class="checkIframes-text">Check all iframes<span></button><strong>Status: </strong>The check of the url above is disabled. Enable the automatic check on the options tag.</div>
      <p class="description">Enter the full URL to your page. e.g. http://www.tinywebgallery.com. <strong>Please do not use a different protocol for the iframe: Do not mix http and https if possible! Http pages are NOT shown in https pages.</strong> Please read <a href="http://www.tinywebgallery.com/blog/iframe-do-not-mix-http-and-https" target="_blank">this post</a> for details. If you cannot save the full url because of mod_security don't specify the protocoll (e.g. //www.tinywebgallery.com) or leave this field empty and define the src in the shortcode. Also use the free url checker below to make sure that you can include the page. You can also add parameters to this url like http://www.tinywebgallery.com/test.php?iframe=true. Then you can check this variable and use it to e.g. hide some elements in the iframe.<br>The pro version also has some placeholders (the standalone version has only host and port available) which are replaced on the fly: <span><strong>{site}</strong>: the url to the wordpress root</span><span><strong>{host}</strong>: the current host from the request</span><span><strong>{port}</strong>: the current port from the request</span><span><strong>{userid [,defaultvalue]}</strong>: the id of the current user. The optional defaultvalue is used if no user is logged in.</span><span><strong>{username [,defaultvalue]}</strong>: the username of the current user. The optional defaultvalue is used if no user is logged in.</span><span><strong>{useremail [,defaultvalue]}</strong>: the e-mail of the current user. The optional defaultvalue is used if no user is logged in.</span><span><strong>{adminmail}</strong>: the e-mail of the wordpress admin</span><span><strong>{userinfo-X [,defaultvalue]}</strong>: extract attribute X from get_currentuserinfo. E.g. {userinfo-display_name}. The optional defaultvalue is used if the attribute is not found or set. See <a href="https://codex.wordpress.org/Function_Reference/wp_get_current_user" target="_blank">here</a> for details. Click <a href="#" id="user-help-link">here</a> for all values of the current user <span id="user-help">ID => 1<br>user_login => admin<br>user_pass => $P$B7sO6PKoToFuRWz8CD0Z55kj6ZX32q/<br>user_nicename => admin<br>user_email => michi@mdempfle.de<br>user_url => http://www.tinywebgallery.com<br>user_registered => 2009-04-15 07:58:38<br>user_activation_key => <br>user_status => 0<br>display_name => TinyWebGallery<br></span></span><span><strong>{usermeta-X [,defaultvalue]}</strong>: extract key X from get_user_meta. E.g. {usermeta-last_name}. The optional defaultvalue is used if the attribute is not found or set. See <a href=" https://codex.wordpress.org/Function_Reference/get_user_meta" target="_blank">here</a> for details. Click <a href="#" id="user-meta-link">here</a> for all values of the current user.<span id="meta-help">nickname => TinyWebGallery<br>rich_editing => true<br>comment_shortcuts => false<br>admin_color => fresh<br>wp_capabilities => a:1:{s:13:"administrator";b:1;}<br>wp_user_level => 10<br>wp_usersettings => m0=o&m1=o&m2=c&m3=c&m4=o&m5=o&m6=c&m7=c&m8=c&mfold=o&m9=o&hidetb=1&editor=tinymce&align=center&imgsize=medium&urlbutton=urlfile&m10=c&uploader=1<br>wp_usersettingstime => 1357632269<br>wp_autosave_draft_ids => a:164:{i:-1239783216;i:3;i:-1239784425;i:5;i:-1239802013;i:10;i:-1240263863;i:18;i:-1240425709;i:21;i:-1240426361;i:22;i:-1240518001;i:25;i:-1241088869;i:33;i:-1241114450;i:36;i:-1241267320;i:37;i:-1241379617;i:40;i:-1241639342;i:43;i:-1241715645;i:46;i:-1242083329;i:49;i:-1242246489;i:58;i:-1242377113;i:60;i:-1242588360;i:62;i:-1243629227;i:66;i:-1243771837;i:69;i:-1244107829;i:73;i:-1244280297;i:76;i:-1244281575;i:79;i:-1244371210;i:91;i:-1244372330;i:114;i:-1244792716;i:119;i:-1244982290;i:127;i:-1245010221;i:129;i:-1245606751;i:134;i:-1245852945;i:136;i:-1246189062;i:159;i:-1246191186;i:161;i:-1246192248;i:169;i:-1246404621;i:179;i:-1246482675;i:186;i:-1248177304;i:193;i:-1249327463;i:199;i:-1249845209;i:202;i:-1250278541;i:204;i:-1250837732;i:206;i:-1251559659;i:208;i:-1251571558;i:210;i:-1251746409;i:212;i:-1251842530;i:215;i:-1252706000;i:217;i:-1252749478;i:222;i:-1253355269;i:224;i:-1253356039;i:230;i:-1253601357;i:233;i:-1253775191;i:235;i:-1253831587;i:239;i:-1253913220;i:242;i:-1253992960;i:246;i:-1254314600;i:248;i:-1254403268;i:250;i:-1255095113;i:252;i:-1255293219;i:254;i:-1255377990;i:256;i:-1255979537;i:261;i:-1256387449;i:263;i:-1256498688;i:265;i:-1256664656;i:273;i:-1256665509;i:276;i:-1257974361;i:279;i:-1259606607;i:281;i:-1260317229;i:284;i:-1260394683;i:286;i:-1261094647;i:296;i:-1261308642;i:298;i:-1261309508;i:306;i:-1262538081;i:309;i:-1263060377;i:314;i:-1263145734;i:316;i:-1263550499;i:319;i:-1263564531;i:321;i:-1264204622;i:326;i:-1264546045;i:328;i:-1265322422;i:330;i:-1265414409;i:335;i:-1265802577;i:337;i:-1265833216;i:340;i:-1266425973;i:346;i:-1268308657;i:348;i:-1268778079;i:352;i:-1269030520;i:354;i:-1270564984;i:356;i:-1270568604;i:360;i:-1271199342;i:366;i:-1271605699;i:369;i:-1272835584;i:372;i:-1272879792;i:374;i:-1272915503;i:376;i:-1272916097;i:381;i:-1273089342;i:387;i:-1277587607;i:390;i:-1278247101;i:392;i:-1278626407;i:395;i:-1278839560;i:397;i:-1279368496;i:401;i:-1280008147;i:406;i:-1280047388;i:408;i:-1281217152;i:411;i:-1281384388;i:415;i:-1282943456;i:417;i:-1284556231;i:419;i:-1285138310;i:421;i:-1285161005;i:423;i:-1285323063;i:426;i:-1285878083;i:430;i:-1286739294;i:433;i:-1290430300;i:436;i:-1290945387;i:441;i:-1292068083;i:446;i:-1295854411;i:455;i:-1298328874;i:464;i:-1299280405;i:469;i:-1300054099;i:471;i:-1301007366;i:476;i:-1301008688;i:478;i:-1301009197;i:481;i:-1301009586;i:483;i:-1301151236;i:486;i:-1301174009;i:490;i:-1301776125;i:493;i:-1301776303;i:495;i:-1301826923;i:497;i:-1301945348;i:499;i:-1302437947;i:511;i:-1302899716;i:515;i:-1307392993;i:517;i:-1308308080;i:520;i:-1309985224;i:523;i:-1310592327;i:525;i:-1311344375;i:529;i:-1311344438;i:532;i:-1311792672;i:537;i:-1312465860;i:539;i:-1312902187;i:549;i:-1313091299;i:558;i:-1316035219;i:584;i:-1319400875;i:588;i:-1319658739;i:590;i:-1322083751;i:597;i:-1327870366;i:608;i:-1328991647;i:610;i:-1328996023;i:613;i:-1331928042;i:619;i:-1334306858;i:629;i:-1338406581;i:633;i:-1338634506;i:635;i:-1341432979;i:639;i:-1344424940;i:642;i:-1345578722;i:646;i:-1346449861;i:648;i:-1349949056;i:652;i:-1350508076;i:670;i:-1351888502;i:672;i:-1351971838;i:675;i:-1357595761;i:677;i:-1358613055;i:684;i:-1360228391;i:690;i:-1360618313;i:694;i:-1360788186;i:696;i:-1362233648;i:700;i:-1362949975;i:703;}<br>closedpostboxes_post => a:1:{i:0;s:0:"";}<br>metaboxhidden_post => a:2:{i:0;s:7:"slugdiv";i:1;s:29:"wp_statistics_editor_meta_box";}<br>closedpostboxes_page => a:1:{i:0;s:12:"revisionsdiv";}<br>metaboxhidden_page => a:1:{i:0;s:29:"wp_statistics_editor_meta_box";}<br>edit_comments_per_page => 100<br>wp_user-settings => editor=tinymce<br>wp_user-settings-time => 1539554481<br>wp_dashboard_quick_press_last_post_id => 3488<br>dismissed_wp_pointers => wp330_toolbar,wp340_customize_current_theme_link,wp350_media,aioseop_welcome,aioseop_donate,aioseop_menu_202,aioseop_welcome_202,aioseop_menu_203,aioseop_welcome_203,aioseop_menu_211,wp360_revisions,wp390_widgets,aioseop_welcome_211,aioseop_menu_220,wp410_dfw,aioseop_welcome_220,theme_editor_notice,plugin_editor_notice,wp496_privacy<br>managenav-menuscolumnshidden => a:4:{i:0;s:11:"link-target";i:1;s:11:"css-classes";i:2;s:3:"xfn";i:3;s:11:"description";}<br>metaboxhidden_nav-menus => a:3:{i:0;s:8:"add-post";i:1;s:12:"add-post_tag";i:2;s:15:"add-post_format";}<br>meta-box-order_page => a:3:{s:4:"side";s:161:"contentonly,yasr_metabox_overall_rating,social_meta_broadcast,submitdiv,pageparentdiv,rawhtml_meta_box,theme-layouts-post-meta-box,postimagediv,ep_admin_meta_box";s:6:"normal";s:110:"postcustom,commentstatusdiv,slugdiv,authordiv,revisionsdiv,postexcerpt,commentsdiv,social_meta_aggregation_log";s:8:"advanced";s:5:"aiosp";}<br>screen_layout_page => 2<br>closedpostboxes_dashboard => a:0:{}<br>metaboxhidden_dashboard => a:13:{i:0;s:21:"dashboard_browser_nag";i:1;s:29:"wp-statistics-browsers-widget";i:2;s:30:"wp-statistics-countries-widget";i:3;s:28:"wp-statistics-hitsmap-widget";i:4;s:25:"wp-statistics-hits-widget";i:5;s:26:"wp-statistics-pages-widget";i:6;s:27:"wp-statistics-recent-widget";i:7;s:30:"wp-statistics-referring-widget";i:8;s:27:"wp-statistics-search-widget";i:9;s:28:"wp-statistics-summary-widget";i:10;s:26:"wp-statistics-words-widget";i:11;s:33:"wp-statistics-top-visitors-widget";i:12;s:37:"wp-statistics-searched-phrases-widget";}<br>social_accounts => <br>first_name => <br>last_name => <br>description => <br>use_ssl => 0<br>show_admin_bar_front => true<br>aim => <br>yim => <br>jabber => <br>googleplus => <br>nav_menu_recently_edited => 135<br>community-events-location => a:1:{s:2:"ip";s:11:"93.104.77.0";}<br>social_suppress_enable_notice => true<br>session_tokens => a:3:{s:64:"65ec9e1272d198ebf3f4cfdc60adee84e1856597c2d164329c2cf05cdbfe84da";a:4:{s:10:"expiration";i:1539072285;s:2:"ip";s:13:"93.104.93.159";s:2:"ua";s:72:"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0";s:5:"login";i:1538899485;}s:64:"5f5aee445bdfde6b7c9e2784ca416d014530ede3e04ef28e1c9c3c541766c05a";a:4:{s:10:"expiration";i:1539202379;s:2:"ip";s:13:"93.104.74.241";s:2:"ua";s:72:"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0";s:5:"login";i:1539029579;}s:64:"40872f14846b88f82cc8cbdffbe1534b6409f7be0ffa67c1fcee4fb1f32e9a03";a:4:{s:10:"expiration";i:1540240956;s:2:"ip";s:13:"93.104.74.241";s:2:"ua";s:72:"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0";s:5:"login";i:1539031356;}}<br>wp_statistics => a:2:{s:13:"dashboard_set";s:6:"12.3.1";s:10:"editor_set";s:6:"12.3.1";}<br>show_welcome_panel => 0<br>show_try_gutenberg_panel => 0<br></span></span><span><strong>{href}</strong>: The full url that is shown in the address bar</span><span><strong>{urlpathX}</strong>: the Xth path element from the front. The first path element would be {urlpath1}<</span><span><strong>{urlpath-X}</strong>: the Xth path element from behind. The last path element would be {urlpath-1}</span><span><strong>{query-X [,defaultvalue]}</strong>: the value of the query parameter sent by GET or POST. ?example=myvalue would be {query-example} -> myvalue. The optional defaultvalue is used if the parameter is not found.</span><span><strong>{timestamp}</strong>: a timestamp which can be used to avoid caching of iframes</span><span><strong>{session_id}</strong>: the current session id if one is available. Othwise a empty string.</span><br>Make sure that <strong>no spaces are in the placeholders</strong>.<br/>All placeholders except {site}, {host}, {port} are urlencoded! An example would be src="http://demo.{host}/url?id={userid}". Especially for multidomain installations this is maybe helpful. If no user is logged in the values are empty or 0 for the id.<br>urlpath does extract path elements from the url in the address bar. So {urlpath-1} for the url www.xx.com/a/bb/cc would be cc. All placeholders that cannot be resolved are removed.<br><strong>Also shortcodes are supported.</strong> You have to replace the bracket [ with {{ and ] with }}. So if the shortcode is [link] you have to use {{link}} because shortcode attributes which include shortcodes are not supported directly by Wordpress. Also be aware of single and double quotations: src="http://demo.{{url domain='home'}}/url". So only use ' for attributes of the nested shortcode.<br><strong>BBCode:</strong> If you have special characters e.g. [] in the url you need to use the bbcode style for the url: [advanced_iframe]url[/advanced_iframe].<br><strong>PDF support: </strong>If you include a pdf google doc is used to render the pdf. This solution looks the same on all browsers. If you want to use the native pdf renderer of the browser/your system add NATIVE: before the url. Like NATIVE:http://www.example.com/pdf.pdf.<br>Shortcode attribute: src=""</p></td>
      </tr>
            <tr>
        <th scope="row"><strong>Free url checker</strong>
        </th>      <td>
          <strong>Not all pages</strong> can be included in an iframe because they have a header flag this does not allow this. The free iframe checker is already included now in the administration. The <a target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker/">Free iframe checker</a> page has a 2nd step where you also can see if iframe killer scripts are running!</td>
      </tr>

<tr>
      <th scope="row" >Width</th>
      <td><span class="hide-print">
      <input name="width" type="text" id="width" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="100%"  /><br></span>
      <p class="description">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. Also vw is now supported. vw is viewport width. This is more important for the height with vh! See <a target="_blank" href="http://caniuse.com/#feat=calc">http://caniuse.com/#feat=calc</a> for supported browsers! Shortcode attribute: width=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Height</th>
      <td><span class="hide-print">
      <input name="height" type="text" id="height" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="600"  /><br></span>
      <p class="description">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. Also vh is now supported! e.g. 100vh means 100% of the viewport height. This is the "fullscreen" many users look after. This is now supported by all major browsers. See <a href="https://caniuse.com/#feat=viewport-units" target="blank">here</a>. 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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Scrolling</th>
      <td><span class="hide-print">
      <input type="radio" id="scrolling1" name="scrolling" value="auto"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="scrolling2" name="scrolling" value="no" /> No&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="scrolling3" name="scrolling" value="none" checked="checked"/> Not rendered<br></span>
    <p class="description">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"</p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Enable scrolling on ipad and iphone <a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/scrolling-on-ipad-and-iphone" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="enable_ios_mobile_scolling1" name="enable_ios_mobile_scolling" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="enable_ios_mobile_scolling2" name="enable_ios_mobile_scolling" value="false" checked="checked"/> No<br>
    </span><p class="description">Currently mobile ios devices like ipad and iphone do not support scrolling inside an iframe properly. This changes from version to version. By enabling this parameter an additional div with additional ios css styles is wrapped around the iframe which does the scrolling. This feature is currently supported for simple iframes, show iframe as layer and show only a part of an iframe when scrolling is enabled. Please test this feature with all the ios devices you want to support! This feature does use the internal browser detection. So the additional div is only rendered for mobile ios devices! Zoom is currenly only supported in the "show only a part of the iframe" mode! For all features where auto height is enabled the additional div is also not rendered as there no scrolling does exist. Currently the default is set to false. As soon as many users also report that this is working on many devices the default will be set to true. So please report if this features does/doesn't work for you! Shortcode attribute: enable_ios_mobile_scolling="true" or enable_ios_mobile_scolling="false" </p></td>
    </tr>
    
      <tr>
      <th scope="row" >Margin width</th>
      <td><span class="hide-print">
      <input name="marginwidth" type="text" id="marginwidth" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="0"  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Margin height</th>
      <td><span class="hide-print">
      <input name="marginheight" type="text" id="marginheight" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="0"  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Frame border</th>
      <td><span class="hide-print">
      <input name="frameborder" type="text" id="frameborder" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="0"  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Transparency</th>
      <td><span class="hide-print">
      <input type="radio" id="transparency1" name="transparency" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="transparency2" name="transparency" value="false" /> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" >Class</th>
      <td><span class="hide-print">
      <input name="class" type="text" id="class" value=""  /><br></span>
      <p class="description">You can define a class for the iframe if you like. Shortcode attribute: class=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Style</th>
      <td><span class="hide-print">
      <input name="style" type="text" id="style" value=""  /><br></span>
      <p class="description">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=""<br><input type="button" onclick="aiPresetFullscreen(); return false;" value="Set settings for fullscreen iframe" name="presetFullscreen" class="button-primary" id="presetFullscreen" /></p></td>
      </tr>
      
      <tr>
      <th scope="row" >Id</th>
      <td><span class="hide-print">
      <input name="id" type="text" id="id" value="advanced_iframe"  /><br></span>
      <p class="description">Enter the 'id' attribute of the iframe. Allowed values are only a-zA-Z0-9_. Ids cannot start with a number!!! 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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Name</th>
      <td><span class="hide-print">
      <input name="name" type="text" id="name" value=""  /><br></span>
      <p class="description">Enter the 'name' attribute of the iframe. Shortcode attribute: name=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Allow full screen</th>
      <td><span class="hide-print">
      <input type="radio" id="allowfullscreen1" name="allowfullscreen" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="allowfullscreen2" name="allowfullscreen" value="false" checked="checked"/> No<br>
    </span><p class="description">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"</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Sandbox</th>
      <td><span class="hide-print">
      <input name="sandbox" type="text" id="sandbox" value=""  /><br></span>
      <p class="description">Enter the 'sandbox' attribute of the iframe. See <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="_blank">w3c</a> or <a href="http://www.w3schools.com/tags/att_iframe_sandbox.asp" target="_blank">w3schools</a> for details. To render sandbox without a value for all restrictions please enter "sandbox". Shortcode attribute: sandbox=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Title</th>
      <td><span class="hide-print">
      <input name="title" type="text" id="title" value=""  /><br></span>
      <p class="description">The html title attribute of an iframe. Shortcode attribute: title=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Allow</th>
      <td><span class="hide-print">
      <input name="allow" type="text" id="allow" value=""  /><br></span>
      <p class="description">Since April 2018 the <a target="_blank" href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes">autoplay functionality of Chrome</a> has changed. To still be able to play videos with sound in an iframe you need to set allow="autoplay" to the iframe. Please read the linked article for details. Shortcode attribute: allow=""</p></td>
      </tr>
          </table>
    
</div>
</section><section id="section-advanced" class="tab_2"><p>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.</p><div id="accordion">
<div id="spacer-div"></div>
<h1 id="h1-as">Advanced features</h1> 
<div>
  <div id="icon-options-general" class="icon_ai">
      <br>
    </div>
     <h2>
Advanced features</h2>  
   <p>
   <p>The following options are already features which are not html standard anymore. All the options do already require additional Javascript, css or dynamic processing.</p>  </p>
 
<div class="manage-menus nounderline hide-always">
<div class="small-menu">
<strong>Quicklinks:</strong>
</div> 
 
<div class="small-menu">
  <a href="#rt">Auto height/width</a><br />
  <a href="#so">Show only a part of the iframe</a><br />
  <a href="#hi">Hide/cover parts of the iframe</a> 
</div>
<div class="small-menu">
  <a href="#mi">Modify the iframe</a><br />
  <a href="#mp">Modify the parent page</a><br />
  <a href="#ol">Open iframe in layer</a>
</div>

<div class="small-menu">
 <a href="#zo">Zoom</a><br />
  <a href="#la">Lazy load</a><br />
  <a href="#pa">Url parameter handling</a>
</div>
<div style="clear:left;"></div>
</div>
       
    
    <table class="form-table">
    
      <tr>
      <th scope="row" >Scrolls the parent window/iframe to the top</th>
      <td><span class="hide-print">
      <input type="radio" id="onload_scroll_top1" name="onload_scroll_top" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="onload_scroll_top2" name="onload_scroll_top" value="iframe" /> Iframe&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="onload_scroll_top3" name="onload_scroll_top" value="false" checked="checked"/> False<br></span>
    <p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" >Hide the iframe until it is loaded</th>
      <td><span class="hide-print">
      <input type="radio" id="hide_page_until_loaded1" name="hide_page_until_loaded" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="hide_page_until_loaded2" name="hide_page_until_loaded" value="false" checked="checked"/> No<br>
    </span><p class="description">This setting hides the iframe until it is loaded. This prevents the iframe white flash issue while loading and also if you modify the iframe only the final result is visible. Since 7.5.6. this also works for following pages in the iframe as the iframe is hidden again when the url changes. 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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" >Show loading icon<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/zoom-iframe-content" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="show_iframe_loader1" name="show_iframe_loader" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_iframe_loader2" name="show_iframe_loader" value="false" checked="checked"/> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" >Hide the content until iframe is loaded</th>
      <td><span class="hide-print">
      <input name="hide_content_until_iframe_color" type="text" id="hide_content_until_iframe_color" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Enable responsive iframe<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/responsive-iframes" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="enable_responsive_iframe1" name="enable_responsive_iframe" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="enable_responsive_iframe2" name="enable_responsive_iframe" value="false" checked="checked"/> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" >Set Iframe height by ratio<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/responsive-videos" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input name="iframe_height_ratio" type="text" id="iframe_height_ratio" style="width:150px;"  onblur="aiCheckInputNumber(this)" value=""  /><br></span>
      <p class="description">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="" </p></td>
      </tr>
      
      <tr>
      <th scope="row" >Reload interval</th>
      <td><span class="hide-print">
      <input name="reload_interval" type="text" id="reload_interval" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Safari cookie fix</th>
      <td><span class="hide-print">
      <input name="safari_fix_url" type="text" id="safari_fix_url" value=""  /><br></span>
      <p class="description">If you need cookies in the page in the iframe to work properly you have a problem with Safari because Safari blocks 3rd party cookies by default! Therefore such pages will not work in iframes in Safari and browsers that are configured the same way. Please read about the problem and the basic solution here: <a href="http://vitr.github.io/safari-cookie-in-iframe/" target="_blank">http://vitr.github.io/safari-cookie-in-iframe/</a>. the solution in this plugin has even more features like full browser and message support. Please go <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/3rd-party-cookie-in-iframe-workaround" target="_blank">my example pages</a> for the different options and how you can configure this. Shortcode attribute: safari_fix_url=""</p></td>
      </tr>
       
     
     <tr >
        
        <th scope="row"><strong>Browser detection</strong>
        </th><td>
          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 <a id="browser-detection-link" href="#">browser detection</a> section for details. Shortcode: browser=""</td>
    </tr> 
       
    </table>
     
</div>
<h1 id="h1-rt">Resize the iframe to the content height/width</h1>
<div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div>
    <h2>Resize the iframe to the content height/width</h2>
    <h3>Options if the iframe is on the same domain</h3>
   <div class="manage-menus nounderline hide-always">

PLEASE READ THIS FIRST:    <p>Only if the content from the iframe comes from the <strong>same domain</strong> 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. <br /> If this is the case you can use the settings below. If you want to include an iframe from a <strong>different domain</strong> please go to the "<a id="external-workaround-link" href="#xss">External workaround</a>" 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!    </p>
    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!     </div>
 
    
    <table class="form-table">

<tr>
      <th scope="row" >Resize iframe to content height</th>
      <td><span class="hide-print">
      <input type="radio" id="onload_resize1" name="onload_resize" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="onload_resize2" name="onload_resize" value="false" checked="checked"/> No<br>
    </span><p class="description">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 the iframe does not get resized. Please set the default height of the iframe to the minimum pixels the iframe should have! In the shortcode you can also specify resize_min_height="". By default this is set to 1. The content is resized to this given minimum. Sometimes this does not work properly. Try bigger values then. If this still does not wok please look at some of the pro features like "Auto zoom iframe with a fix ratio" or "Responsive videos". This setting generates the code onload="aiResizeIframe(this);" to the iframe. Shortcode attribute: onload_resize="true" or onload_resize="false" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Resize delay</th>
      <td><span class="hide-print">
      <input name="onload_resize_delay" type="text" id="onload_resize_delay" style="width:150px;"  onblur="aiCheckInputNumber(this)" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Store height in cookie</th>
      <td><span class="hide-print">
      <input onclick="aiDisableHeight();" type="radio" id="store_height_in_cookie1" name="store_height_in_cookie" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input onclick="aiEnableHeight();"  type="radio" id="store_height_in_cookie2" name="store_height_in_cookie" value="false" checked="checked"/> No<br></span>
    <p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Additional height</th>
      <td><span class="hide-print">
      <input  name="additional_height" type="text" style="width:150px;" id="additional_height" onblur="aiCheckInputNumberOnly(this)" value="0"  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Resize iframe to content width</th>
      <td><span class="hide-print">
      <input type="radio" id="onload_resize_width1" name="onload_resize_width" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="onload_resize_width2" name="onload_resize_width" value="false" checked="checked"/> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Resize on click events</th>
      <td><span class="hide-print">
      <input name="resize_on_click" type="text" id="resize_on_click" style="width:150px;"  onblur="aiCheckInputNumber(this)" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-40-" >Elements where the clicks are intercepted</th>
      <td><span class="hide-print">
      <input name="resize_on_click_elements" type="text" id="resize_on_click_elements" value="a"  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Resize on AJAX events</th>
      <td><span class="hide-print">
      <input name="resize_on_ajax" type="text" id="resize_on_ajax" style="width:150px;"  onblur="aiCheckInputNumber(this)" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-40-" >AJAX events are jQuery</th>
      <td><span class="hide-print">
      <input type="radio" id="resize_on_ajax_jquery1" name="resize_on_ajax_jquery" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="resize_on_ajax_jquery2" name="resize_on_ajax_jquery" value="false" /> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Resize on element resize<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="resize_on_element_resize" type="text" id="resize_on_element_resize" value=""  /><br></span>
      <p class="description">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. 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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-40-" >Poll interval for the resize detection<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="resize_on_element_resize_delay" type="text" id="resize_on_element_resize_delay" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="250"  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Onload</th>
      <td><span class="hide-print">
      <input name="onload" type="text" id="onload" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
          </table>
     
     <h3>Resize hidden iframes on tabs</h3>
     <p>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 class="howto-id-link" href="#">How to find the id and the attributes</a>" 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.    </p>
    <p>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 "<a id="external-workaround-link" href="#xss">External workaround</a>".    </p>
    <p>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.    </p>
    <p>Please note: This feature is not supported for responsive iframes because the size of the hidden tabs are not calculated at each resize.    </p>
    <table class="form-table">

<tr>
      <th scope="row" >Hidden tab(s) with iframe</th>
      <td><span class="hide-print">
      <input name="tab_hidden" type="text" id="tab_hidden" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Visible tab</th>
      <td><span class="hide-print">
      <input name="tab_visible" type="text" id="tab_visible" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
            </table> 
 
</div><h1 id="h1-so">Show only a part of the iframe</h1>
<div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div><h2>
      Show only a part of the iframe</h2>
    <p>

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! I recommend to make the iframe itself that big that no scrollbars do exist anymore. Otherwise scrolling e.g. with the mouse wheel on some browsers is possible. 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 <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 additional 5 options. These are the advanced features to handle changes in the iframe.<p>Also media queries are supported! This enables you to show different areas depending on the browser width. Please see <a  target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe#e55">example 55</a> for a working demo.</p><p><input id="s" class="button-primary" type="button" name="update_iframe-loader" onclick="openSelectorWindow('http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/includes/advanced-iframe-area-selector.html');" value="Open the area selector" /><a href="#" id="ai-selector-help-link">Show me an image how the settings are used.</a></p><div id="ai-selector-help"><img src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/img/help-area-selector.gif"></div><table class="form-table">
      <tr>
      <th scope="row" >Show only part of the iframe<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="show_part_of_iframe1" name="show_part_of_iframe" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_part_of_iframe2" name="show_part_of_iframe" value="false" checked="checked"/> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Upper left corner x</th>
      <td><span class="hide-print">
      <input name="show_part_of_iframe_x" type="text" id="show_part_of_iframe_x" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="100"  /><br></span>
      <p class="description">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="". <a href="#" class="ai-selector-help-link-move">Show me an image how this settings is used.</a></p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Upper left corner y (top distance)</th>
      <td><span class="hide-print">
      <input name="show_part_of_iframe_y" type="text" id="show_part_of_iframe_y" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="100"  /><br></span>
      <p class="description">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="". <a href="#" class="ai-selector-help-link-move">Show me an image how this settings is used.</a></p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Width of the visible content</th>
      <td><span class="hide-print">
      <input name="show_part_of_iframe_width" type="text" id="show_part_of_iframe_width" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="400"  /><br></span>
      <p class="description">Specifies the width of the content in pixel that should be shown. Shortcode attribute: show_part_of_iframe_width="". <a href="#" class="ai-selector-help-link-move">Show me an image how this settings is used.</a></p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Height of the visible content</th>
      <td><span class="hide-print">
      <input name="show_part_of_iframe_height" type="text" id="show_part_of_iframe_height" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="300"  /><br></span>
      <p class="description">Specifies the height of the content in pixel that should be shown. Shortcode attribute: show_part_of_iframe_height="". <a href="#" class="ai-selector-help-link-move">Show me an image how this settings is used.</a></p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Enable horizontal scrollbar</th>
      <td><span class="hide-print">
      <input type="radio" id="show_part_of_iframe_allow_scrollbar_horizontal1" name="show_part_of_iframe_allow_scrollbar_horizontal" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_part_of_iframe_allow_scrollbar_horizontal2" name="show_part_of_iframe_allow_scrollbar_horizontal" value="false" checked="checked"/> No<br>
    </span><p class="description">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". <a href="#" class="ai-selector-help-link-move">Show me an image how this settings is used.</a></p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Enable vertical scrollbar</th>
      <td><span class="hide-print">
      <input type="radio" id="show_part_of_iframe_allow_scrollbar_vertical1" name="show_part_of_iframe_allow_scrollbar_vertical" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_part_of_iframe_allow_scrollbar_vertical2" name="show_part_of_iframe_allow_scrollbar_vertical" value="false" checked="checked"/> No<br>
    </span><p class="description">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". <a href="#" class="ai-selector-help-link-move">Show me an image how this settings is used.</a></p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Viewport style</th>
      <td><span class="hide-print">
      <input name="show_part_of_iframe_style" type="text" id="show_part_of_iframe_style" value=""  /><br></span>
      <p class="description">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 add css here directly. e.g. 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! If you also using zoom or features like "Hide a part of the iframe" or the iframe loader AND you want to center the iframe you need the "old" &lt;center&gt;[advanced-iframe ....]&lt;/center&gt; If you want to apply styles to other elements that are added dynamically please use the options on "Modify the parent page". Shortcode attribute:  show_part_of_iframe_style=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Enable auto zoom<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe/show-only-a-part-of-an-iframe-zoom" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="show_part_of_iframe_zoom1" name="show_part_of_iframe_zoom" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_part_of_iframe_zoom2" name="show_part_of_iframe_zoom" value="false" checked="checked"/> No&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_part_of_iframe_zoom3" name="show_part_of_iframe_zoom" value="full" /> Full<br></span>
    <p class="description">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"</p></td>
    </tr>
    </table><p>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.</p><table class="form-table">
      <tr>
      <th scope="row" class="i-20-" >Change the viewport when iframe changes to the next step</th>
      <td><span class="hide-print">
      <input name="show_part_of_iframe_next_viewports" type="text" id="show_part_of_iframe_next_viewports" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Restart the viewports from the beginning after the last step.</th>
      <td><span class="hide-print">
      <input type="radio" id="show_part_of_iframe_next_viewports_loop1" name="show_part_of_iframe_next_viewports_loop" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_part_of_iframe_next_viewports_loop2" name="show_part_of_iframe_next_viewports_loop" value="false" checked="checked"/> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Open iFrame in new window after the last step</th>
      <td><span class="hide-print">
      <input name="show_part_of_iframe_new_window" type="text" id="show_part_of_iframe_new_window" value=""  /><br></span>
      <p class="description">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" </p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Url that is opened after the last step</th>
      <td><span class="hide-print">
      <input name="show_part_of_iframe_new_url" type="text" id="show_part_of_iframe_new_url" value=""  /><br></span>
      <p class="description">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="" </p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Hide the iframe after the last step</th>
      <td><span class="hide-print">
      <input type="radio" id="show_part_of_iframe_next_viewports_hide1" name="show_part_of_iframe_next_viewports_hide" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_part_of_iframe_next_viewports_hide2" name="show_part_of_iframe_next_viewports_hide" value="false" checked="checked"/> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    </table>

</div>

<h1 id="h1-hi">Hide/cover parts of the iframe.</h1>
<div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div><h2 id="mi-hi">
      Hide/cover parts of the iframe.</h2>
    
    <p>
       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.    </p>
    <p><input id="s" class="button-primary" type="button" name="update_iframe-loader" onclick="openSelectorWindow('http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/includes/advanced-iframe-area-selector.html?hide_feature=true');" value="Open the area selector in the hide parts mode" /></p>    
    <table class="form-table">

<tr>
      <th scope="row" >Hide/cover parts of the iframe. Make an iframe read only<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/hide-a-part-of-the-iframe" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="hide_part_of_iframe" type="text" id="hide_part_of_iframe" value=""  /><br></span>
      <p class="description">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 target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/hide-a-part-of-the-iframe#e8">pro demo</a> for a cool example where a logo is exchanged.<p class="description">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.</p><p class="description">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,http://www.tinywebgallery.com,_blank".</p><p class="description">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.</p><p class="description">Also media queries are supported! This enables you to hides areas depending on the browser width. Please see <a  target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/hide-a-part-of-the-iframe#e50">example 50</a> for a working demo.</p><p class="description">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.</p><p class="description">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.</p><p class="description">Shortcode attribute: hide_part_of_iframe=""</p></p></td>
      </tr>
          </table>

<div class="hide-print">    <h4>
      Existing external div files</h4>    
    <p>
      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)      
    </p>
    <p>
      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.      
    </p>
<hr height=1><div class="config-file-block"><div class="ai-external-config-label"><span class="config-list">hide_123.html</span> &nbsp; <a href="http://www.tinywebgallery.com/blog/wp-admin/plugin-editor.php?file=advanced-iframe-custom%2Fhide_123.html">Edit/View</a> &nbsp; <a class="confirmation post" href="options-general.php?page=advanced-iframe.php&remove-custom-hide-id=123">Remove</a></div><br /></div><hr height=1>       
    <p>
      Create a custom external div file. Only specify the id. All files are named "hide_{id}.html":<br />
      <input name="ai_custom_hide_id" id="ai_custom_hide_id" type="text" size="20" maxlength="20" />        
      <input id="chf" class="button-primary" type="submit" name="create-custom-hide-id" value="Create external div file"/>    
    </p>    
  </div>

</div>

<h1 id="h1-mi">Modify the iframe</h1>
<div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div><h2 id="mi-id">
      Modify the iframe</h2>
    
    
    <h3 id="modifycontent">Modify the content of the iframe if the iframe page is on the same domain or if you can use the external workaround.
    </h3>
    <p>
      With the following options you can modify the content of the iframe. <strong>IMPORTANT</strong>: This is only possible if the iframe comes from the <strong>same domain</strong> because of the <a href="http://en.wikipedia.org/wiki/Same_origin_policy" target="_blank">same origin policy</a> of Javascript.<p>If you can use the "<a id="external-workaround-link" href="#xss">External workaround</a>", you can also use this setting in the pro version.</p><p>Please read the section "<a class="howto-id-link" href="#">How to find the id and the attributes</a>" 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.    </p>
    <table class="form-table">

<tr>
      <th scope="row" >Add css class to iframe elements<span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="add_css_class_iframe1" name="add_css_class_iframe" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="add_css_class_iframe2" name="add_css_class_iframe" value="false" checked="checked"/> No<br>
    </span><p class="description">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 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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" >Hide elements in iframe<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="iframe_hide_elements" type="text" id="iframe_hide_elements" value=""  /><br></span>
      <p class="description">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 &lt;h2&gt; 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 <a class="jquery-help-link" href="#">jQuery selector pattern</a> 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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Show only one element<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications#e7" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="onload_show_element_only" type="text" id="onload_show_element_only" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      </table><p>With the next 2 options you can modify the css of your iframe if <strong>it is on the same domain</strong> 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.</p><table class="form-table">
      <tr>
      <th scope="row" >Content id in iframe<a target="new" href="www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="iframe_content_id" type="text" id="iframe_content_id" value=""  /><br></span>
      <p class="description">Set the id of the element starting with a hash (#) that defines element you want to modify the css.  You can use any valid <a class="jquery-help-link" href="#">jQuery selector pattern</a> 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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Content styles in iframe<a target="new" href="www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="iframe_content_styles" type="text" id="iframe_content_styles" value=""  /><br></span>
      <p class="description">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 different style sets with |. The default values are: Wordpress default: 'width:450px;padding-left:45px;'. Twenty Ten: 'margin-left: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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Add css styles to iframe</th>
      <td><span class="hide-print">
      <input name="iframe_content_css" type="text" id="iframe_content_css" value=""  /><br></span>
      <p class="description">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 <strong>same domain</strong>. 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 &lt;style&gt;. The value is sanitized at the output! Therefore not all styles do work! e.g. body &gt; p cannot be used. Use external files if you need this. Shortcode attribute: iframe_content_css=""</p></td>
      </tr>
          </table>
<p>With the next 2 options you can modify the target of links in your iframe if <strong>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. </strong>.</p></p><table class="form-table">
      <tr>
      <th scope="row" >Change iframe links/forms target<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/change-links-targets" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="change_iframe_links" type="text" id="change_iframe_links" value=""  /><br></span>
      <p class="description">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 <a class="jquery-help-link" href="#">jQuery selector pattern</a> 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". The <a class="jquery-help-link" href="#">jQuery selector pattern</a> help also shows how to identify all external links! Because brackets [ ... ] are replaced in the short code by Wordpress it has to be replaced with {{ ... }}. 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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Change iframe links/forms target value<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/change-links-targets" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="change_iframe_links_target" type="text" id="change_iframe_links_target" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      </table> 
</div><h1 id="h1-mp">
  Modify the parent page</h1>
<div>    
  <div id="icon-options-general" class="icon_ai">      
    <br>    
  </div>     <h2>
    Modify the parent page</h2>    
  <p>      
    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!    
  </p>    
  <table class="form-table">

<tr>
      <th scope="row" >Hide elements</th>
      <td><span class="hide-print">
      <input name="hide_elements" type="text" id="hide_elements" value=""  /><br></span>
      <p class="description">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 &lt;h2&gt; 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 <a class="jquery-help-link" href="#">jQuery selector pattern</a> here! Shortcode attribute: hide_elements=""</p></td>
      </tr>
      </table><p>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.</p><table class="form-table">
      <tr>
      <th scope="row" >Content id</th>
      <td><span class="hide-print">
      <input name="content_id" type="text" id="content_id" value=""  /><br></span>
      <p class="description">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 <a class="jquery-help-link" href="#">jQuery selector pattern</a> 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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Content styles</th>
      <td><span class="hide-print">
      <input name="content_styles" type="text" id="content_styles" value=""  /><br></span>
      <p class="description">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: 'margin-left:20px;margin-right:240px'. iNove: 'width:605px'. 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: content_styles=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Add css styles to parent</th>
      <td><span class="hide-print">
      <input name="parent_content_css" type="text" id="parent_content_css" value=""  /><br></span>
      <p class="description">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 &lt;style&gt;. The value is sanitized at the output! Therefore not all styles do work! e.g. body &gt; p cannot be used. Use external files if you need this. Shortcode attribute: parent_content_css=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Add css class to parent elements</th>
      <td><span class="hide-print">
      <input type="radio" id="add_css_class_parent1" name="add_css_class_parent" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="add_css_class_parent2" name="add_css_class_parent" value="false" checked="checked"/> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    </table>     
</div>

<h1 id="h1-ol">
  Open iframe in layer</h1>
<div>    
  <div id="icon-options-general" class="icon_ai">      
    <br>    
  </div>     <h2>
    Open iframe in layer</h2>    
  <p>      
    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.    
  </p>    
  <table class="form-table">

<tr>
      <th scope="row" >Change parent links target</th>
      <td><span class="hide-print">
      <input name="change_parent_links_target" type="text" id="change_parent_links_target" value=""  /><br></span>
      <p class="description">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 <a class="jquery-help-link" href="#">jQuery selector pattern</a> 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". You can also define more than one element. Please separate them with ,. Because brackets [ ... ] are replaced in the short code by Wordpress it has to be replaced with {{ ... }}.. Shortcode attribute: change_parent_links_target=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Show iframe as layer<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-the-iframe-as-layer#e34" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="show_iframe_as_layer1" name="show_iframe_as_layer" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_iframe_as_layer2" name="show_iframe_as_layer" value="external" /> External&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_iframe_as_layer3" name="show_iframe_as_layer" value="false" checked="checked"/> No<br></span>
    <p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-40-" >Show layer 100% or original</th>
      <td><span class="hide-print">
      <input type="radio" id="show_iframe_as_layer_full1" name="show_iframe_as_layer_full" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_iframe_as_layer_full2" name="show_iframe_as_layer_full" value="false" checked="checked"/> No&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_iframe_as_layer_full3" name="show_iframe_as_layer_full" value="original" /> Original<br></span>
    <p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-40-" >Layer file id<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-the-iframe-as-layer#e37" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input name="show_iframe_as_layer_header_file" type="text" id="show_iframe_as_layer_header_file" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-40-" >Layer header/footer height</th>
      <td><span class="hide-print">
      <input name="show_iframe_as_layer_header_height" type="text" id="show_iframe_as_layer_header_height" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="100"  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-40-" >Layer header postion<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-the-iframe-as-layer#e38" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="show_iframe_as_layer_header_position1" name="show_iframe_as_layer_header_position" value="top" checked="checked" /> Top&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_iframe_as_layer_header_position2" name="show_iframe_as_layer_header_position" value="bottom" /> Bottom<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-40-" >Keep the content after closing</th>
      <td><span class="hide-print">
      <input type="radio" id="show_iframe_as_layer_keep_content1" name="show_iframe_as_layer_keep_content" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_iframe_as_layer_keep_content2" name="show_iframe_as_layer_keep_content" value="false" /> No<br>
    </span><p class="description">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" </p></td>
    </tr>
         
  </table>
       
  <div class="hide-print">    <h4>
      Existing additional layer files</h4>    
    <p>
      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.      
    </p>
<hr height=1><div class="config-file-block"><div class="ai-external-config-label"><span class="config-list">layer_footer.html</span> &nbsp; <a href="http://www.tinywebgallery.com/blog/wp-admin/plugin-editor.php?file=advanced-iframe-custom%2Flayer_footer.html">Edit/View</a> &nbsp; <a class="confirmation post" href="options-general.php?page=advanced-iframe.php&remove-custom-header-id=footer">Remove</a></div><br /></div><div class="config-file-block"><div class="ai-external-config-label"><span class="config-list">layer_xxx.html</span> &nbsp; <a href="http://www.tinywebgallery.com/blog/wp-admin/plugin-editor.php?file=advanced-iframe-custom%2Flayer_xxx.html">Edit/View</a> &nbsp; <a class="confirmation post" href="options-general.php?page=advanced-iframe.php&remove-custom-header-id=xxx">Remove</a></div><br /></div><hr height=1>       
    <p>
      Create a custom layer file. Only specify the id. All files are named "layer_{id}.html":<br />
      <input name="ai_custom_header_id" id="ai_custom_header_id" type="text" size="20" maxlength="20" />        
      <input id="chf" class="button-primary" type="submit" name="create-custom-header-id" value="Create custom layer file"/>    
    </p>    
  </div>
         
       
</div>
 <h1 id="h1-zo">Zoom</h1>
<div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div><h2>
      Zoom</h2>
    <p>
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"<table class="form-table">
      <tr>
      <th scope="row" >Zoom iframe<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/zoom-iframe-content" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input name="iframe_zoom" type="text" id="iframe_zoom" style="width:150px;"  onblur="aiCheckInputNumber(this)" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Support zoom on IE8</th>
      <td><span class="hide-print">
      <input type="radio" id="iframe_zoom_ie81" name="iframe_zoom_ie8" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="iframe_zoom_ie82" name="iframe_zoom_ie8" value="false" checked="checked"/> No<br>
    </span><p class="description">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 server 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"</p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Zoom absolute fix</th>
      <td><span class="hide-print">
      <input type="radio" id="use_zoom_absolute_fix1" name="use_zoom_absolute_fix" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="use_zoom_absolute_fix2" name="use_zoom_absolute_fix" value="false" checked="checked"/> No<br>
    </span><p class="description">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"</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Auto zoom iframe<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-zoom-iframe-content" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="auto_zoom1" name="auto_zoom" value="same"  /> Same domain&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="auto_zoom2" name="auto_zoom" value="remote" /> Remote domain&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="auto_zoom3" name="auto_zoom" value="false" checked="checked"/> No<br></span>
    <p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Auto zoom by ratio<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-zoom-iframe-content#e35" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input name="auto_zoom_by_ratio" type="text" id="auto_zoom_by_ratio" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      </table></div>

<h1 id="h1-la">Lazy load</h1>
<div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div><h2>
      Lazy load</h2>
    <p>
<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><table class="form-table">
      <tr>
      <th scope="row" >Enable lazy load<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/lazy-loading" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="enable_lazy_load1" name="enable_lazy_load" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="enable_lazy_load2" name="enable_lazy_load" value="false" checked="checked"/> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Lazy load threshold</th>
      <td><span class="hide-print">
      <input name="enable_lazy_load_threshold" type="text" id="enable_lazy_load_threshold" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="3000"  /><br></span>
      <p class="description">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="" </p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Lazy load fadein time</th>
      <td><span class="hide-print">
      <input name="enable_lazy_load_fadetime" type="text" id="enable_lazy_load_fadetime" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="0"  /><br></span>
      <p class="description">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="" </p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Reserve iframe space<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/lazy-loading" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="enable_lazy_load_reserve_space1" name="enable_lazy_load_reserve_space" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="enable_lazy_load_reserve_space2" name="enable_lazy_load_reserve_space" value="false" /> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >How trigger lazy loading</th>
      <td><span class="hide-print">
      <input type="radio" id="enable_lazy_load_manual1" name="enable_lazy_load_manual" value="false" checked="checked" /> Default (Scroll)&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="enable_lazy_load_manual2" name="enable_lazy_load_manual" value="auto" /> Auto&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="enable_lazy_load_manual3" name="enable_lazy_load_manual" value="true" /> Manually<br></span>
    <p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Element that triggers the lazy load</th>
      <td><span class="hide-print">
      <input name="enable_lazy_load_manual_element" type="text" id="enable_lazy_load_manual_element" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      </table></div>
<h1 id="h1-pa">Url parameter handling</h1>
<div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div><h2>
      Url parameter handling</h2>
    <p>
Advanced iframe is able to forward parameter from the parent to the iframe url. In the pro version you are also able to map parameters and add the iframe url as parameter to the parent url. Also check the documentation at "Url". For pro users are many additional options to add wordpress or url data to the iframe url.<table class="form-table">
      <tr>
      <th scope="row" >URL forward parameters</th>
      <td><span class="hide-print">
      <input name="url_forward_parameter" type="text" id="url_forward_parameter" value=""  /><br></span>
      <p class="description">Define the parameters that should be passed from the browser url to the iframe url. Please separate the parameters by ','. Using "ALL" does forward every parameter.<br />GET and POST parameters are supported!<br />Pro users can also map incoming parameters to a different parameter. Wordpress has a couple of <a href="http://codex.wordpress.org/Function_Reference/register_taxonomy#Reserved_Terms" target="_blank">reserved words</a> which can't be used in urls. So if you want to pass the parameter "name" (reserved word) to your iframe you can do a mapping with "ainame|name". Than the parameter "ainame=hallo" will be passed as "name=hallo" to the iframe. This can also be used if the parameters of the 2 pages do not match. Several mappings can be seperated with ',' like normal parameters. In e.g. TinyWebGallery this enables you to jump directly to an album or image although TinyWebGallery is included in an iframe. If your parameters contain [] you can use {{ }} which will internally replaced. Shortcode attribute: url_forward_parameter=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Map parameter to url</th>
      <td><span class="hide-print">
      <input name="map_parameter_to_url" type="text" id="map_parameter_to_url" value=""  /><br></span>
      <p class="description">You can map an url parameter value pair to an url or pass the url directly which should be opened in the iframe. If you e.g. have a page with the iframe and you like to have different content in the iframe depending on an url parameter than this is the setting you have to use. You have to specify this setting in the following syntax "parameter|value|url" e.g. "show|1|http://www.tinywebgallery.com". If you than open the parent page with ?show=1 than http://www.tinywebgallery.com is opened inside the iframe. You can also specify several mappings by separating them by ','.<br />GET and POST parameters are supported!<br />You can also only specify 1 parameter here! The value of this parameter is than used as iframe url. e.g. show=http%3A%2F%2Fwww.tinywebgallery.com%3Fparam=value. You need to encode the url if you pass it in the url. Especially ? (%3F) and & (%26)! Please note that because of security reason only whitelisted chars [a-zA-Z0-9/:?&.] are allowed. Encoded parameters in the passed urls are not supported because all input is decoded and checked. If no parameter/value pair does match the normal src attribute of the configuration is used. Shortcode attribute: map_parameter_to_url=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" class="i-20-" >Add iframe url as param<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/add-iframe-url-to-parent" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="add_iframe_url_as_param1" name="add_iframe_url_as_param" value="same"  /> Same domain&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="add_iframe_url_as_param2" name="add_iframe_url_as_param" value="remote" /> Remote domain&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="add_iframe_url_as_param3" name="add_iframe_url_as_param" value="false" checked="checked"/> No<br></span>
    <p class="description">With this setting the url of the iframe is added as parameter to the current url. The parameter can be defined in the setting before. If this is not set the default "page" is used. This feature is only enabled for the remote domain if you also enable auto height for remote domains because the url of the iframe is sent with the same request. This enables bookmarkable urls where you go directly to the last page in the iframe. The history api which enables the change of the url is only supported by modern browsers. For older browsers the url is simply not changed. See http://caniuse.com/#search=pushstate. Shortcode attribute: add_iframe_url_as_param="same", add_iframe_url_as_param="remote" or add_iframe_url_as_param="false" </p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-40-" >Prefix for iframe url<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/add-iframe-url-as-param-remote-domain" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input name="add_iframe_url_as_param_prefix" type="text" id="add_iframe_url_as_param_prefix" value=""  /><br></span>
      <p class="description">With this setting you can define a prefix which all (most) of your pages in the iframe have. This prefix is than not added to the url but added internally. This does reduce the length of the parameter value. The prefix has to be without http:// or https://. So a prefix could be www.tinywebgallery.com/examples/. If your pages are e.g. at www.tinywebgallery.com/examples/example1.htm and www.tinywebgallery.com/examples/example2.htm than the page parameter is only page=example2.htm and not page=www.tinywebgallery.com%2Fexamples%2Fexample2.htm. See the demo for a working example. Shortcode attribute: add_iframe_url_as_param_prefix=""</p></td>
      </tr>
      </table></div></div></section><section id="section-external-workaround" class="tab_3"><br />
<div>
        <div id="icon-options-general" class="icon_ai">
      <br>
    </div><h2>
      External workaround: Howto enable cross domain resize and modification</h2>  
      <h3>Use this solution if the iframe is NOT on the same domain and you want features like auto height and css modifications.</h3>
    <p>The external workaround does enable many features which are not possible directly because of cross domain security restrictions. You need to include a Javascript file (ai_exernal.js) to the page in the iframe which is generated dynamically with your settings. <strong>If you mix http and https pages you NEED to enable "<a href="#upm">Use postMessage for communication</a>" and follow  <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message#e51" target="_blank">example 53</a> for this advanced setup (pro version needed)</strong>! In the advanced tab are many settings marked with <span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span>. This means that this setting is saved to the ai_exernal.js    </p>
    <p><h4>Important: You need to be able to modify the external web page in the iframe to use the workaround!</h4></b></p>
    
    <p><b>Step 1: Check if the page in the iframe has the same <a href="https://en.wikipedia.org/wiki/Second-level_domain" target="_blank">second level domain</a>. e.g. www.example.com, subdomain.example.com -> second level domain: example.com: <ul class="ai-src-list"><li>Yes - Only read the box "Special case sub domain" </li><li>No - Go to "<a class="link-external-domain" href="#h-external-domain">If you are on a different domain</a>" section and follow the instructions there!</li></ul></b></p>
    
    <div class="manage-menus nounderline sub-domain-container hide-search">
<strong class="hide-search"><big>Special case sub domain:</big></strong><p>If your iframe has the same second level domain an easier way is possible. You still have to include one line of Javascript but the whole configuration is than like you are on the same domain and all settings can be done by shortcode. To enable this you need to set the value "document.domain" to your second level domain (e.g. parent: www.example.com, iframe: subdomain.example.com -> second level domain: example.com) with Javascript on both pages. The plugin does set this value to the domain below if you enable this feature. See <a href="http://www.tinywebgallery.com/blog/using-sub-domains-with-advanced-iframe" target="_blank">this blog entry</a> or <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/sub-domain-auto-height-and-css-modifications" target="_blank">example 42</a> for further details.
</p><p>
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 don't use this sub domain workaround but the solution with ai_external.js below!
 
</p>
<table class="form-table">

<tr>
      <th scope="row" >Set document.domain<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="add_document_domain1" name="add_document_domain" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="add_document_domain2" name="add_document_domain" value="false" checked="checked"/> No<br>
    </span><p class="description">Set the document.domain value to the setting below.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Second level domain</th>
      <td><span class="hide-print">
      <input name="document_domain" type="text" id="document_domain" value="tinywebgallery.com"  /><br></span>
      <p class="description">The domain both of your pages have in common. So if your parent is www.example.com and your sub domain is test.example.com your main domain is example.com. Advanced iframe pro tries to detect your main domain but this is not always correct. So please change the value if it is not your main domain. Shortcode: document_domain=""</p></td>
      </tr>
      </table>
<p>
If the domain above is correct please add 
</p>
<p>
     &lt;script&gt;document.domain='tinywebgallery.com';&lt;/script&gt;
</p>
<p>
anywhere to the source code of your page of the iframe (!). 
<br />
After you have done this you can configure Advanced iFrame like you are on the same domain. Don't use the external workaround like describe below as now the configuration is much easier directly on the advanced tab.
  
</p>

</div>
<h3 id="h-external-domain">If you are on a different domain (not sub domain):</h3>    
  
<p><strong class="bold">Info:</strong> Currently selected communication channel: <strong class="bold"><a href="#upm">iframe</strong></a>. See <a class="post-message-help-link" href="#">here</a> what this means.</p>
      <p>Everything is already prepared what you need on the parent domain. For the remote page the Javascript file ai_external.js is generated when you save the settings. This file hat to be <strong class="bold">included into your external iframe page</strong>:
      </p>
      <ol>
        <li><b class="bold">Add the following Javascript to the external web page you want to show in the iframe</b> (The optimal place is before the &lt;/body&gt; if possible. Otherwise put it in the head section. NEVER place it just after the &lt;body&gt; as than the height of the script element would be measured!):        <div class="manage-menus nounderline sub-domain-container hide-search">
          <p class="bold">&lt;script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"&gt;&lt;/script&gt;</p>
        </div>
     <p>
     <a href="#" onclick="jQuery('#details-javascript').show(); return false;" >Show me what the Javascript does</a>
     <div id="details-javascript" >

The Javascript does the following:
         <ul>
           <li>Adds "aiUpdateIframeHeight()" to the onload event of the page</li>
           <li>Sends the height, width and optional data to the parent to enable auto height</a>
           <li>Modifies the remote iframe page (pro version only)
        - <a href="#mirp">Please see below how to configure this</a>.</li>
           <li>Adds the communication iframe dynamically if iframe communication is used</li>
           <li>Adds an optional wrapper div below the body that the height can be measured properly</li>
           <li>Removes any margin, padding from the body</li>
           <li>Adds a temporary overflow:hidden to the body to avoid scrollbars</li>    
         </ul>
              </div>
    </p>
        </li>
        <li>
          Add enable_external_height_workaround="true" to your shortcode! This is needed to disable the settings with the <span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span> for the same domain.        </li>
        
        <li>
          Enable the features you want to use. <strong>Please note:</strong> All settings here and also in the other sections which are marked with a <span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span> are saved to the external ai_external.js workaround file!          </li>
        <li>
           Done.            <a href="#" onclick="jQuery('#details-not-work').show(); return false;" >Click here if it does not work.</a>
            
             <div id="details-not-work" >

<p>If it does not work please check the following things:</p>
         <ol>
           <li>Use Chrome for debugging</li>
           <li>Force a full reload (win: ctrl + F5)</li>
           <li>Clean the browser cache</li>
           <li>I recommend to start with auto height only. Open the Javascript console (press F12 to open the developer tools of the browser), check for errors and fix them. Advanced iframe does also show configuration errors there!</li>
           <li>Check if ai_external.js is loaded in the network tab (F12). If you do not see it check if the file is included properly. 
           <li>If you have enabled "<a href="#upm">Use postMessage for communication</a>" set it to "Debug" and check the output in the Javascript console.</li>
           <li>If you use iframe communication check the network tab (F12), filter for doc/html and look for height.html. There you should see the measured height as parameter. If this does not show switch to <a href="#upm">postMessage communication</a> as this way has less restrictions.</li>
           <li>If you mix http and https you need to enable "<a href="#upm">Use postMessage for communication</a>" and "Support WP multisite"</li>      
           <li>Enable the internal debug console (Options -> Debug Javascript) if you have only problems on mobile devices.</li>
           <li>Go to the Help/ FAQ tab. There you find additional infos and links to the FAQ and the forum</li>      
        
         </ol>
              </div>
            
        </li>
      </ol>
    </p>

<tr>
      <th scope="row" >Resize remote iframe to content height<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="enable_external_height_workaround1" name="enable_external_height_workaround" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="enable_external_height_workaround2" name="enable_external_height_workaround" value="external" checked="checked"/> External&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="enable_external_height_workaround3" name="enable_external_height_workaround" value="false" /> No<br>
    </span><p class="description">Enable the auto height workaround by enabling it in the generated Javascript file ai_external.js. This settings only works if you have included the Javascript to the remote page.<br><strong>Important</strong>:<br />"Yes" does disable all settings with a <span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span> in the administration for the <strong>same</strong> domain and enables auto height in the ai_externals.js! This is needed as otherwise the plugin would try to use this settings directly which causes Javascript security errors! Only set this if ALL of your iframes are remote!<br />"External" does enable the setting only in the ai_externals.js. This is the default now as auto height is than working right away. You need to set enable_external_height_workaround="true" or use_shortcode_attributes_only="true" in the shortcode for iframes with external pages that the settings from the administration are not used directly.<br/>So if you use several iframes with the external workaround and the same domain you should set this setting to "External" and set enable_external_height_workaround="true" in the short code for full flexibility. <a href="#mirp">Please see below</a> how to configure ai_external.js directly.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Element to measure<span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="element_to_measure" type="text" id="element_to_measure" value="default"  /><br></span>
      <p class="description">This parameter defines the element that is measured on the remote page. "default" tries to measure the first element of the body or the wrapper div. But sometimes this does not work if e.g. the element does return a wrong height because of css styles or dynamically added elements. You can use the id directly here or you can also a valid <a class="jquery-help-link" href="#">jQuery selector pattern</a> here that start with # or .! Sometimes also adding the style overflow:hidden to the element you want to measure is needed. You can do this direcly in your html or with the plugin dynamically. Please read the section "<a class="howto-id-link" href="#">How to find the id and the attributes</a>" to find the right id or class. This setting cannot be set by a shortcode. <a href="#mirp">Please see below</a> how to configure ai_external.js directly.</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Additional height<span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input  name="element_to_measure_offset" type="text" style="width:150px;" id="element_to_measure_offset" onblur="aiCheckInputNumberOnly(this)" value="2"  /><br></span>
      <p class="description">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 if there is an additional margin around the body. This setting cannot be set by a shortcode. <a href="#mirp">Please see below</a> how to configure ai_external.js directly.</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Resize/ css modification delay<span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="external_height_workaround_delay" type="text" id="external_height_workaround_delay" style="width:150px;"  onblur="aiCheckInputNumber(this)" value="0"  /><br></span>
      <p class="description">Sometimes the external page does not have its full height and all elements 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 and the modification of elements are called. Otherwise set a 0 to disable the delay. This setting cannot be set by a shortcode. <a href="#mirp">Please see below</a> how to configure ai_external.js directly.</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Keep overflow:hidden after resize<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="keep_overflow_hidden1" name="keep_overflow_hidden" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="keep_overflow_hidden2" name="keep_overflow_hidden" value="false" checked="checked"/> No<br>
    </span><p class="description">By default overflow:hidden (removes any scrollbars inside the iframe) is set during the resize to avoid scrollbars and is removed afterwards to allow scrollbars if e.g. the content changes because of dynamic elements. If you set this setting to true the overflow:hidden is not removed and any scrollbars are not shown. This is e.g. helpful if the page is still to wide! If you want to use several iframes please use the description below for configuration. These settings only works if you have included the Javascript to the remote page. This setting cannot be set by a shortcode. <a href="#mirp">Please see below</a> how to configure ai_external.js directly.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Hide the iframe until it is completely modified.<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="hide_page_until_loaded_external1" name="hide_page_until_loaded_external" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="hide_page_until_loaded_external2" name="hide_page_until_loaded_external" value="false" checked="checked"/> No<br>
    </span><p class="description">This setting hides the iframe until the external workaround is completely done. This prevents that you see the original site before any modifications. You need to enable this AND in the shortcode. The normal "Hide the iframe until it is loaded" shows the iframe after all modifications are done which are all done by a local script. This way cannot be used for the external workaround because the exact time when the external modifications are done is unknown. Therefore the setting in the shortcode does hide in iframe until the external workaround does call iaShowIframe after all modifications are done. Shortcode attribute: hide_page_until_loaded_external="true" or hide_page_until_loaded_external="false"</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Write css directly<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize#e27" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="write_css_directly1" name="write_css_directly" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="write_css_directly2" name="write_css_directly" value="false" checked="checked"/> No<br>
    </span><p class="description">By default changes off the iframe are made by jQuery after the page is loaded. This is the only way this is possible if you do this directly. But with the external workaround it is now also possible that the style is written directly to the page. It is written where the ai_external.js is included. So if you use this option you need to include the ai_external.js as last element in the header. This setting has the advantage that the changes are not done after the page is loaded but when the browser renders the page initially. Also the page is not hidden until the page is fully modified. The settings "Hide elements in iframe" and "Modify content in iframe" are supported! This setting cannot be set by a shortcode. <a href="#mirp">Please see below</a> how to configure ai_external.js directly.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Iframe redirect url<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/change-links-targets#e11" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="iframe_redirect_url" type="text" id="iframe_redirect_url" value=""  /><br></span>
      <p class="description">If you like that the page you want to include can only be viewed in your iframe you can define the parent url here. If someone tries to open the url directly he will be redirected to this url. Existing parameters from the original url are added to the new url IF no ? is found in the  iframe_redirect_url. You need to add the possible parameters to the "URL forward parameters" that they will be passed to the iframe again. This setting does use Javascript for the redirect. If Javascript is turned off the user can still access the site. If you also want to avoid this add "html {visibility:hidden;}" to the style sheet of your iframe page. Than the page is simply white. The Javascript does set the page visible after it is loaded! iframe_redirect_url does now also check if the page is included by the domain specified. Otherwise it is redirected to the iframe_redirect_url. This way you can make sure that the iframe page can only be included by a page on your domain. Please see the additional option below you have if you define this parameter before the ai_external.js. This setting cannot be set by a shortcode. <a href="#mirp">Please see below</a> how to configure ai_external.js directly.</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Add the id to the url of the iframe<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize#e27" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="pass_id_by_url" type="text" id="pass_id_by_url" value=""  /><br></span>
      <p class="description">This feature adds the id of the iframe to the iframe url. The id is than extracted on the iframe and used as value for the callback to find the right iframe on the parent side. The static way is to set iframe_id (Please see below). The dynamic solution has to be used if you want to include the same page several times to the parent page (e.g. the page you include is called with different parameters and shows different content). You specify the parameter that is added to the url. So e.g. ai_id can be used. Allowed values are only a-zA-Z0-9_. Do NOT use any other characters. You need to set the parameter here or by setting iframe_url_id before you include ai_external.js. Please note the if you specify it here ALL shortcodes with use_shortcode_parameters_only="true" need pass_id_by_url to be set. See example 27 for a working setup. Shortcode: pass_id_by_url=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Keep iframe modifications outside iframe<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="modify_iframe_if_cookie1" name="modify_iframe_if_cookie" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="modify_iframe_if_cookie2" name="modify_iframe_if_cookie" value="false" /> No<br>
    </span><p class="description">Please note: This is a really advanced feature! Please ask in the forum if you plan to use this! Normally the page in the iframe is only modified if it is in the iframe. But sometimes the page in the iframe does not work properly in the iframe in a workflow. So you need to jump out out of the iframe. But you maybe still want to hide/modify the content of this page even outside the iframe. This feature does enable this by setting a session cookie. If you enable this feature a cookie is set if you do modifications in the iframe and even if you jump out of the iframe the modifications are still done. This setting cannot be set by a shortcode. <a href="#mirp">Please see below</a> how to configure ai_external.js directly.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Support WP multisite<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="multi_domain_enabled1" name="multi_domain_enabled" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="multi_domain_enabled2" name="multi_domain_enabled" value="false" checked="checked"/> No<br>
    </span><p class="description">By default the callback url is rendered to the ai_external.js. For WP multi sites the default setting does than only work for one of the domains. "Yes" does enable that the Javascript compares the default url with the one from the referrer. Than the default domain will be exchanged with the one from the referrer. This only works if the domain is the only difference between the multi sites. <a href="#mirp">Please see below</a> how to configure ai_external.js directly. If you only enable this in ai_external.js directly you need to use multi_domain_enabled="true" in the shortcode! If you use postMessage for communication please read the documenation there how to use this setting!</p></td>
    </tr>
         
</table>      
<div id="upm" class="manage-menus nounderline sub-domain-container hide-search">
<table class="form-table">

<tr>
      <th scope="row" >Use postMessage for communication<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message#e51" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input type="radio" id="use_post_message1" name="use_post_message" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="use_post_message2" name="use_post_message" value="debug" /> Debug&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="use_post_message3" name="use_post_message" value="false" checked="checked"/> No (iframe)<br></span>
    <p class="description">From version 7.4, this is the default communication way between the iframe and the parent for new installations of the pro version. See <a class="post-message-help-link" href="#">here</a> for the two different communication ways and what is the best one for you. If you have any problems with windows.postMessage select "Debug" and additional log information about the transfered data is printed to the browser console. Use F12 at your browser to open the developer tools. The administration does save the current url as targetOrigin into the ai_external.js. If have a multi site or you include your page into differnt parents than you need the pro version and select "Support WP multisite" to "Yes" as than * is used as targetOrigin. Also use post communication if you have a https page in the iframe and your page is http. Please see <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message#e51" target="_blank">example 53</a> for this advanced setup! <a href="#mirp">Please see below</a> how to configure ai_external.js directly. If you only enable this in ai_external.js directly you need to use use_post_message="true"/"debug" in the shortcode!</p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Include content directly from the iframe<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message#e52" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a><span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="data_post_message" type="text" id="data_post_message" value=""  /><br></span>
      <p class="description">When you enable post communication you can read elements from the iframe and transfer it to the parent and include it there. This is like the feature "Include content directly" from the "Add files/content" from the next tab  but more powerful. You can define here as many elements you like and insert it to the parent page. To enable this setting you need to specify ther element of the parent and the element of the iframe seperated by a |. Several settings are seperatd by , e.g. #c-id|#content,#s-id|#some-images,#p-id|#iframe-right p:nth-child(2). You can use any valid <a class="jquery-help-link" href="#">jQuery selector pattern</a> here! Currently the iframe is NOT hidden by default. After the setup you need to set display:none; on the basic tab at "Style". Currently there are no additional settings like for the same domain. So make sure that e.g. the divs you want to add the content have e.g. the correct height for optimal display! This setting cannot be set by a shortcode. <a href="#mirp">Please see below</a> how to configure ai_external.js directly.</p></td>
      </tr>
      </table></div>
    <p>
    <strong>Please note:</strong> If you change the settings above I recommend to reload the iframe page in a different tab because otherwise the page is cached by many browsers!    </p>
   
    <p>
      Please test with <strong>all</strong> browsers! If the wrapper div is needed (It has a transparent border of 1px!) and it causes layout problems you have to remove the wrapper div in the Javascript file and you have to measure the body. The alternative solution is stored as comment in the Javascript file. The Javascript file is regenerated each time you save the settings on this page.    </p>
    
    <h3 id="mirp">How to configure the "Modifies the remote iframe page" options</h3>
    <p>
    The configuration which is rendered by default to the Javascript is the one you enter in the settings of <a class="modifycontent-link" href="#">"Modify the content of the iframe if the iframe page is on the same domain"</a>.
    </p>
    <h3 id="mirp">How to configure the workaround file ai_external.js directly to work with different settings.</h3>
    <p>
        The file ai_external.js is created when you save the settings.
        If you want to have different settings for different pages you can define the parameters which are used
        in the script before you include the file ai_external.js.
    <p>
    <div class="manage-menus nounderline hide-always">
    <strong>Please note:</strong> All parameters can be set in the administration. This are the settings where a <span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span> is shown! You only need to define variables before the script or a configuration file if you need to include the SAME ai_external.js with DIFFERENT configurations. See the <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq#config" target="_blank">FAQ</a> for more details.
    </div>
    <p>The following parameters can be used:
       
    </p><p>
      <a href="#" onclick="jQuery('#all-parameters').show(); return false;" > Show me the parameters.</a>
    </p>
      <div id="all-parameters" class="hide-always">
       <ul class="ulli">
         <li>iframe_id - By default the id from the settings are used. If you want to use several iframes on the same page with the external workaround you need to specify the id from the shortcode.</li>
         <li>updateIframeHeight - Enable/disable the resize height workaround. Valid values are "true", "false".</li>
         <li>keepOverflowHidden - Enable/disable if the overflow:hidden is kept. Valid values are "true", "false".</li>
          <li>hide_page_until_loaded_external - Enable/disable that the page is hidden until fully modified. Valid values are "true". Needs only to be set on the remote site if you do not use auto height because otherwise no request is sent back!, "false".</li>
      
          <li>iframe_hide_elements - See <a class="modifycontent-link" href="#">Hide elements in iframe</a>.</li>
          <li>onload_show_element_only - See <a class="modifycontent-link" href="#">Show only one element</a></li>
          <li>iframe_content_id - See <a class="modifycontent-link" href="#">Content id in iframe</a></li>
          <li>iframe_content_styles - See <a class="modifycontent-link" href="#">Content styles in iframe</a></li>
          <li>change_iframe_links - See <a class="modifycontent-link" href="#">Change iframe links</a></li>
          <li>change_iframe_links_target - See <a class="modifycontent-link" href="#">Change iframe links target</a></li>
          <li>onload_resize_delay - See resize delay above. E.g. var onload_resize_delay=100; means 100 ms resize delay. You also need this setting when you use the hidden tabs feature.</li>
          <li>iframe_redirect_url - Defines an url which is loaded if the page is not included in an iframe. See "Iframe redirect url" above. As an additional option you can use   Javascript to add e.g. the current domain to the redirect url! So e.g. var iframe_redirect_url = "http://parent-domain?page=" + escape(window.location.href); would add the iframe url as parameter to the parent. If a ? is found in the iframe_redirect_url then the parameters of the iframe page are NOT added to the redirect url!</li>
          <li>write_css_directly - See "Write css directly" above. Valid settings are write_css_directly="true" or write_css_directly="false". </li>
          <li>additional_css_file_iframe - The ai_external.js can also load an additional css file. This is loaded at the end of ai_external.js. The advantage using this is that the file is only loaded if the page is inside the iframe and is not loaded when accessed directly. Please note that the file is loaded asynchronously.</li>
          <li>additional_js_iframe - The ai_external.js can also write additional Javscript. This is loaded at the end of ai_external.js. The advantage using this is that the Javascript is only loaded if the page is inside the iframe and is not loaded when accessed directly.</li>
          <li>additional_js_file_iframe - The ai_external.js can also load an additional Javascript file. This is loaded at the end of ai_external.js. The advantage using this is that the file is only loaded if the page is inside the iframe and is not loaded when accessed directly. Please note that the file is loaded asynchronously.</li>
          <li>resize_on_element_resize - See "Resize on element resize"</li> 
          <li>resize_on_element_resize_delay - See "Poll interval for the resize detection"</li> 
          <li>iframe_url_id - See "Add the id to the url of the iframe"</li> 
          <li>element_to_measure - You can define the element you want to measure + a offset for fix content. This is sometimes needed for some themes where e.g. chrome returns 0 as height. You need to specify a id. So no # is allowed here.</li> 
          <li>element_to_measure - The element you want to measure. See "element to measure" above</li> 
          <li>element_to_measure_offset - The additional height for a the measured content. See "Additional height"</li> 
          <li>modify_iframe_if_cookie - Enable/disable that the modifications of an iframe is done even outside an iframe. See "Keep iframe modifications outside iframe". Valid values are "true", "false".</li>
          <li>add_iframe_url_as_param - See "Add iframe url as param"</li>
          <li>additional_styles_wrapper_div - Adds additional styles to the wrapper div. Depending on the html/css this is sometimes needed that the element can be measured correctly. overflow:auto; is sometimes needed!</li>
          <li>domainMultisite - Enable/disable multi site settings. See above. Valid values are "true", "false".</li>
          <li>usePostMessage -  Enable/disable the usage of postMessage for communication. See above. Valid values are true, false.</li>
          <li>debugPostMessage -  Enable/disable the debug of postMessage for communication. See above. Valid values are true, false.</li>
          <li>dataPostMessage - Defines the elementes that should be transfered to the client. See above. </li>
          
      </ul>
      </div>
     <p>An example would look like this:
     </p>
     <p>
        &lt;script&gt;<br />
        &nbsp;&nbsp;&nbsp;var updateIframeHeight = "true";<br />
        &nbsp;&nbsp;&nbsp;var keepOverflowHidden = "false";<br />
        &lt;/script&gt;<br />
              &lt;script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"&gt;&lt;/script&gt;  
    </p>
      
    <h3>
    Config files for the external workaround    </h3>  
    <p>
    Defining the variables before the script has the disadvantage that you need to modify the html of the remote domain for every change and also the code there can get really big. Therefore it is now possible to use config files which are located on the parent server and loaded dynamically from the external_ai.js. Config files have to be placed in the folder "advanced-iframe-custom" in the plugin directory (This directory does not exist by default and is created if you use the create input filed below) and need to follow this naming convention: ai_external_config_&lt;config_id&gt;.js. This file does contain exactly the variables described before. Then you need to add the config_id as parameter to the external_ai.js like this:  ..../ai_external.js?config_id=&lt;config_id&gt;. The config_id can only contain alphanumeric characters, - and _.    </p>
    <p>
    You can also include the config file directly before the ai_external.js script. This gives you the same flexibility but you have to include 2 scripts. The performance including this directly is a little bit better because no internal loading has to be done!    </p>
     <p>
    <strong>Please note</strong>: The folder "advanced-iframe-custom" is used because Wordpress does delete the whole plugin folder at an update and all your settings would be lost! If you delete the plugin completely you need to remove the folder "advanced-iframe-custom" manually if you don't want to keep this settings!    </p>
   
    
     <p>
     <a href="#" onclick="jQuery('#details-config').show(); return false;" >Show me the example above with a config file</a>
     <div id="details-config" >
     <p>
In this example the config_id "example" is used.    </p>
    <ol>
    <li>First create a file called "ai_external_config_example.js" in the folder "advanced-iframe-custom" of the plugin directoy (or create the file below) and save the following lines there:<br />
        &nbsp;&nbsp;&nbsp;var updateIframeHeight = "true";<br />
        &nbsp;&nbsp;&nbsp;var keepOverflowHidden = "false";<br />
    </li>
    <li>
      a. Add the parameter ?config_id=example to the external_ai.js<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js?config_id=example"&gt;&lt;/script&gt;
        <br />
        or
        <br />
        b. &lt;script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/ai_external_config_example.js"&gt;&lt;/script&gt;<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"&gt;&lt;/script&gt;
          
    </li>
    <li>  
    Done. Make sure that you refresh the browser cache if you make changes to your config file. <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications#e7" target="_blank">Example 7</a> shows a working setup.    </li>
    </ol>
    </div>
    </p>
       
    <div class="hide-print">
    <h4>Existing config files</h4>
    <p>The following configuration files do currently exist. Please note that you can view/edit this files with the plugin editor of Wordpress by clicking on the "Edit/View" link. Hover over the script you want to include and click 3 times fast to select it. Than add the line before your ai_external.js if you use the 2nd way to include the configuration. 
    </p>
<hr height=1><div class="config-file-block"><div class="ai-external-config-label"><span class="config-list">ai_external_config_example7.js</span> &nbsp; <a href="http://www.tinywebgallery.com/blog/wp-admin/plugin-editor.php?file=advanced-iframe-custom%2Fai_external_config_example7.js">Edit/View</a> &nbsp; <a class="confirmation post" href="options-general.php?page=advanced-iframe.php&remove-id=example7">Remove</a></div><div class="ai-external-config">&lt;script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/ai_external_config_example7.js"&gt;&lt;/script&gt;</div></br></div><hr height=1>  
    <p>Create a config file with the following id:<br />
      <input name="ai_config_id" id="ai_config_id" type="text" size="20" maxlength="20" /> 
      <input id="ccf" class="button-primary" type="submit" name="create-id" value="Create empty config file"/>
    </p>
    </div>
</div>

<h3>Load different configurations depending on an url parameter</h3>
<p>Important: If you want to include one external page into more than one iframe only one configuration for the external page is possible by default. An advanced topic is to switch configurations depending on an url parameter. This requires to create a custom version of the config switcher template that is included in the js folder of the plugin and called ai_config_switcher_template.js.</p><p>Please make a copy of this file and copy it to the folder advanced-iframe-custom. If you want to have this config file listed above please use  the following naming ai_external_config_&lt;config_id&gt;.js. Please follow the documenation inside the config switcher file. If you need more complex configurations like this I recommend to get the professional support offered for this plugin because then an indivitual solution has to be designed and a custom version of the plugin would be needed.</p>
   
   
   
   
</section><section id="section-add-files" class="tab_4"><br />
<div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div>    <h2>
      Add additional files</h2>
     <p>
      All settings above are designed for smaller changes of the parent or the iframe. If you want to make bigger changes and you are able to store this in a file including a whole file is the better solution. Below you can add additional Javascript or css files to the different pages.    </p> 
      <p>
      <strong>Please note:</strong> The files are edited/viewed by the default Worpdress plugin editor! It is o.k. that "inactive" is shown in the editor as the advanced-iframe-custom folder is not a real plugin folder. If the editor does not work because of file permissions please edit the files directly on your server.    </p> 
    
    
     <div class="hide-print">
    <h4>Existing additional files</h4>
    <p>The following additional 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. Hover over the file you want to include and click 3 times fast to select it. 
    </p>
<hr height=1><div class="config-file-block"><div class="ai-external-config-label"><span class="config-list">custom_iframesizer.js</span> &nbsp; <a href="http://www.tinywebgallery.com/blog/wp-admin/plugin-editor.php?file=advanced-iframe-custom%2Fcustom_iframesizer.js">Edit/View</a> &nbsp; <a class="confirmation post" href="options-general.php?page=advanced-iframe.php&remove-custom-id=iframesizer.js">Remove</a></div><div class="ai-external-config">http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/custom_iframesizer.js</div><br /></div><div class="config-file-block"><div class="ai-external-config-label"><span class="config-list">custom_m_querries.css</span> &nbsp; <a href="http://www.tinywebgallery.com/blog/wp-admin/plugin-editor.php?file=advanced-iframe-custom%2Fcustom_m_querries.css">Edit/View</a> &nbsp; <a class="confirmation post" href="options-general.php?page=advanced-iframe.php&remove-custom-id=m_querries.css">Remove</a></div><div class="ai-external-config">http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/custom_m_querries.css</div><br /></div><div class="config-file-block"><div class="ai-external-config-label"><span class="config-list">custom_media_query_hide.css</span> &nbsp; <a href="http://www.tinywebgallery.com/blog/wp-admin/plugin-editor.php?file=advanced-iframe-custom%2Fcustom_media_query_hide.css">Edit/View</a> &nbsp; <a class="confirmation post" href="options-general.php?page=advanced-iframe.php&remove-custom-id=media_query_hide.css">Remove</a></div><div class="ai-external-config">http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/custom_media_query_hide.css</div><br /></div><div class="config-file-block"><div class="ai-external-config-label"><span class="config-list">custom_media_query_show_part.css</span> &nbsp; <a href="http://www.tinywebgallery.com/blog/wp-admin/plugin-editor.php?file=advanced-iframe-custom%2Fcustom_media_query_show_part.css">Edit/View</a> &nbsp; <a class="confirmation post" href="options-general.php?page=advanced-iframe.php&remove-custom-id=media_query_show_part.css">Remove</a></div><div class="ai-external-config">http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/custom_media_query_show_part.css</div><br /></div><div class="config-file-block"><div class="ai-external-config-label"><span class="config-list">custom_onload.js</span> &nbsp; <a href="http://www.tinywebgallery.com/blog/wp-admin/plugin-editor.php?file=advanced-iframe-custom%2Fcustom_onload.js">Edit/View</a> &nbsp; <a class="confirmation post" href="options-general.php?page=advanced-iframe.php&remove-custom-id=onload.js">Remove</a></div><div class="ai-external-config">http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/custom_onload.js</div><br /></div><hr height=1>  
    <p>Create a custom file. Only files with the extensions css or js are allowed. All files are prefixed with "custom_":<br />
      <input name="ai_custom_id" id="ai_custom_id" type="text" size="20" maxlength="20" /> 
      <input id="ccf" class="button-primary" type="submit" name="create-custom-id" value="Create custom file"/>
    </p>
    </div>
     
    <h3>Parent</h3>
    <p>
      For some features in iframes additional css or js files are needed in the parent(!) page. E.g. for the newest version of lytebox this is needed. Each of the files do get a version number which is randomly changed each time you save the settings. So if you change the css or the js file you should save the settings to make sure your users to get the new version right away and not a chached one. If you need to add css or Javascipt to the iframe please check the settings of the external workaround.    </p>
    <table class="form-table">

<tr>
      <th scope="row" >Additional css</th>
      <td><span class="hide-print">
      <input name="additional_css" type="text" id="additional_css" value=""  /><br></span>
      <p class="description">If you want to include an additional css into the parent page please specify the path to this file here. The css file will be added into the header of the page. You can specify a full or relative url. Make sure you take "<a href="https://designshack.net/articles/css/what-the-heck-is-css-specificity/" target="blank">CSS specificity"</a> into account if you want to overwrite styles! If you specify a relative one /style.css means that the style.css is located in the main directory of Wordpress. Start relative urls with /. Please note: Before Wordpress 3.3 the shortcode attribute cannot be used. You can only set it here. Shortcode attribute: additional_css=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Additional js</th>
      <td><span class="hide-print">
      <input name="additional_js" type="text" id="additional_js" value=""  /><br></span>
      <p class="description">If you want to include an additional Javascript into the parent page please specify the path to this file here. The Javascript will be added after the iframe or if you use Wordpress >= 3.3 in the footer section. You can specify a full or relative url. If you specify a relative one /javascript.js means that the javascript.js is located in the main directory of Wordpress. Start relative urls with /. Please note: Before Wordpress 3.3 the shortcode attribute cannot be used. You can only set it here. Shortcode attribute: additional_js=""</p></td>
      </tr>
          </table>
    
     
    <h3>Iframe</h3>
    <p>
     You can also include a css file directly into the iframe page. This setting is also saved in the external workaround file. In the external workaround file the settings below are written at the place where the ai_external.js is included!    </p>
        <table class="form-table">

<tr>
      <th scope="row" >Additional css in iframe<span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="additional_css_file_iframe" type="text" id="additional_css_file_iframe" value=""  /><br></span>
      <p class="description">You can also include a css file directly into the iframe page. The css file will be added at the bottom of the body to overwrite also all inline styles. The styles are added after the page is loaded. Make sure you take "<a href="https://designshack.net/articles/css/what-the-heck-is-css-specificity/" target="blank">CSS specificity"</a> into account if you want to overwrite styles! You can specify a full or relative url. If you specify a relative one /style.css means that the style.css is located in the main directory of the iframe page. In the external workaround the file is added after the ai_external.js. Shortcode attribute: additional_css_file_iframe=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Additional Javascript in iframe<span class="ai-file" alt="Saved to ai_external.js" title="Saved to ai_external.js"></span></th>
      <td><span class="hide-print">
      <input name="additional_js_file_iframe" type="text" id="additional_js_file_iframe" value=""  /><br></span>
      <p class="description">You can also include a js file directly into the iframe page. The js file will be added at the bottom of the body. You can specify a full or relative url. If you specify a relative one /javascript.js means that the javascript.js is located in the main directory of the iframe page. In the external workaround the file is added after the ai_external.js. Shortcode attribute: additional_js_file_iframe=""</p></td>
      </tr>
          </table>
    
 
</div><div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div>    <h2>
      Include content directly</h2>
    <p>
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_&gt;iframe_name&lt;. So if you need to overwrite some css you can put it in an extra file and add this in the section "Additional files" </p><p>"Include html" does write the given string directly and all other settings are not used!<table class="form-table">
      <tr>
      <th scope="row" >Include url</th>
      <td><span class="hide-print">
      <input name="include_url" type="text" id="include_url" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Include content</th>
      <td><span class="hide-print">
      <input name="include_content" type="text" id="include_content" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Include height</th>
      <td><span class="hide-print">
      <input name="include_height" type="text" id="include_height" style="width:150px;"  onblur="aiCheckInputNumber(this)" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Include fade</th>
      <td><span class="hide-print">
      <input name="include_fade" type="text" id="include_fade" style="width:150px;"  onblur="aiCheckInputNumber(this)" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Hide page until include is loaded</th>
      <td><span class="hide-print">
      <input type="radio" id="include_hide_page_until_loaded1" name="include_hide_page_until_loaded" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="include_hide_page_until_loaded2" name="include_hide_page_until_loaded" value="false" checked="checked"/> No<br>
    </span><p class="description">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" </p></td>
    </tr>
    
      <tr>
      <th scope="row" >Include html</th>
      <td><span class="hide-print">
      <input name="include_html" type="text" id="include_html" value=""  /><br></span>
      <p class="description">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=""</p></td>
      </tr>
      </table></div></section><section  id="section-help" class="tab_5"><br />
<div>
    <div id="icon-options-general" class="icon_ai">
      <br />
    </div> <h2>
Video tutorials       </h2>
    <p>
    The videos are not included in the plugin directly as they will be extended soon on the website.</p><p>
      <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-video-tutorials" target="_blank" id="vid" class="button-primary">Go to the video tutorials</a>    
    </p>
</div> <div>
    <div id="icon-options-general" class="icon_ai">
      <br />
    </div> <h2>
FAQ       </h2>
    <p>
      The FAQ is not included in the plugin directly as it is updated frequently on the website.</p><p>
      <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq" target="_blank" id="faq" class="button-primary">Go to the FAQ</a>    
    </p>
</div> <div>
    <div id="icon-options-general" class="icon_ai">
      <br />
    </div> <h2>
Forum       </h2>
    <p>
      Please use the forum for support. Make sure to enable the "Check shortcode" on the options tab first as this maybe already show you which setting is not valid!</p><p>
      <a href="http://www.tinywebgallery.com/en/forum.php" target="_blank" id="faq" class="button-primary">Go to the forum</a>    
    </p>
</div> <div>
    <div id="icon-options-general" class="icon_ai">
      <br />
    </div> <h2>
Get support       </h2>
    <p>
      The basic settings are the settings a normal iframe solution does offer. They don't require any specific html, css or programming knowhow.    </p>
    <p>
      The advanced options do modify the styles of the parent page, the iframe, do some Javascript magic when the iframe is loaded or include content directly to your page. Understanding this is not basic Wordpress knowhow and therefore you can get help here if you want. I do offer paid support for this plugin now.    </p>
    
      <p>What do you get?</p><ul><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Free check if you can include the content the way YOU like.</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Fast and reliable setup of what you want.</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- You only pay if it works!</li></ul>   
    <p>
      This offer is only available for Advanced iFrame Pro users.<br/>If you are interested please visit <a id="as" target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe-support/">http://www.tinywebgallery.com/blog/advanced-iframe-support/</a> for more information.    </p>
</div><div>
    <div id="icon-options-general" class="icon_ai">
      <br />
    </div><h2 id="how-id">
How to find ids and attributes       </h2>
    <p>
    <ol><li>Manually: Go to Appearance -> Editor and select the page template. Then you have to look which div elements are defined. e.g. container, content, main. Also classes can be defined here. Then you have to select the style sheet below and search for this ids and classes and look which one does define the width of you content.</li><li>Firebug: For Firefox you can use the plugin firebug to select the content element directly in the page. On the right side the styles are always shown. Look for the styles that set the width or any bigger margins. These are the values you can then overwrite by the settings above.</li><li><strong>Small jquery help</strong><br>Above you have to use the jQuery syntax:<p><ul><li>- tags - if you want to hide/modify a tag directly (e.g. h1, h2) simply use it directly e.g. h1,h2</li><li>- id - if you want to hide/modify an element where you have the id use #id</li><li>- class - if you want to hide/modify an element where you have the class use .class</li></ul></p>You can use any valid <a class="jquery-help-link" href="#">jQuery selector pattern</a> here!</li></ol></p>
</div>

<div>
    <div id="icon-options-general" class="icon_ai">
      <br>
    </div><h2 id="jqh">
      Small jQuery help</h2>
      <p>
     You can use jquery selector patterns directly to identify the elements you want to modify at some of the settings. This plugin does use this selectors than at the right place. This is already an advanced topic if you are not familiar with jQuery.      </p>
    <p>
    <a href="#" onclick="jQuery('#jquery-help').show(); return false;" > Show me a small jQuery selector help.</a>
    </p>
      <div id="jquery-help">

<p>
      I have created a small jquery selector help which is optimized for the advanced iframes scenarios. It is an extract from http://refcardz.dzone.com/refcardz/jquery-selectors#refcard-download-social-buttons-display. So please go there if you need an extended version or give someone credit.
      </p>

<h3>What are jQuery selectors?</h3>
      <p>
      jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. The selector is a string expression that identifies the set of DOM elements that will be collected into a matched set to be operated upon by the jQuery methods.
      </p>
           <h3>Types of jQuery selectors?</h3>
      <p>
        There are three categories of jQuery selectors: Basic CSS selectors, Positional selectors, and Custom jQuery selectors.
      </p><p>
The Basic Selectors are known as "find selectors" as they are used to find elements within the DOM. The Positional and Custom Selectors are "filter selectors" as they filter a set of elements (which defaults to the entire set of elements in the DOM). This extract will focus on the basic selectors as they are most important and will cover most of your needs.
      </p>

<h4>Basic CSS Selectors</h4>
      <p>These selectors follow standard CSS3 syntax and semantics. For more selectors and examples go to <a href="http://api.jquery.com/category/selectors" target="_blank">http://api.jquery.com//category/selectors</a>.</p>
       <table cellspacing="0" cellpadding="0">
  			<thead>
  				<tr>
  					<th class="left_th_colored">Syntax</th>
  					<th class="right_th_colored">Description</th>
  				</tr>
  			</thead>
  			<tbody>
  				<tr>
  					<td class="left_td_colored">*</td>
  					<td class="right_td_colored">Matches any element.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E</td>
  					<td class="right_td_colored">Matches all elements with tag name E.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E F</td>
  					<td class="right_td_colored">Matches all elements with tag name F that are descendants of E.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E&gt;F</td>
  					<td class="right_td_colored">Use E##F. ## is converted to &gt;. Matches all elements with tag name F that are direct children of E.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E+F</td>
  					<td class="right_td_colored">Matches all elements with tag name F that are immediately preceded by a sibling of tag name E.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E~F</td>
  					<td class="right_td_colored">Matches all elements with tag name F that are preceded
by any sibling of tag name E.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E.c</td>
  					<td class="right_td_colored">Matches all elements E that possess a class name of c.
Omitting E is identical to *.c.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E#i</td>
  					<td class="right_td_colored">Matches all elements E that possess an id value of i.
Omitting E is identical to *#i.</td>
  				</tr>
					<tr>
  					<td class="left_td_colored">E[a]</td>
  					<td class="right_td_colored">Matches all elements E that posses an attribute a of any value.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E[a=v]</td>
  					<td class="right_td_colored">Matches all elements E that posses an attribute a whose value is exactly v.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E[a^=v]</td>
  					<td class="right_td_colored">Matches all elements E that posses an attribute a whose value starts with v.</td>
  				</tr>
					<tr>
  					<td class="left_td_colored">E[a$=v]</td>
  					<td class="right_td_colored">Matches all elements E that posses an attribute a whose value ends with v.</td>
  				</tr>
  				<tr>
  					<td class="left_td_colored">E[a*=v]</td>
  					<td class="right_td_colored">Matches all elements E that posses an attribute a whose value contains v.</td>
  				</tr>
  				
				</tbody>
				</table>
        
        <h4>Additional useful selectors</h4>
      <p>These selectors are basic filters provided by jQuery I found useful using in this plugin. For more selectors and examples go to <a href="http://api.jquery.com/category/selectors" target="_blank">http://api.jquery.com//category/selectors</a>.</p>
       <table cellspacing="0" cellpadding="0">
  			<thead>
        <tr>
  					<td class="left_td_colored">E:not(selector)</td>
  					<td class="right_td_colored">Remove elements from the set of matched elements.</td>
  				</tr>
          <tr>
  					<td class="left_td_colored">E:eq(index)</td>
  					<td class="right_td_colored">Select the element at index n within the matched set.</td>
  				</tr>
           <tr>
  					<td class="left_td_colored">E:last()</td>
  					<td class="right_td_colored">Selects the last matched element.</td>
  				</tr>
           <tr>
  					<td class="left_td_colored">E:nth-child(index)</td>
  					<td class="right_td_colored">Selects all elements that are the nth-child of their parent.</td>
  				</tr>
        	</tbody>
				</table>
        
        <h4>Examples</h4>
        <ul>
				<li>$("div") selects all &lt;div&gt; elements</li>
				<li>$("fieldset a") selects all &lt;a&gt; elements within &lt;fieldset&gt; elements</li>
				<li>$("li##p") selects all &lt;p&gt; elements that are direct children of &lt;li&gt; elements</li>
				<li>$("div~p") selects all &lt;div&gt; elements that are preceded by a &lt;p&gt; element</li>
				<li>$("p:has(b)") selects all &lt;p&gt; elements that contain a &lt;b&gt; element</li>
				<li>$("div.someClass") selects all &lt;div&gt; elements with a class name of someClass</li>
				<li>$(".someClass") selects all elements with class name someClass</li>
				<li>$("#testButton") selects the element with the id value of testButton</li>
				<li>$("img[alt]") selects all &lt;img&gt; elements that possess an alt attribute</li>
				<li>$("a[href$=.pdf]") selects all &lt;a&gt; elements that possess an href attribute that ends in .pdf</li>
        <li>$("a[href='example.html']") selects all &lt;a&gt; elements that has the href example.html</li>
        <li>$("a[href*='example.html']") selects all &lt;a&gt; elements where the href does contain example.html</li>
        <li>$("a[href^='http://www.tinywebgallery.com']") selects all &lt;a&gt; elements that has a href that starts with http://www.tinywebgallery.com</li>
        <li>$("a:not([href^='http://www.tinywebgallery.com'])") selects all &lt;a&gt; elements that has a href that does NOT start with http://www.tinywebgallery.com. This can be used to detect external links and add target="_blank" there.</li>
        <li>$("button[id*=test]") selects all buttons whose id attributes contain test</li>
        <li>$("tr:not(.keep)") selects all table row that don't have the class "keep"</li>
        <li>$("table:nth-child(1)") selects the 2nd row of a table</li>
				</ul>
        <p>You can create the union of multiple disparate selectors by listing them, separated by commas. For example, the following matches all &lt;div&gt; and &lt;p&gt; elements: div,p</p>
     
      
       <h3>Usage in Advanced iframe</h3>
       Above the default usage in jQuery is shown in the examples In Advanced iFrame the jQuery part is already rendered by the plugin. Therefore you only need to specify the selector. Also the following two rules apply: 
       
       <ol>
       <li><b>Only single quotes are allowed</b>. So please always use ' and never ".</li>
       <li>Because brackets [ ... ] are replaced in the short code by Wordpress you need to <b>replace [...] them with {{ ... }}</b></li>
       </ol>
       <b>Examples:</b>
       <ul>
         <li>$("div") -> div</li>
         <li>$("p:has(b)") -> p:has(b)</li>
         <li>$("a[href$=.pdf]") -> a{{href$=.pdf}}</li> 
         <li>a[href="example.html"] -> a{{href='example.html'}}</li>
       </ul>
      </div>  
       
      
      </div><div>
     <div id="icon-options-general" class="icon_ai">
      <br>
    </div><h2 id="browser-detection-id">
      Advanced iframe browser detection</h2>
      <p>
     Pro users 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.
      </p>
         <p>
    <a href="#" onclick="jQuery('#browser-help').show(); return false;" > Show me how to configure the browser detection in advanced iframe pro.</a>
    </p>
      <div id="browser-help">
         <p>
         Modern website designs are not pixel based anymore and depending on the features of the browser they also look slightly different. So if you use the "Show only part of the iframe" feature it is possible that the area you want to cut out of the website is at a slightly different place. You can also use the browser detection to show different iframes for different browsers or even mobile devices.
         </p>
         <h3>Setup</h3>
         <p>
         If you want to have different iframe configurations depending on the browser you have to use the shortcode attribute <strong>browser=""</strong> and define the browsers there which should be used for this shortcode. See the different <a href="#config-options">configuration options</a> below. You can define several browsers by separaring them by, and even define browser versions by adding the versions with (version). Each of the shortcodes which are browser dependent need to have the <strong>same id</strong>! The last shortcode should have the attribute browser="default". This is then used if no browser does match before. If you don't do this you can show iframes only for a specific browser.
         </p>
         <h4>Example 1 - Special settings for IE 10 and IE 11</h4>
         <p>
            [advanced_iframe id="example1" show_part_of_iframe_x="25" browser="ie(10),ie(11)"]<br />
            [advanced_iframe id="example1" show_part_of_iframe_x="20" browser="default"]
         </p>
         <h4>Example 2 - Special settings for IE, Firefox and Chrome</h4>
         <p>
            [advanced_iframe id="example2" show_part_of_iframe_x="25" browser="ie"]<br />
            [advanced_iframe id="example2" show_part_of_iframe_x="23" browser="firefox,chrome"]<br />
            [advanced_iframe id="example2" show_part_of_iframe_x="20" browser="default"]
         </p>
          <h4>Example 3 - Show a different iframe on iframe on apple devices and mobile devices</h4>
         <p>
            [advanced_iframe id="example3" src="apple iframe" browser="iphone,ipad,ipod"]<br />
            [advanced_iframe id="example3" src="other mobile devices iframe" browser="mobile"]<br />
            [advanced_iframe id="example3" src="normal iframe" browser="default"]
         </p>

<h3 id="config-options">Configuration options</h3>
         
         The following options for most common browsers can be used:
         <ul id="browser-list">
           <li>ie - Selects all versions of Internet Explorer. Also a version is supported. ie(10) selects IE10, ie(11) selects IE11</li>
           <li>safari - Selects all versions of Safari. Also a version is supported. Add the version in (). e.g. safari(5)</li>
           <li>firefox - Selects all versions of Firefox. Also a version is supported. Add the version in (). e.g. firefox(20)</li>
           <li>chrome - Selects all versions of Chrome. Also a version is supported. Add the version in (). e.g. chrome(25)</li>
           <li>opera - Selects all versions of Opera. Also a version is supported. Add the version in (). e.g. opera(20)</li>
           <li>ipad - Selects all versions of ipad.</li>
           <li>ipod - Selects all versions of ipod.</li>
           <li>iphone - Selects all versions of iphone.</li>
           <li>mobile - Selects all mobile devices.</li>
           <li>tablet - Selects all tablet devices.</li>
           <li>android - Selects all android devices.</li> 
           <li>androidtablet - Selects all android tablet devices.</li> 
           <li>desktop - Selects all desktop browsers.</li> 
           <li>browser - Selects all browsers. Desktop, tablet and mobile. Can be used to show something only for browsers and e.g for crawlers you can use the default and show nothing.</li> 
           <li>default - Is used if no other advanced iframe pro with the same id was selected before.</li>
         </ul>

<h3>Credit and update</h3>
      <p>
        Advanced iFrame Pro uses an integrated browser detection which is based on the wordpress plugin php-browser-detection 3.2.
      </p>
      <p>
         If the automatich update does not work you can get an updated version of the browsercap.ini lite file here: http://browscap.org/<br />Please use the light version as it conains all settings for the provided settings ! 
      </p>
      <p>
         If you want to update the browser detection file get the lite_php_browscap.ini from there and rename it to php-browser-detection/cache/browscap.ini.<br />
         Or always get the latest version of the advanced iframe pro plugin. This file is also updated there!
      </p>
      </div>
    </div>
<div>
    <div id="icon-options-general" class="icon_ai">
      <br />
    </div><h2 id="com-post-message">
Communication with window.postMessage or iframe       </h2>
    <p>
      There are two ways how the page in the iframe can communicate with the parent to send e.g. the height:
      
      <ol>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" target="_blank">window.postMessage</a> - Pro version only. Now the default for new installations.</li>
        <li>hidden iframe - <a href="#" onclick="jQuery('#details-workaround').show(); return false;" >Show me more infos how the iframe communication way works.</a></li>
      </ol>
              
        
      <div id="details-workaround" >If the parent page (the page where the iframe is) and the iframe page (the page which is inside the iframe) are NOT on the same domain it is only possible to do the above stuff by including an additional iframe to the remote page which than can call a script on the parent domain that can then access the functions there. A detailed documentation how this works is described here:
      <p>
        <a target="_blank" href="http://www.codecouch.com/2008/10/cross-site-scripting-xss-using-iframes/">http://www.codecouch.com/2008/10/cross-site-scripting-xss-using-iframes</a> - This plugin does wrap everything that is described there. Simple follow the steps below.
      </p>The following steps are needed:
      <ol>
        <li>The parent page has a Javascript function that resizes the iframe</li>
        <li>The external iframe page has an additional hidden iframe, an onload attribute at the body and a javascript function</li>
        <li>A page on the parent domain does exist that is included by the hidden iframe that calls the function on the parent page</li>
      </ol></div><p>Using window.postMessage has the following advantages/disadvantages</p>
    <ul>
     <li> + The external workaround does also work when https pages are included to http pages! (See example 53)</li>
     <li> + You can include the same iframe page into several parents much easier!</li> 
     <li> + Additional data can be transferred as no browser url restrictions do apply (See example 52)</li>
     <li> + No additional hidden iframe has to be added to the page.</li>
     <li> - Not supported by IE <= 8</li>
    </ul>
    
    <p>
     One advantage of the iframe communcation is that by default you see the callbacks to height.html in the network. So is was always easy to debug out of the box. window.postMessage by default is not visible like that. If you have any problems with window.postMessage select "Debug" at "Use postMessage communication" and log information about the transfered data is printed to the browser console. Use F12 at your browser to open the developer tools. 
    </p>
    
    <p>When the first version plugin was planned the percentage of browsers that not supported window.postMessage was ~20%. But now this has changed. The latest browser statistics show that IE <= 8 browsers have dropped to ~ 0.2%. And as many websites do not support such old browsers either the new default is now window.postMessage for new pro installations.
    </p><p>Existing installations can switch to window.postMessage by changing this in the administration and save it. But you still can use the old way as it works fine as well.
             
    </p><br />
</div> <div>
  <div id="icon-options-general" class="icon_ai">
    <br>
  </div><h2>
    Wordpress Flash Uploader, TinyWebGallery, Joomla Flash Uploader</h2>
  <p>
    This plugin is the extract for the iframe wrapper which was written for the TinyWebGallery. I needed an iframe wrapper that could do more than simply include a page. It needed to pass parameters to the iframe and modify the template on the fly to get more space for TWG. If you want to integrate TWG please use the "TinyWebGallery wrapper". It offers specific features only needed for the gallery. I hope this standalone wrapper is useful for other Wordpress users as well.  </p>
  <p>
    Please take a look at my other projects: Wordpress Flash Uploader, TinyWebGallery, Joomla Flash Uploader or TWG Flash Uploader. If you like TWG or one of my other projects like JFU, WFU or TFU you should consider registering,  because you can use all products with one single license, get all features of the gallery and a complete upload solution as well.  </p>
  <p>
    Please go <a href="http://www.tinywebgallery.com" target="_blank">www.tinywebgallery.com</a> for details.  </p>
</div></section><section id="section-quickstart" class="tab_0"><br/>
      <div>
      <div id="icon-options-general" class="icon_ai">
      <br>
      </div><h2>Advanced iFrame Pro - Quickstart guide, plugin options, widget, vote for the plugin on codecanyon</h2><h3>Quick start guide</h3>
 <p>
      <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-video-tutorials" target="_blank" id="vid" class="button-primary">Show me the quickstart video</a>    
</p>

<p>To include a web page to your page please check the following things first:</p>
<ul>
<li>- Check if your page you want to include is allowed to be included:<br />&nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker">http://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker</a>!</li>
<li>- Check if the iframe page and the parent page are one the same domain. www.example.com and text.example.com are different domains!</li>
<li>- Can you modify the page that should be included?</li>
</ul>
<p>Most likely you have one of the following setups:</p>
<ol>
<li>iframe cannot be included: You cannot include the content because the owner does not allow this. </li>
<li>iframe can be included and you are on a different domain: See the <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-comparison-chart" target="_blank">feature comparison chart</a> and the <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-features-availability-overview" target="_blank">features availability overview</a>. To resize the content to the height/width or modify css you <strong>need to modify the remote iframe page</strong> by adding one line of Javascript to enable the provided workaround.</li>
<li>Iframe can be included and you are on the same domain: All features of the plugin can be used.</li>
</ol><p>To enter a simple iframe please go to the administration and follow the instructions on the basic settings tab. There you can either use a basic shortcode and set the settings in the administration or overwrite the settings directly in the shortcode. Please also read the <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq" target="_blank">FAQ</a> and look at the <a href="http://www.tinywebgallery.com/blog/advanced-iframe/demo-advanced-iframe-2-0" target="_blank">free</a> and <a href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo" target="_blank">pro examples</a>.</p><p>Advanced users that have their own server might also setup a reverse proxy if the iframe page is on a different domain and cannot use the external workaround. See <a href="http://www.tinywebgallery.com/blog/using-a-reverse-proxy-to-enable-all-features-of-advanced-iframe-pro" target="_blank">this blog</a> for details.<br />If you mix http and https read <a href="http://www.tinywebgallery.com/blog/iframe-do-not-mix-http-and-https" target="_blank">this blog</a>. Parent https and iframe http does not work on all browsers!</p><h3 class="hide-print">Plugin options</h3><table class="form-table hide-print">
      <tr>
      <th scope="row" >Show this section as last tab</th>
      <td><span class="hide-print">
      <input type="radio" id="donation_bottom1" name="donation_bottom" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="donation_bottom2" name="donation_bottom" value="false" /> No<br>
    </span><p class="description"><strong class="move-bottom">You can show this tab as last tab after you have read it. Then the basic tab is shown first.</strong></p></td>
    </tr>
    
      <tr>
      <th scope="row" >Check shortcode</th>
      <td><span class="hide-print">
      <input type="radio" id="check_shortcode1" name="check_shortcode" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="check_shortcode2" name="check_shortcode" value="false" checked="checked"/> No<br>
    </span><p class="description"><strong class="move-bottom">If you enable this the plugin does check if the shortcode attributes are known. You will find typos, wrong quotes and missing spaces. It does not check the values! The only reason this is not enabled by default is to make sure that old shortcodes don't show a warning after an update! I stongly recommend to enable this setting!</strong></p></td>
    </tr>
    
      <tr>
      <th scope="row" >Enable expert mode</th>
      <td><span class="hide-print">
      <input type="radio" id="expert_mode1" name="expert_mode" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="expert_mode2" name="expert_mode" value="false" checked="checked"/> No<br>
    </span><p class="description">If you enable the expert mode the description is only shown if you click on the label of the setting. You see more settings at once but only one description at once. Also the padding between the table rows are reduced a lot. So you see a lot of more settings on one screen. Use this if you are common with the settings.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Use footer save button</th>
      <td><span class="hide-print">
      <input type="radio" id="single_save_button1" name="single_save_button" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="single_save_button2" name="single_save_button" value="false" /> No<br>
    </span><p class="description">The new default is that the save button is in a sticky footer. I was testing this for all major browsers but not for all worpress versions. So if this does not work for your version set this to false to get one save button for each section.</p></td>
    </tr>
    
      <tr>
      <th scope="row">Use accordeon menu on the advanced tab</th>
      <td>
      <select name="accordeon_menu">
         <option value="false"  >No Accordeon menu on the advanced tab</option><option value="no"  >Accordeon menu on the advanced tab. No section is open by default.</option><option value="h1-as"  >Section &#039;Advanced settings&#039; is open by default</option><option value="h1-so"  selected="selected" >Section &#039;Show only a part of the iframe&#039; is open by default</option><option value="h1-rt"  >Section &#039;Resize the iframe to the content height/width&#039; is open by default</option><option value="h1-mp"  >Section &#039;Modify the parent page&#039; is open by default</option><option value="h1-ol"  >Section &#039;Open iframe in layer&#039; is open by default</option>
      </select>
    <br>
    <p class="description">The accordeon menu on the advanced tab does not show the different sections in one big page but does only show the sections you open. You can define the default section which is open by default here also. Sections do not close if you open another one because sometimes is is useful to open several sections at once. Also the quick jump links at the top are removed because they do not make sense then anymore. The menu is used after you saved this setting. Only important sections are offered in the dropdown.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Alternative shortcode</th>
      <td><span class="hide-print">
      <input name="alternative_shortcode" type="text" id="alternative_shortcode" value=""  /><br></span>
      <p class="description">You can define an alternative shortcode the plugin should evaluate. This is e.g. useful if you chance/upgrade from iframe to advanced iframe (pro). Simply insert "iframe" in the text field. Most if the parameters do already match! Make sure to deactivate the other plugin that used the shortcode. With using iframe also the BBCode [iframe]url[/iframe] is supported. IMPORTANT: If you use this, security codes are NOT checked anymore. So anyone who can e.g. write a post can also insert an iframe!</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Show plugin in main menu</th>
      <td><span class="hide-print">
      <input type="radio" id="show_menu_link1" name="show_menu_link" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="show_menu_link2" name="show_menu_link" value="false" /> No<br>
    </span><p class="description">Show the "Advanced iFrame Pro" Menu link also in the main menu. If set to "False" it is only shown in the settings menu.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Allow shortcode attributes</th>
      <td><span class="hide-print">
      <input type="radio" id="shortcode_attributes1" name="shortcode_attributes" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="shortcode_attributes2" name="shortcode_attributes" value="false" /> No<br>
    </span><p class="description">Allow to set attributes in the shortcode. All of the attributes can be overwritten in the shortcode if you set 'Yes'. Otherwise the settings you specify here are used.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Use shortcode attributes only</th>
      <td><span class="hide-print">
      <input type="radio" id="use_shortcode_attributes_only1" name="use_shortcode_attributes_only" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="use_shortcode_attributes_only2" name="use_shortcode_attributes_only" value="false" checked="checked"/> No<br>
    </span><p class="description">All iframes you use in your pages use the administration. With shortcode attributes you can overwrite these settings. When you use several iframes with different settings this can lead to strange behavior because you do not see the whole configuration in the shortcode. By setting this option to true only the parameters defined as attributes are used. You can set this for a single iframe as well with the shortcode attribute use_shortcode_attributes_only="true". Shortcode attribute: use_shortcode_attributes_only="true" or use_shortcode_attributes_only="false"</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Include ai.js in the footer</th>
      <td><span class="hide-print">
      <input type="radio" id="include_scripts_in_footer1" name="include_scripts_in_footer" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="include_scripts_in_footer2" name="include_scripts_in_footer" value="false" /> No<br>
    </span><p class="description">By default the needed Javascripts are included at the footer. So you can include jQuery also at the footer if you like. If you like/need it in the header set this value to false. Before Wordpress 3.3 jQuery is needed in the header if you want to use lazy-loading! The ai.js has also to be in the footer if it should only be loaded when the shortcode is on the page. This setting cannot be set as shortcode! There is an additional shortcode attribute called include_scripts_in_content="true". This is only needed in the special case if you use the page with content only (like using the plugin "Show Content Only" with "Content + Styles" mode). Then ai.js is directly rendered before the iframe. See demo <a target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/demo-advanced-iframe-2-0/same-domain-wrapped-auto-height">wrapped auto height</a>.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Load jQuery as dependency</th>
      <td><span class="hide-print">
      <input type="radio" id="load_jquery1" name="load_jquery" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="load_jquery2" name="load_jquery" value="false" /> No<br>
    </span><p class="description">By default jQuery is loaded as dependeny. If you have a theme or another plugin that does not stick to the Wordpress way to load the scripts you might have to disable the dependeny. This avoids that jQuery is loaded again and other plugins do maybe not work anymore.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Editor button</th>
      <td><span class="hide-print">
      <input name="editorbutton" type="text" id="editorbutton" value="securitykey"  /><br></span>
      <p class="description">With this setting you can add an "advanced iframe" button to the text editor of Wordpress. The button does add the shortcode with the current security code if set + the settings you define. You can use any setting from the administration. By default src,width,height is used. The securitykey is additionally rendered if you specify one. If you leave this setting empty the button is not shown.</p></td>
      </tr>
      
      <tr>
      <th scope="row" >Enable content filter<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/share-content-from-your-domain-content-filter" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="enable_content_filter1" name="enable_content_filter" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="enable_content_filter2" name="enable_content_filter" value="false" /> No<br>
    </span><p class="description">This feature does not render an iframe. It gives you the option to filter the content of your page by an id. So you can offer parts of your page that then can be included into any iframe. You only need to specify the id of the element you want to show with the parameter ?ai-show-id-only=id. If you only specify this parameter the whole page is loaded and then with Javascript all other elements are hidden. If you add ai-server-side=1 to the url the content is filtered on the server side but this only works for elements which are in the content area because everything else depends on the template. By default overflow (scrolling) is hidden inside the iframe. If you like that scrollbars are shown if needed add &ai-show-overflow=1 to the url. Also check "Add ai_external.js local" as this actually the even more powerfull solution but more complicated to setup. So try what fits best to your needs! Also the height of the content is sent to the parent by a post message. Please see the <a target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/share-content-from-your-domain-content-filter">demo</a> how you can use this and code you need to include to use this the optimal way.</p></td>
    </tr>
    
      <tr>
      <th scope="row">Add ai_external.js local<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/share-content-from-your-domain-add-ai_external-js-local" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="add_ai_external_local1" name="add_ai_external_local" value="true"  /> Site&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="add_ai_external_local2" name="add_ai_external_local" value="admin" /> Admin&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="add_ai_external_local3" name="add_ai_external_local" value="all" /> All&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="add_ai_external_local4" name="add_ai_external_local" value="false" checked="checked"/> No<br>
    </span><p class="description">The setting does add the ai_external.js to your own site. This enables you to provide parts of your site into an external iframe or use the external workaround for the same domain. This is simelar to "enable_content_filter" where you can filter parts of your page. The advantage of this solution is that you can use all css modifications and auto height of this solution. Also resize of element resize does work here. Also this works on included links if they still stay on the page. The disadvantage is that it is more complecated to setup then "enable_content_filter" and only one configuration is supported automatically. Also the height of the content is sent to the parent by a post message. If you like to include the script only to a single page use the shortcode [ai_advanced_js_local] to your page. Then the script will be included to your footer. You can even add custom settings like described on the external workaround page by adding a script to the content. You can enable this for the site, the admin pages or both. Please see the <a target="_blank" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/share-content-from-your-domain-add-ai_external-js-local">demo</a> how you can use this and code you need to include to use this the optimal way.</p></td>
    </tr>
    
      <tr>
       <th scope="row">Debug Javascript<a target="new" href="http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/debug-javascript-example" class="ai-eye" alt="Show a working example" title="Show a working example">Show a working example</a></th>
      <td><span class="hide-print">
      <input type="radio" id="debug_js1" name="debug_js" value="false" checked="checked" /> No&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="debug_js2" name="debug_js" value="bottom" /> Bottom of page<br></span>
    <p class="description">You can enable that most messages from the Javascript console are shown in a debug div which shown at the bottom of the page. This is very useful if you have problems on Android or IOS because there it is quite hard to get on the infos displayed in the Javascript log. Important: You need to use the external workaround with postMessage set to debug(!) (see the external workaround tab) if you also want to get the messages from the page in the iframe! Also the current user agent, the headers and a basic iframe check of the first found iframe are printed into the debug log. Click on the debug area to enlage and shrink it. Shortcode attribute: debug_js="no/bottom"  </p></td>
    </tr>
    
      <tr>
      <th scope="row" >Check Url on load</th>
      <td><span class="hide-print">
      <input type="radio" id="check_iframe_url_when_load1" name="check_iframe_url_when_load" value="true"  /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="check_iframe_url_when_load2" name="check_iframe_url_when_load" value="false" checked="checked"/> No<br>
    </span><p class="description">By default the url on the basic tab is checked if it can be included into an iframe. Some servers do block this feature and the administration does fail then. If this is the case the plugin does disable this check and "Check iframes on save" automatically. You can enable this feature again if you allow curl calls on your server.</p></td>
    </tr>
    
      <tr>
      <th scope="row">Check iframes on save</th>
      <td><span class="hide-print">
      <input type="radio" id="check_iframes_when_save1" name="check_iframes_when_save" value="error"  /> Check for errors only&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="check_iframes_when_save2" name="check_iframes_when_save" value="warning" /> Check for errors and warnings&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="check_iframes_when_save3" name="check_iframes_when_save" value="false" checked="checked"/> Do not check iframes on save<br></span>
    <p class="description">You can define if you show errors only, errors and warnings or if iframes are not checked at all at save. Some servers do block this feature and you get a blank page on save once. If this is the case the plugin does disable this check automatically. You can enable this feature again if you allow curl calls on your server.</p></td>
    </tr>
    
      <tr>
      <th scope="row" >Check all iframes once a day</th>
      <td><span class="hide-print">
      <input type="radio" id="check_iframe_cronjob1" name="check_iframe_cronjob" value="true" checked="checked" /> Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="check_iframe_cronjob2" name="check_iframe_cronjob" value="false" /> No<br>
    </span><p class="description">You can automatically check all iframes of your site once a day. IF you upgrade from an older version please deactive and active the plugin once to get the cronjob setup properly! The same function like  on the "Basic" tab -> Url -> "Check all iframes" is triggered here. Be aware that default wordpress cronjobs are triggered by the user that hits the next execution time and therefore this user has to wait until this checkis done! In the status e-mail you find also how long the check needed. Because of this performance impact the cron job check only checks until an error happens. So please go to the administration if you get an e-mail for a full check! If the checks of your iframes takes longer than 5 sec. I recommend to switch to a native cronjob if possible. Google for "wordpress cronjob replace" and also add your hoster! Because native cronjobs can not be created everywhere and also often depends on your package. To test cronjobs you can e.g. use the plugin "WP Crontrol" where you can simply execute this cronjob.</p></td>
    </tr>
    
      <tr>
      <th scope="row" class="i-20-" >Check iframe cronjob email</th>
      <td><span class="hide-print">
      <input name="check_iframe_cronjob_email" type="text" id="check_iframe_cronjob_email" value=""  /><br></span>
      <p class="description">You can define an alternative e-mail the iframe status check is sent to. If you leave this field empty the admin e-mail from "Settings -> Email Address" is used. You can define several e-mails seperating them by ",".</p></td>
      </tr>
      
      <tr>
      <th scope="row">Minimum user role</th>
      <td>
      <select name="roles">
          <option value="none">Default restrictions</option>
	<option value='subscriber'>Subscriber</option>
	<option value='contributor'>Contributor</option>
	<option value='author'>Author</option>
	<option value='editor'>Editor</option>
	<option value='administrator'>Administrator</option>  
      </select>
    <br>
    <p class="description">You can define the minimum user role a user needs to use the advanced iframe plugin. This limits the access to the administration, the editor button and if a user can edit a page with a advanced iframe shortcode. If a page with an advanced iframe is detected and the rights are not sufficient an error message is displayed and the user can not edit the page! A user with insufficient rights still can add the shortcode if he has the security code! This settings only works optimal for the 5 default user roles as it depends on the order of roles! So please check if this settings works for you if you have additional roles! Default restrictions means that the administration is only shown for administrators and the editor button for everyone who can edit a post/page. This setting can only be changed by an administrator!</p></td>
    </tr>
    </table><p><p class="button-submit">
        <input class="button-primary" type="submit" name="update_iframe-loader" value="Update Settings"/></p>
   <h3>Warning: Illegal copies of Advanced iFrame Pro</h3>
   <p>
   Unfortuatelly for most good plugins on codecanyon also illegal versions can be found in the internet. Please make sure you got your version from codecanyon. Very often, the scripts are modified and allow hackers to access your server. These are very dangerous to use! I already found hacked versions with backdoors!<br />
   </p><p>
   The only offical version of Advanced iFrame Pro can be found here: <a href="http://codecanyon.net/item/advanced-iframe-pro/5344999?ref=mdempfle" target="_blank">http://codecanyon.net/item/advanced-iframe-pro/5344999</a>  
   </p>
   <p>
   Thank you.
   </p><h3 class="hide-print">Advanced iFrame Pro Widget</h3><p class="hide-print">The pro version also does offer a widget where you can include the iframe. The usage is really simple. Go to Appearance -> Widgets and insert the shortcode you would normally put into a page into the text field of the "Advanced iFrame Pro Widget" .</p><h3>Vote for the plugin</h3><p>Thank you for getting Advanced iFrame Pro at Codecanyon.<br/>Please feel free to leave an item rating from your items download page if you haven't already done so.</p><p>Please get in contact with me if you have problems because most of the issues are easy to solve. But at least tell me what you did not like so I can improve this. Also make sure that you took a look at the quick start guide to make sure the feature you like can be used!</p></div></section></div>
    
<div id="wpadminbar" class="wp-core-ui ai-save-bar">
        <div>
                   <div id="updated_text" style="visibility:hidden;">Settings updated.</div> 
        <input type="hidden" name="action" id="action" value="update">
        <input id="wpbarbutton" class="button-primary" type="submit" name="update_iframe-loader" value="Update Settings"/>  <input id="wpresetbutton" class="button-secondary confirmation" name="update_iframe-loader" onclick="resetAiSettings();" type="submit" value="Reset Settings" />
        </div>
        
      
</div> 
<input type="hidden" id="scrollposition" name="scrollposition" value="0">   
</form>
</div>
<script type="text/javascript">
jQuery(function() {
  initAdminConfiguration(true,"h1-so");  
    document.getElementById('tab_1').click(); 
  setTimeout(function() {
    jQuery(document).scrollTop(0);
    accTime = 400;
  }, 100);
});
</script>

<div id="wpfooter" role="contentinfo">
		<p id="footer-left" class="alignleft">
		<span id="footer-thankyou">Thank you for creating with <a href="https://wordpress.org/">WordPress</a>.</span>	</p>
	<p id="footer-upgrade" class="alignright">
		Version 4.9.8	</p>
	<div class="clear"></div>
</div>
            <script type="text/javascript">
                (function ($) {
                    $(document).ajaxSend(function (event, jqxhr, settings) {
                        if (settings.url &&
                            -1 < settings.url.indexOf('admin-ajax.php') &&
                            ! ( settings.url.indexOf( '_fs_blog_admin' ) > 0 )
                        ) {
                            if (settings.url.indexOf('?') > 0) {
                                settings.url += '&';
                            } else {
                                settings.url += '?';
                            }

settings.url += '_fs_blog_admin=true';

}
                    });
                })(jQuery);
            </script>
            <script type="text/javascript">
//<![CDATA[
	jQuery( '#ep_explain_more' ).hide();
	jQuery( '#ep_toggle_more' ).click( function() {
		jQuery( '#ep_explain_more' ).toggle();
		return false;
	} );
//]]>
</script>	<div id="wp-auth-check-wrap" class="hidden">
	<div id="wp-auth-check-bg"></div>
	<div id="wp-auth-check">
	<button type="button" class="wp-auth-check-close button-link"><span class="screen-reader-text">Close dialog</span></button>
			<div id="wp-auth-check-form" class="loading" data-src="http://www.tinywebgallery.com/blog/wp-login.php?interim-login=1&#038;wp_lang=en_US"></div>
			<div class="wp-auth-fallback">
		<p><b class="wp-auth-fallback-expired" tabindex="0">Session expired</b></p>
		<p><a href="http://www.tinywebgallery.com/blog/wp-login.php" target="_blank">Please log in again.</a>
		The login page will open in a new window. After logging in you can close it and return to this page.</p>
	</div>
	</div>
	</div>
	<link rel='stylesheet' id='aiosp_admin_style-css'  href='http://www.tinywebgallery.com/blog/wp-content/plugins/all-in-one-seo-pack/css/aiosp_admin.css?ver=2.5' type='text/css' media='all' />

Ubuntu

Sid Gifari From Gifari Industries - BD Cyber Security Team