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;
Related
I am using a vimeo video as a background for a div that spans the top of my page. When I have the cursor inside of that div/iframe it won't scroll the page at all. The embed code I'm using:
<div class="vimeo-wrapper" style="padding:42.75% 0 0 0;"><iframe
src="https://player.vimeo.com/video/288403366?
autoplay=1&loop=1&title=0&byline=0&portrait=0&background=1"
style="position:absolute;top:-10px;left:0;width:100%;height:100%;"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
allow="autoplay; fullscreen"></iframe></div>
I've tried putting overflow on both the iframe and the vimeo-wrapper div but neither seemd to help.
Solved by putting z-index: -1 on the vimeo-wrapper div
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>
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/
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;
}
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" .