Positioning the content inside an iframe, to just show part of it, can be useful for a number of things, from clickjacking to showing selected third party content on your site.
Other methods I’ve used to position content inside an iframe were extremely temperamental, often throwing up errors like “Unsafe javascript attempt to access frame” or “Origin null is not allowed by Access-Control-Allow-Origin”.
This method uses simple CSS and should be cross-browser compatible.
Two things to remember when using this method is that if the layout of the page within the iframe changes, you’ll also need to update your margins and secondly, you may need to adjust the margins based on the users browser.
As a proof of concept, I used the code below to show only the star rating of a product from an Amazon review page – since this data is no longer available via the API.
Sample code – Positioning Amazon review page within iframe
<strong>Original iframe</strong> <iframe style="border: 1px solid red;" src="http://www.amazon.co.uk/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending" width="320" height="240"></iframe> <strong>Content inside iframe positioned:</strong> <div style="border: 1px solid red; width: 70px; height: 20px; overflow: hidden;"><iframe style="width: 400px; height: 800px; margin-top: -200px; margin-left: -200px;" src="http://www.amazon.co.uk/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending" width="320" height="240"></iframe></div> <span style="color: red;">*Red border added for illustration effect</span>