I was trying to embed my code on my new google site but it looks like there is an extra scrollbar on the embed code section. At first I thought it was the size too short but after I have adjusted the size is still the same, I still can see the scrollbar from the embedded code section.
Does anyone know how to prevent this?
To disable scrolling for embed code, add :
<script>
parent.document.getElementsByTagName('iframe')[0].scrolling="no";
</script>
This changes the scrolling value of the parent iFrame ( scrolling="yes" ) to no.)
You can change the no to auto in the code if you want it to add scrolling automatically.
As #Vico said, you can remove the scrolling with the added but that will most likely just remove scrolling and not make your embed URL Responsive.
Unfortunately there is not a way to actually communicate your mobile environment from your google site to your embedded URL because the new google sites embed uses iFrame. The only work around would be to increase the size of your embedded container on your google site drastically. Once you do that you should be able to view your full webApp or what not on your site with no up-down scrolling but you may still see side-to-side scrolling. To remove that you van add
<body style="overflow: hidden;">
and it will be hidden.
Maybe this trick will help: Expand the inserted "Embed < >" box's boundary. (from
Auto adjust heigth of Google Site embed code (html))
Related
One solution was setting position of the iframe as fixed. But this messes up my web page.
If i understood your question right you want the iframe content to not scroll which is sadly not possible because you can't use Scripts on iframes.
In my app I am displaying website using the WKWebView component but since the website has <iframe> content, scrolling does not work. The iframe content itself registers taps and swipes but it never scrolls.
When I open the same page with Safari it works well, I can interact with iframe's content and scroll without any issues.
My iframe takes full width and height of the webpage and I added this property:
-webkit-overflow-scrolling: touch;
But it does not help. Unfortunately I cannot show the webpage in question because it contains proprietary data and is behing login screen.
I would prefer to solve this without having to modify the webpage, since Safari works fine.
EDIT: It looks like the iframe might be detecting the events and not "forwarding" them, because when there is also for example navbar on the page (that is not part of the iframe) I can swipe it and scroll. However since there is very little space on the screen, I would prefer not to have any other elements apart from iframe itself.
EDIT 2: I tried to display the page from iframe directly in the WKWebView but it still does not scroll at all. Works great in Safari.
Solution: In the end I solved the issue by changing the userAgent property of the WKWebView to match either iOS 12 Safari for iPhone or iPad depending on the device. The website in question is fairly complex regarding user interaction so I guess they were sending "incorrect" settings to the browser with the default user agent.
I would look for scroll-blocking event listeners that might conditionally load. If you have some kind of touch, touchmove, click, hover javascript events they might interfere with the default logic by using e.preventDefault().
Also you need to look for such events both in framed page and host page.
Try to replace a host page and framed page to see if scroll works well with different URLs.
Try placing the iframe in a div with -webkit-overflow-scrolling which takes up the full view and make the iframe the the size of it's content.
Example from: https://coderwall.com/p/c-aqqw/scrollable-iframe-on-mobile-safari
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe src="./yxz" style="width:100%;height:100%">
</div>
You may have to get creative with resizing the iframe to match it's content (see: Adjust width and height of iframe to fit with content in it)
I've got an Adobe Edge JavaScript and CSS3 animation's EdgePreload HTML page included in another page, using the iframe tag. It works nicely, but when I try to use -webkit-transform:scale(0.5,0.5), the iframe itself scales from being 1600 x 900px, to 800 x 450px, but the contents remain the same size. I would post a link to the file, but it's currently offline. If you need any other information, please say so.
On transformation is the IFrame getting relaoded?..if not that is the issue for not resizing.. the contents are aligned based on load iframe size. Please try to relaod the Iframe after you transform..
If a relaod is impossible might have to explicitly access Iframe DOM and resize content in that case CROSS DOMAIN POLICY will come into play and will be tedious..
Hi I want to disable the resizing the html web page by the user. How to do that
I want to disable the resize button and manual resizing by dragging. pls help
You can't, thank God.
When you open a new popup you can request it be unresizable using the feature resizable:
window.open('something.html', '_blank', 'resizable=no');
however modern browsers may ignore your request as it is considered egregiously user-hostile.
Use liquid layout to make your page respond flexibly to changes in window size, rather than attempting to set it in concrete. The web is inherently a variable-size medium, and mobile browser users get no input in how large their screen is anyway.
Pardon? Are you talking about resizing the browser window? If that's the case then you can't do this in HTML, or JavaScript as it would be a security risk allow web pages to control browsers behaviour.
If you want to get rid of scroll bars you can set the body tag to 'overflow: hidden' in CSS?
If you mean to stop the page shrinking and expanding in sympathy with browser window size, then use fixed width elements as supposed to relative (%)
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
fb like button creates a white background on page onload in all ie versions
I have a site where portions of the content are loaded into IFrames.
The problem I'm having is that the inside content of the iFrame is white until the page itself loads, and the content has a different background color (blue, in this case). So I have these white squares on the screen until the contents load.
Is there any way to specify what color the empty IFrame should render as until it has content?
Or am I taking the wrong tack here - is there a good way to keep the page from rendering until the contents are ready to be displayed?
UPDATE: Looks like the "white area" bit I'm describing is IE-specific.
It's not too hard:
<iframe id="IFR" src="time.php" style="background-color: #f00;" />
Edit: I neglected to test in IE -- it does work in FireFox. Example at: http://beta.tagcloud.com/contain.html
The example demonstrates that the page quickly switches to all red, and then when the iframe loads (in 5 seconds), it switches to black.
This was driving me nuts, but I actually found a solution that seems to work in IE6 and 7. Haven't tested in other browsers, but Firefox seems to do it properly anyway.
The problem is solved if the iframe isn't displayed when loading, but an iframe seems to fire the "onload" immediately so after putting in an alert, I noticed it fires the onload twice, once at page load, then again once the iframe page loads so...
<iframe id="theFrame" src="frame.html" style="display:none;" onload="loadFrame();"></iframe>
//and here is the associated javascript
loadCount = 1;
function loadFrame() {
if(loadCount > 1) { //this keeps the script from displaying the frame on the first fire
document.getElementById('theFrame').style.display='';
return;
}
loadCount++;
}
You could perhaps set the iframe's document and set its style before loading your content.
Or you can use Ajax and not have these issues. =] (Assuming if it's appropriate for the task, of course.)
Simpliest way to fix this to just not show the iframe until it is ready. That way you can set whatever background you want under the iframe. You set a background and prevent showing the iframe until loaded like so:
<div style="background-color:#XXXXX">
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
</div>
The only downside is if your visitor has js turned off they aren't going to see the iframe. If that is a concern for you check out http://css-tricks.com/prevent-white-flash-iframe/