Menu
Let's say i have an iframe with the page 2.htm set as the src.
<iframe src="2.html"></iframe>
So this shows the 2.html. But 2.html has a div with the id 'within'. I want to only display the contents of 'within'.
How would i do this?
681
The most direct way to do what you want is to have your server give you a complete page that only contains the fragment you want to show. As an alternative, you could just use a simple <div> and use the jQuery load function to load the whole page and pluck out just the section you want: $('#target-div').
Approach 1: For adding additional div's in an iframe, you need to use a wrapper div, that wraps the contents of your intended div and the iframe into one unit. This way you can display the contents of your div along with the iframe embedding to the document/webpage.
Iframes Bring Security Risks. If you create an iframe, your site becomes vulnerable to cross-site attacks. You may get a submittable malicious web form, phishing your users' personal data. A malicious user can run a plug-in.
The div can be overlayed over iframe using z-index and absolute positioning. Iframe should have z-index lower than the div having class as overlay. Style the overlay div to the same height and width as the iframe, so that it does not affect the functionality of any other divs.
This is the CSS and html code to accomplish the task:
<style>
#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}
</style>
<div id="outerdiv">
<iframe src="2.html" id="inneriframe" scrolling="no"></iframe>
</div>
Try this out: http://jsfiddle.net/57MRn/
How does this work
The iframe is moved up within the outerdiv until only the within div is shown.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
