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>
Related
I am developing an ordering food widget for a restaurant website(Please see the attached picture below). I use iframe to display menus with scroll abled. And i have hide the scroll bar in css. But it is strange that there is a bar displayed on the right hand side and I have no idea that it is. Also, this bar appears only in Windows chrome, not in Mac chrome on safari.
To remove frame border use the below one.
<iframe src="myURL" width="500" height="500" frameBorder="0">Browser not compatible.</iframe>
Try this scrolling="no" or seamless="seamless".
<iframe src="..."
class="foo"
scrolling="no"
seamless="seamless">
</iframe>
The only Draw Back here is you have to use a Div Container outside the IFrame.
Tested in android and ios Device.
HTML
<div class="outerCon">
<iframe src="https://bing.com"
class="foo"
seamless="seamless">
</iframe>
</div>
CSS
.outerCon{
overflow:hidden;
height:500px;
width:600px;
}
.outerCon iframe{
width:inherit;
height:inherit:
overflow-x : hidden;
overflow-y: scroll;
}
.outerCon iframe::-webkit-scrollbar {
display: none;
}
DEMO
1.sencha touch 2.3.1
2.I Used iframe it works well on IOS7.x
3.When Upgrade to IOS8.1，Iframe can't scrolling
4.IOS8.1 in safari works well,but when send to home screen,and open it it can't work.
WHY?is a bug?
my iframe code like this:
<div style="-webkit-overflow-scrolling:touch;background:url(resources/images/loading.gif) center center no-repeat; height:500px; overflow: auto;">
<iframe src="/abc.html" width="100%" height="100%" frameborder="0" >
</iframe>
</div>
Try to set fixed height. Does it work?
Also, try to add:
overflow-y: scroll;
to your frame.
Its a known issue with 8.1. I am going through the same. Surprisingly, iframe scroll works fine in chrome but Safari has issues.
http://www.applevis.com/blog/apple-ios-news/accessibility-fixes-and-improvements-ios-81
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%;
}
I have a form from Google docs that I embedded in my website I want the students I coach to fill out but the scrollbar is annoying me. Any way to get rid of it?
<iframe src="https://docs.google.com/forms/d/1kMdmk_f4jrAWwZi6q3YD63oUQAg2hvdheAQ-pY_2FRY/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
use scrolling="no"
<iframe src="https://docs.google.com/forms/d/1kMdmk_f4jrAWwZi6q3YD63oUQAg2hvdheAQ-pY_2FRY/viewform?embedded=true" width="760" **scrolling="no"** height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
I'm not sure if it's the single scroll bar, or the double scroll bar that's annoying you...depending on the form you're embedding, some sections may be larger than others and they'll need to scroll to continue the form.
I'm very noob here, but fixed a naggy double scroll bar issue for a wix site using their html embed tool...
Taking the google form embedding code, I added the "style" sheet at the beginning and changed height and width to "100%" see here:
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<iframe src="YOUR SOURCE" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
I have found if you change the height of your form to say 2000 your form fits on your website without the scroll
e.g. width="650" height="2000"
You can try css: overflow-y: hidden;
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/