Show only a part of the iframe

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

If you are not on the same domain and you are not able to modify the external page you want to include than the only option you have is to use the pro version and include only a part of the iframe. For this solution you need to specify the size if the iframe and also a "viewport" that defines which area you want to show. The following examples with the used shortcodes can be found on this page:

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 1: Show a read only part of a remote page

See the example below where I only include the download statistics of advanced iframe on wordpress.org. See the full page here: http://wordpress.org/plugins/advanced-iframe/stats/. Please note: WordPress added the X-Frame-Options and this does not allow to include this page anymore. I have made a screenshot and included this on my example domain. This does not make a difference for the configuration but always be aware that the page you want to include can set this header!

Loading


This is the shortcode for this:
[advanced_iframe securitykey="your key" src="http://examples.tinywebgallery.com/example1u2/screenshot.html" use_shortcode_attributes_only="true" id="example1" height="2000" width="1000" show_part_of_iframe="true" show_part_of_iframe_x="290" show_part_of_iframe_y="650" show_part_of_iframe_width="550" show_part_of_iframe_height="320" hide_elements=".info,#sidebar" content_id="#main" content_styles="margin-top:0px;width:910px" show_iframe_loader="true"]

Example 2: Show another read only part of the remote page of example 1

This is from the same page but a different area. Please note: WordPress added the X-Frame-Options and this does not allow to include this page anymore. I have made a screenshot and included this on my example domain. This does not make a difference for the configuration but always be aware that the page you want to include can set this header!

Loading


This is the shortcode for this:
[advanced_iframe securitykey="your key" src="http://examples.tinywebgallery.com/example1u2/screenshot.html" use_shortcode_attributes_only="true" id="example2" height="2000" width="1000" show_part_of_iframe="true" show_part_of_iframe_x="190" show_part_of_iframe_y="1050" show_part_of_iframe_width="550" show_part_of_iframe_height="160" show_iframe_loader="true"]

Example 3: Use a different viewport after a user interaction

Often you include a page with links or a login form. After clicking on a link or submitting the form another page is shown. But the parent does not know what happens inside an iframe. It does not know to which url the user goes after a click ao a submit. The parent only knows that something has happend. So if you know what does happen and you need a different area of the new page you can define this in advanced iframe pro by setting a new viewport. And you can also tell ai pro also to loop between the defined viewports. This examples also use lazy loading with fadein.

As example I use 2 thumbnails which are on a different page. When you click on one of the thumbnails a bigger detail view is shown. If you click on the back link below the big image the view jumps back to the thumbnails.

This is the shortcode for this:
[advanced_iframe securitykey="your key" src="http://examples.tinywebgallery.com/example3u4/example.html" use_shortcode_attributes_only="true" id="example3" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="230" show_part_of_iframe_y="280" show_part_of_iframe_width="250" show_part_of_iframe_height="130" show_part_of_iframe_next_viewports="230,90,400,360" show_part_of_iframe_next_viewports_loop="true" enable_lazy_load="true" enable_lazy_load_threshold="200" enable_lazy_load_fadetime="5000"]

Another example would be a login form where you get a confirmation page with a different size after entering you data. This example only shows the "good" way. Because most login forms also provide an error message you have 2 possible workflows: User enters valid data and comes to the confirmation page. Or the user does enter invalid data and stays on the login page. Because the parent does not know what has happens only workflow can be configured. So you always have to remember that there is not 100% solution possible. See the external iframe page here.

This is the shortcode for this:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="http://examples.tinywebgallery.com/example3u4/example.html" id="example3a" height="600" width="800" show_part_of_iframe="true" show_part_of_iframe_x="21" show_part_of_iframe_y="213" show_part_of_iframe_width="166" show_part_of_iframe_height="136" show_part_of_iframe_next_viewports="573,243,205,128" enable_lazy_load="true" enable_lazy_load_threshold="200" enable_lazy_load_fadetime="5000"]

Example 4: Jumping to a different url after an user interaction

Using this feature enables you to jump to a predefined url after a page change in the iframe is detected. This can e.g. be used the following way: You want to include the login of a certain page to your site. When the user does login the user does not stay inside the iframe but is redirected to an url you specify. This way you can login the user to e.g another of your sites and redirect him there that he can whatever is possible when he is logged in ;).

The example below shows the login window of the TWG demo. If you use the credentials test/test you get automatically logged into TWG and get forwarded to the "Usa(2005)" folder. Look at the right upper corner. There you see that you are already logged in if you use the right login.

This is the shortcode for this:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="http://www.tinywebgallery.com/demo/i_frames/i_login.php?twg_album=08_Usa%282005%29" id="example4" height="300" width="300" show_part_of_iframe="true" show_part_of_iframe_x="5" show_part_of_iframe_y="5" show_part_of_iframe_width="280" show_part_of_iframe_height="160" show_part_of_iframe_new_window="_top" show_part_of_iframe_new_url="http://www.tinywebgallery.com/demo/twg_image/08_Usa%282005%29/CIMG2797.jpg"]

Example 5: Using scrollbars for a view port

You can also enable scrollbars for the view port. This makes it possible to e.g. show a very long website inside your website and remove the header or the side parts. The example below shows the feature page of TinyWebGallery without the header, the left and the right column. See the full page here: http://www.tinywebgallery.com/en/features.php. The shortcode was created with the area selector and then the scrollbar was enabled. Select a little bit more because of the scrollbar.
This example does also use the new auto id feature of advanced iframe. If no id is set <default id>_<post id>_<counter> is used as id and name and therefore avoids configuration problems when several iframes are used. This feature does work on ANY domain.

This is the shortcode for this:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="http://www.tinywebgallery.com/en/features.php" id="example5" height="2400" width="960" show_part_of_iframe="true" show_part_of_iframe_x="165" show_part_of_iframe_y="170" show_part_of_iframe_width="650" show_part_of_iframe_height="375" show_part_of_iframe_allow_scrollbar_vertical="true" enable_ios_mobile_scolling="true"]

Example 55: Show different view ports with media queries

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.

This example shows how to include only a part of an iframe with a page that is responsive and has a defined break point where the display changes. By default you define a fixed size for the view port you want to show and I recommend to set the size of the iframe itself also to a fixed size to be sure that always the same area is in the view port.

But if the page in the iframe is also responsive it could make sense to use media queries for the feature also. In the demo below is a calculator that has a break point where all fields are completely shown different if the width decreases. One option of advanced iframe pro is to use zoom. But in this case it makes much more sense to define a different view port. As the whole solution is done with css media queries can be used.

Please resize your browser and you see that at 774 px the iframe height and the view port are changed!

The external css /custom_media_query_show_part.css contains the following lines:

@media only screen and (max-width: 874px) { /* below 874px */
    #ai-div-advanced_iframe {
      height:1205px !important; 
    }
     #advanced_iframe {
       height:2000px !important;
     }   
}

Important:

  1. The break point is NOT the break point inside the iframe but the size of the parent!
  2. The id of the view port is #ai-div-<id of the iframe>
  3. You need to use !important everywhere as otherwise media queries do not overwrite inline css!
  4. As !important is used you need to always need to define ranges that do not overlap. In this example this is no problem as only one break point does exist.

Only the size of the iframe and the view port container are changed. You have to adopt the numbers to your layout.

And the shortcode which is used is:
[advanced_iframe securitykey="your shortcode" use_shortcode_attributes_only="true" scrolling="no" src="http://www.perodua.com.my/calculator" id="advanced_iframe" height="1000" width="100%" show_part_of_iframe="true" show_part_of_iframe_x="0" show_part_of_iframe_y="210" show_part_of_iframe_width="100%" show_part_of_iframe_height="602" additional_css="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/custom_media_query_show_part.css"]

Have fun using Advanced iFrame Pro,

Michael