I wrote a simple viewer for Greek syntax trees:
http://ibiblio.org/bgreek/resources/syntax-trees/reader/
On Chrome, when I am not running this locally, the main window is replaced when the iframe is loaded. See below. How can I fix this so that the main window remains on all browsers?
The main page has an iframe into which I load an XML file that is formatted with its own CSS stylesheet:
<iframe id="display" src=""></iframe>
The code loads the file into this iframe when the button is clicked:
function loadPassage() {
var passage = document.getElementById("passage").value;
document.getElementById("display").src = treeFile(passage, "nestle1904");
}
The body hides the scrollbar, the iframe does not:
body {
background-color: antiquewhite;
overflow: hidden;
}
iframe {
overflow: scroll;
background-color: antiquewhite;
width: 100%;
height: 100em;
}
Remove the attribute overflow: hidden from the element body and add overflow: hidden to the element html
html {overflow: hidden}
body {background-color: antiquewhite; margin: 8px;}
so you will have no scrollbar in your browser, but there will be in iFrame.
Here's what I learned: when the iframe is loaded, some browsers scroll past the area of the parent window to make room for the iframe, some do not. If I enable the scrollbar in the parent window, it is easy to see this happening. If I disable it, it looks like the parent window disappears, but it is merely scrolling past the top part of the window without providing a way to scroll back to it.
I can get rid of this problem by reducing the size of the iframe. That gives me a simpler problem to solve: how can I create the child window to take up all the remaining space beneath it in a device independent manner.
And someone provided a nice answer here:
How do I make an iframe fill the rest of the page?
So it works now, using this CSS:
html {
overflow: hidden;
background-color: antiquewhite;
}
html, body, iframe {height: 100%}
#top {
height: 120px;
}
form {
font-size: large;
font-weight: bold;
color: blue;
}
form input {
background-color: white;
}
iframe {
overflow: scroll;
background-color: antiquewhite;
width: 100%;
height: calc(100% - 120px);
}
Related
I'm trying to do something that shouldn't be very hard, but surprisingly I haven't been able to find the solution online.
I want to embed iframes to any random website, without the visitors noticing that it's actually a different frame. I want the iframe to merge with the parent body, extending the body of the parent, so that the non-iframe-part and the iframe-part of the website can be scrolled only using the main scrollbar of the parent page.
This is my code so far:
<h1>Tours</h1>
<div style="background-color: red; color: white; padding: 200px; text-align: center;">
Top part of page
</div>
<iframe id="tourtask-iframe" style="overflow: hidden;" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#tourtask-iframe {
width: 100%;
height: 2000px;
border: none;
}
</style>
When I do a overflow: hidden; on the body of the source file of the iframe archive, the scrollbar disappears, but I'm unable to scroll the iframe portion of the page.
I'd need to update the height of the iframe element to fill up the 100% of the height of this file. I'd also need to update the height of the iframe element whenever I expand/collapse any collapsible content in the frame.
How can this be done? Or is there a better way?
I'd preferably not use any library/framework for the parent page, since I'll need to be able to embed this iframe to totally different webpages.
Thank you!
I found an amazing script for this called iFrame Resizer:
https://davidjbradshaw.github.io/iframe-resizer/
It feels any change in height of iframe source document and updates the iframe container accordingly. It took some tweaking and investigation to get it to work.
Please make sure you're complying with following requirements:
The source iframe document must start with <!DOCTYPE html>.
Make sure the body of the iframe document is not 100% (which it is by default when using Material Design for example).
To successfully embed the correctly resizing iframe to the parent document, I'm now using the following code:
<iframe id="tourTaskIframe" scrolling="no" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<script type="text/javascript" src="/public/js/iframeResizer.min.js"></script>
<script type="text/javascript" src="/public/js/iframeConfig.js"></script>
<link rel="stylesheet" type="text/css" href="/public/css/iframe-parent.css">
iframeConfig.js:
iFrameResize({
heightCalculationMethod : 'bodyOffset'
}, '#tourTaskIframe');
iframe-parent.css:
iframe{
width: 1px;
min-width: 100%;
border: none;
}
body {
margin: 0;
}
In the styles.css for the iframe source document, in addition to any other styles I'm using for aesthetics, I have the following essential lines:
body {
height: auto !important; /* Essential for resizing */
min-height: 0 !important; /* Essential for resizing */
}
And that's it!
I have a chrome extension that shows a menu on the right side of the page, consisting of a few buttons that are 47px wide each. Because of this, the width of the iframe is also set at 47 px.
However, when a button is clicked, I want to show a dropdown (or 'dropleft' as you could say) which of course is wider than the 47px. Currently this content is cut off at the edge of the iframe.
I would prefer to be able to control all this from the iframe, so that I don't have to update the extension whenever I want to change something. Is there a way to overlay content from the iframe on the website below?
EDIT
I don't think resizing the iframe would be the solution. The div with additional information would e.g. be 400x200 pixels. If I'd just increase the size of the iframe, there would be transparent parts which would show the underlaying website but wouldn't be clickable. Ideally, the content from the iframe would just overlay from the existing iframe size.
Function in content.js that loads the iframe:
function showMenu(element) {
var iframe = document.createElement('iframe');
iframe.src = chrome.runtime.getURL('menu.html);
iframe.style.cssText = "\
position:absolute;\
visibility:visible;\
top:33%;\
right:0px;\
width:47px;\
height:198px;\
margin:0;\
padding:0;\
border:none;\
overflow:hidden;\
background:transparent;\
z-index:999999;\
";
element.append(iframe);
}
menu.html
<style>
html, body, iframe, h2 {
margin: 0;
padding: 0;
border:none;
display: block;
width: 100vw;
height: 100vh;
background: transparent;
color: black;
}
h2 {
height: 50px;
font-size: 20px;
}
iframe {
height: calc(100vh - 50px);
}
</style>
<iframe class="menu"></iframe>
There is no way for an iframe to overflow its bounds (see this post).
So you either need to increase the size of your iframe when you want to show more content, perhaps by message-passing with the extension. Or to not use an iframe and sacrifice not having to release updates for the extension when you change something.
I have an application that displays an iframe that the user needs to be able to scroll on an iPad.
Apparently you can't scroll iframes and other elements by default on iOS unless you use the special -webkit-overflow-scrolling in the CSS.
So for example I have the following HTML (based on David Walsh's solution here: http://davidwalsh.name/scroll-iframes-ios)
<div class="frameContainer">
<iframe src="./frame.html"></iframe>
</div>
and the CSS:
*
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
html,
body
{
height: 100%;
background: #ff0000;
}
.frameContainer
{
position: absolute;
top: 40px;
left: 80px;
right: 80px;
bottom: 40px;
background: #ffffff;
overflow: auto;
-webkit-overflow-scrolling: touch;
/* removes spacing below iframe */
font-size: 0;
line-height: 0;
}
.frameContainer iframe
{
width: 100%;
height: 100%;
}
However you can cause the page (red area) to bounce and lose focus of the iframe by either flicking the page (around the iframe) or by varying the speed at which you flick (e.g. dragging with your finger slowly). Or by tapping on the page around the iframe.
Demo here: http://preview.na-software.co.uk/Demo/ipadscroll/
I've tried some plugins like: http://www.hakoniemi.net/labs/nonbounce/ to prevent the page bounce, but because it's an iframe, it still causes the page to have a bounce effect when interacting with the frame because it's a different document level. I've also tried bubbling up the touch events from the iframe to the parent level so the plugin catches it, but the page can still bounce.
I'm working on a responsive page design at the moment and I'm running into an issue with white-space between the divs, especially after hitting breakpoints.
body, html {
padding: 0;
margin: 0;
}
.header {
padding-top: 5px;
background-color: red;
width: 100%;
}
.sub-header {
padding: 5px;
margin: 0px;
background-color: yellow;
width: 100%;
}
.main-content {
padding: 5px;
background-color: blue;
width: 100%;
}
.footer {
position: absolute;
bottom: 0;
padding: 5px;
background-color: green;
width: 100%;
}
#media screen and (max-width: 320px) {
.sub-header {
display: none;
}
}
}
<div class="header">Header
<div class="sub-header">Sub-Header</div>
</div>
<div class="main-content">Auto adjust size</div>
I want to have the blue div take up the remaining space in this white space, as well as after the sub-header is removed at the break point.
<div class="footer">footer</div>
Here's a quick mock up of what I'm experiencing: http://jsfiddle.net/gaych7vp/6/
I understand what I have to do in order to make it take up the remainder of the white space before it hits a breakpoint (I'm assuming just tweaking the height values), but how would I go about making the blue div take up the remaining white space that gets created when the yellow div gets hidden after hitting the breakpoint?
I'm still really new to javascript but from other answers I've read it could be done by creation a function that finds the height of the browser and then subtracts it from the other divs. Is that possible and if so, how could I accomplish that?
Use position:absolute with different top values
.main-content {
position:absolute;
top:51px;
bottom:0px;
}
and
#media screen and (max-width: 320px) {
.main-content {
top: 23px;
}
}
fiddle
Another approach is using display:table and display:table-row
body, html{
width:100%;
height: 100%;
}
body{
display:table;
}
.main-content {
width: 100%;
height: 100%;
display:table-row;
}
fiddle
Make a div fill the height of the remaining screen space
You can use calc on the .main-content div to calculate the size, but you would need to set the heights of the header, footer, and subheader divs. Seems to me though you could just give the body a background color of blue, and achieve the same thing?
Change
#media screen and (max-width: 320px) {
.sub-header {
display: none;
}
}
to
#media screen and (max-width: 320px) {
.sub-header {
visibility: hidden;
}
}
I think this is what you meant. Fiddle.
There's no need for a JavaScript solution here.
The white area is caused because you are using position: absolute to force the footer to the bottom of the window, regardless of the content.
This isn't the normal way to achieve this, you'll run into issues later on when you do add content to your main-content div. You'll find that the footer will be positioned over this content (this will also happen if you shrink the window vertically).
I think what you'd like to do, is give the main-content div a min-height:, this way, the page won't collapse and look terrible if there is little content, but it will stretch naturally when more content is added.
You can also and remove the position: absolute from the footer div.
Here is a demonstration:
http://jsfiddle.net/t46aopas/
** UPDATE **
If you'd like a dynamic solution, I've created a heavily annotated JavaScript example here: http://jsfiddle.net/nahgdkaw/
(I included lots of comments since you said you were new to JavaScript ;) )
That should hopefully help you along the way a little.
Be aware that if the content inside the .main-content div is larger than the .main-content div area, the div will NOT expand to accommodate it.
You can however use the code provided and add in an if statement to, before resizing the .main-content div, check if the .main-content content
is larger than the available area (you may need to add a wrapper div around the .main-content content). If so, then resize the .main-content div to match the .main-content content height (otherwise, perform the resize as it currently is).
(Also, I strongly advise against using HTML tables for anything other than tabular data)
I edited my original answer but don't have the reputation points necessary to add a comment to notify you. I'll remove this answer after you've seen my updated answer above.
I am currently using the following code to disable the html and body from scrolling:
document.ontouchmove = function(event){
event.preventDefault();
}
This works but it disables all native scrolling within the page. I have seen many topics about this on this website but I have not seen a clear answer or example of it allowing scrolling on any other element within the page without having to define one.
Can you just disable the elasticity of the scrolling and then scroll the body with -webkit-overflow scrolling?
If anyone knows an efficient way to do this I would be very grateful. Thank you.
The most efficient way would be to use css?
html {
overflow: hidden;
height: 100%;
}
body {
margin: 0;
height: 100%;
background-color: red;
}
.container {
overflow-y: scroll;
height: 100%;
background-color: green;
}
http://jsfiddle.net/xBuhy/