positioning content of an iframe within a containing div - css

I've got a page which I need to serve via an iframe, but I need to only display part of the page, not the whole thing.
My current code is:
<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>
I thought that the best option would be to serve the iframe within a containing div that has "overflow:hidden" so that it acts like a picture frame. That works, but the problem is that the content I want to show is in the middle of the iframe page and the div is always assuming that 0,0 is the start of the frame. I need to position the iframe so that the div is exactly over the part of the page I want to be visible.
Can I do this?

Use negative values for margin-top and margin-left to position the iframe. Look at the code below:
<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe style="margin-top:-100px;margin-left:-100px" height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>

In the content to appear within the iframe, if you can set an element with an id that marks the very top of the portion of content you want to peak through, then you can set the iframe's src attribute with that anchor on the url
iframe content's HTML:
[a bunch of markup/stuff that you don't want to show]
....
<div id="topOfVisibleArea"></div>
[more markup]
iframe tag:
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/#topOfVisibleArea"
width="500px"></iframe>
UPDATE -- BETTER APPROACH:
Or you can just use absolute positioning on the iframe within the div. You'll need the iframe's height and width to be wider and taller in than the window you're fitting it in to accomodate the offsets.
See this example: http://jsfiddle.net/sNSMw/

<iframe name="itunes" src="http://itunes.apple.com/us/album/threads/id509846713" frameborder="0" width="500" height="600" onload="window.frames['itunes'].scrollTo(250,250)"></iframe>

Trick is all in the iframe style parameters. Placing in additional containers will help with alignment requirements.
<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>
Credit to spamtech.co.uk for the help and examples: http://spamtech.co.uk/tips/position-content-inside-an-iframe/

Related

Uniformly adjust height and width of parent wrapper according to the inner children

I have an Ads campaign web page where I will publish videos or images. I load the content using script. If the fetched content is an image it will be display as shown below.
The image will properly wrap inside the white wrapper.
But, when a video is loaded into the same wrapper it will display as below
Ad contents will be random, it can be any image or video. All types of images with different orientation will fit properly but the video won't.
Videos, will always be in the same width and height.
HTML
When video is loaded
<div class="campaign-wrap">
<div id="ad_area" style="text-align:center;">
<video src="https://video.serve.in/files/video_messi.mp4" onplay="window.V.ads.push({id:380, loaded: true, server:'video.serve.in'})" preload="auto" autoplay="" playsinline="" muted="" controls="" type="video/mp4" id="vid" width="300" height="250"></video>
</div>
</div>
When image is loaded
<div class="campaign-wrap">
<div id="ad_area" style="text-align:center;">
<img src="https://video.serve.in/getad.img?libID=383&placement=ad_area" alt="hello" title="hello" border="0" width="300" height="600">
</div>
</div>
CSS
The style I have added to the parent wrapper is
.campaign-wrap {
margin-bottom: 10px;
width: 100%;
background-color: rgba(255,255,255,0.5);
padding: 10px;
}
The content inside div #ad_area is loaded using script.
How can I uniformly place the Ad inside the wrapper with equal padding all around Or how to adjust the wrapper with respect to the inner content ?
Any advice please.
Thanks in advance.
I would try this:
.campaign-wrap {
display: flex;
align-items: center;
/* ... */
}
Explanation: flexbox is a powerful feature of modern css that solves some formatting issues that have given a lot of problems in the past: one of them is vertical alignment. Compatibility table.

Center an iFrame

http://makememodern.com/portfolio/
You will see that I have embedded a website onto the page and that it is aligned to the right side of the page. I would like it to be centered.
<div style="text-align:center">
<iframe style="-webkit-transform: scale(0.7);" src="http://www.stokeswilliams.com" width="100%" height="700px"></iframe>
</div>
You are setting the width of the iframe as 1100px. The div that's wrapping it has a dynamic width.
To solve it, you can set the width of the iframe to match the width of its parent container, by doing this:
iframe {
width: 100%;
}

Overlap a fixed-position iframe to the very top in CSS

I've inserted an iframe to appear in the bottom right corner of the page, and it's fixed in position. Everything is how I want it except that the iframe seems to be underneath (overlapped by) the other elements on the page, such as the paragraphs etc. How do I get the iframe to be above all the other elements so that users can actually use the iframe (which is simply a chatbox). I would still really like it to be in the bottom right corner in fixed position if possible. Thanks in advance! This is the code I have at the moment:
<iframe src="www.stackoverflow.com" width="240" height="370" frameborder="0" scrolling="0" style="position: fixed; right: 10px; bottom: 10px"></iframe>
Apply z-index to iframe
Like this
<iframe src="www.stackoverflow.com" width="240" height="370" frameborder="0" scrolling="0" style="position: fixed; right: 10px; bottom: 10px; z-index:999;"></iframe>
What about position:absolute ? (Make sure that you declare your iframe code after any potential element that could overlap).
Also, maybe we use some code of your to help you (use something like http://jsfiddle.net)

How to scroll only the iFrame but not the whole window

How do I only scroll within the iFrame, but not the whole window? I want to have text underneath the iFrame, but it's showing up when the text is longer than the iFrame. You can go to www.thesocialscreensaver.com to see what I'm talking about. Thanks!
You can use your iframe in a div, like this :
<div id="iframeINSIDE" style="width: 600px; height: 200px; overflow: hidden;">
<iframe name="abc" style="width: 620px; height: 200px;" src="File.html"></iframe>
I have checked it on Firefox and IE and works fine for both of them.You'll be able to scroll using your mousewheel and by dragging mouse pointer over the div as well.This will scroll only the iframe not whole window.
Check if it works for you.
Newly added: http://jsfiddle.net/TJZT4/10/
To make iframe 100% of webpage, use:
<body>
<iframe src="http://jsfiddle.net/" style="height:100%;width:100%" height="100%" width="100%" frameborder="0" ></iframe>
</body>

Ways to set up a video as a background 'image'

I need to set up a website with a video as the background.
Will I be able to use z-index to position other elements on top of the video? Is there a better alternative?
I have not tested it, but you could try to set width/height of <video> to 100% then using z-index let all the others element stay on top of it...
Edit:
for example to set video as background entire page
<body style="height: 100%;width: 100%">
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video src="" width="100%" height="100%" autoplay>
Your browser does not support the video tag.
</video>
</div>
... rest of your site
You can not apply it as a CSS background (background property). You can give the effect though using layers which is controlled via the z-index property.
If you are using flash as your video playing method no - flash is ALWAYS on top of anything regardless of z-index, But I imagine this could be done by using the new HTML5 <video> tag.
Failing that convert to a high-frame rate animated image and set as BG...

Resources