I've embedded a Google map onto my website in an iframe:
<iframe src="http://www.map-generator.net/extmap.php?name=Spot&address=los%20angeles%2C%20ca&width=614&height=244&maptype=map&zoom=14&hl=en&t=1298011905" width="614" height="244" scrolling="no"></iframe>
This is invalid, and I need to somehow pull off the scrolling aspect in CSS. How would I do this?
<iframe style="overflow:hidden;"></iframe>
Late response
The only solution I found so far is setting overflow to hidden and set width, height to a parent div.
In your case:
<div style="width:614px; height:244px;">
<iframe src="http://www.map-generator.net/extmap.php?name=Spot&address=los%20angeles%2C%20ca&width=614&height=244&maptype=map&zoom=14&hl=en&t=1298011905"width="614" height="244" style="overflow:hidden; width:614px; height:244px;"></iframe>
</div>
I have found another solution which worked.
<iframe src="...." class="frame-abc" scrolling='no' ></iframe>
.frame-abc {
border:none;
overflow:hidden;
margin:0;
height:230px;
width:570px;
}
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
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/
Hey I'm building a webpage that contains an iFrame in all other browsers it appears fine but when testing in ie7 I get a vertical and horizontal scrollbar, is there anyway to remove this?
<div id="converter3"><iframe src="https://postoffice.travelmoneyonline.co.uk/widget/(S(lwtb0t45hyhwv2z5sarusa45))/default.aspx
" frameborder="0" allowtransparency="true" scrollbars="no" style="height:279px; overflow:hidden;"></iframe></div>
#converter3{
float:right;
width:218px;
margin-right:12px;
margin-top:20px;
}
Thanks
Try appling these:
overflow: hidden; in CSS style for the <iframe>
scrollbars="no" as <iframe> attribute
So:
<iframe scrollbars="no" style="overflow: hidden;" ... >
I have an iFrame that uses a background image on behind it. On Firefox, the background is transparent and I can see the background image. On IE the background in the Iframe defaults to white. Is there a fix for this?
Example:
<td width="80px" class="voting" align="center"><div id="votingIframeDiv">
<iframe id="votingIframe" frameborder="0" allowTransparency="true" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="80" height="70" scrolling="no" src="vote/index.php?userid=89&fishid=<?php echo $row['id'];?>" >
</iframe></div>
</td>
Is there a fix for this?
Yes, IE has the non-standard allowtransparency property.
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true">
</IFRAME>
Be sure both the IFRAME and its source BODY element have a background:transparent style rule applied:
<iframe id="votingIframe" frameborder="0" allowTransparency="true" style="background:transparent" ... ></iframe>
and in the source:
<body style="background:transparent">
PS: CSS styles above are inline just for example.
Yes you can fix this but it also depends upon the iframe's origin's style sheets, If the iframe's source has a bg set in CSS this will override allowTransparency="true"
This may be a long shot but try putting allowTransparency="true" at the end of the iframe tag.
Note: In my testing allowTransparency has not worked in IE6.
After putting allowTransparency='true' if you're not getting any love try making sure that your style="background:transparent" .