Hide a part of the iframe

This examples show the "Hide a part of the iframe" features which only available in the pro version of the advanced iframe.

With this feature you can place one or several divs over an iframe. This can be used to e.g. hide an area of by placing a div with the background color over this section. You can even place your own images in this div by specifying a background image. The two examples below show both options.

• Example 8: Hide some areas of the remote page
• Example 9: Place your own logo on a remote page
• Example 21: Make an iframe readonly
• Example 44: Include external html with shortcode and right/bottom alignment (New 7.1)
• Example 45: Hide a footer (New 7.1)
• Example 50: Using media queries to make the divs responsive (New 7.3)

Please note:
The plugin does officially support the usage of fixes sized divs. Making this divs responsive for different devices is possible only with deeper css knowhow. The codecanyon support does not include custom solutions here. If you need help simply contact me directly and ask for a quote.

To make it easier to copy/paste the examples most examples are fully configured in the shortcode directly. I use use_shortcode_attributes_only="true" that none of the settings from the administration are used.

Example 8: Hide some areas of the remote page

This example shows how to hide several areas of a remote page. If you don't have access to a remote page and the "Show only a part of the iframe" option would cut away parts you don't like you can place a div with a color you define over the iframe page. As example page www.tinywebgallery.com is used. In the example I don't use while or black divs because you cannot see them then ;). The divs hide are placed over the logo, the language selector and the google ads. New 6.4: The logo also has a link with target _blank defined to the original page. See the original page tinywebgallery.com. A nice new feature of 7.5.2 is that elements are only shown for a specific time. So if you add e.g. $hide10000 to the color this div will hide after 10 seconds. Also transparent rgb colors are now supported. This makes e.g. sense if you want to hide something which also is only shown for a short period if time or if you like to show e.g. a message for your users.
You should only use this feature if you don't use any scrollbars in the iframe because the extra divs don't scroll!

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com" id="advanced_iframe_8" height="300" width="800" scrolling="no" hide_part_of_iframe="34,9,91,85,rgba(255§255§0§0.5)$hide10000,10,http://www.tinywebgallery.com,_blank|535,5,259,72,#ff00ff,10|63,145,37,18,#ff9900,10" hide_page_until_loaded="true" show_iframe_loader="true"]

Example 9: Place your own logo on a remote page

This example shows how to place your own image on a remote site. You should of course only do this if you are sure that you are allowed to do this. In the next example the tinywebgallery logo is hidden and a grayscale image is placed there instead. Also the language flag ist hidden with a white div. See the original page tinywebgallery.com.
You should only use this feature if you don't use any scrollbars in the iframe because the extra divs don't scroll!

Also you can do some more fancy stuff here! e.g. if you want to center the logo e.g.  calc(50% - 45px),9,91,85 can be used!

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com" id="advanced_iframe_9" height="300" width="800" scrolling="no" hide_part_of_iframe="34,9,91,85,transparent;background-image:url(/img/TinyWebGallery_logo_80x80_gray.png);background-repeat:no-repeat;background-position:5px 1px;,10|63,145,37,18,#ffffff,10" hide_page_until_loaded="true"]

Example 21: Make an iframe readonly

New version 5.6:
This example shows how to make an iframe readonly by placing a transparent div over the whole iframe. Please try to click on the iframe. None of the links should work. The interesting thing here is that height and width are set to 100% which does cover the whole iframe then.

Please also check example 8! You can also put a link over the "read only" iframe to link to a different location.

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com" id="advanced_iframe_21" height="300" width="800" scrolling="no" hide_part_of_iframe="0,0,100%,100%,transparent,10"]

Example 44: Include external html with shortcode and right/bottom alignment

This example shows how to include custom html into the div. The html is stored in the advanced-iframe-custom folder and in the config you need to provide the key of this file: hide_<key>.html. Also shortcodes are supported in the custom html. In the example below [yasr_visitor_votes size="small"] is used. The key is attached with $key to the backround style e.g. #ff00ff$123.
Also you see below that the div can be aligned right and bottom. This is done by providing the prefix r for right and b for bottom.

A new feature of 7.5.2 is that if you click on the div this is hidden again. This can be used to display a message before the iframe can be used.

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com" id="advanced_iframe_44" height="300" width="800" scrolling="no" hide_part_of_iframe="r0,b0,459,172,#ff00ff$123$hide,10"]

Example 45: Hide a footer

This example shows how you can hide a header and a footer even if you don't have access. In this example I use the "Show only a part of the iframe" feature with scrolling to hide the header and a pink "Hide a part of the iframe " div to hide the footer. If you would use a white div than you would hardly see this. I even use a negative margin at the bottom to move the normal text over the "hidden footer". Also zoom is supported! Please note that if you navigate between pages and the content of the page is getting smaller you still can see the footer then! For removing a footer which is at different heights you need to use the external workaround!

Example 50: Using media queries to make the divs responsive

This example is identical to the first div of example 8 except that there are media queries used to modify the divs depending on the browser size. Please note that this is an advanced topic where you need css knowhow. If you have no idea what media queries are please read some tutorials about this topic first. e.g. http://www.w3schools.com/css/css_rwd_mediaqueries.asp. The included codecanyon support does not include that I teach you css! In the example below an external css file is included which you can generate on the  "Add/include files" tab.

The interested part is the id. The divs have unique ids. This is always #wrapper-div-element-<id>-<number of div starting with 0>. So in our case this is #wrapper-div-element-advanced_iframe_47-0. Please note that this id is available since version 7.3!

In this example it looks like this:

@media only screen and (max-width: 600px) { /* below 600 px */
#wrapper-div-element-advanced_iframe_47-0 {
width: 200px !important;
height:300px !important;
background-color: #448833 !important;
}
}
@media only screen and (max-width: 1000px) and (min-width: 601px) { /* 601px - 1000px */
#wrapper-div-element-advanced_iframe_47-0 {
width: 500px !important;
height:100px !important;
background-color: #884488 !important;
}
}

2 things are important

1. You need to use !important everywhere as otherwise media queries do not overwrite inline css!
2. As !important is used you need to always need to define ranges that do not overlap. So in the example above: (max-width: 1000px) and (min-width: 601px)

Please resize your browser an see how the size an the background color does change.

See the original page tinywebgallery.com.

You should only use this feature if you don't use any scrollbars in the iframe because the extra divs don't scroll!

[advanced_iframe securitykey="your shortcode" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com" id="advanced_iframe_47" height="300" width="800" scrolling="no" hide_part_of_iframe="34,9,91,85,#ffff00,10,//www.tinywebgallery.com,_blank" hide_elements=".info,#sidebar" hide_page_until_loaded="true" show_iframe_loader="true" content_id="#main" content_styles="margin-top:0px;width:910px" additional_css="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/custom_media_query_hide.css"]

Have fun using Advanced iFrame Pro,Michael