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.
Related
i am trying to make a web page which background is fixed (meaning width is 100% and height does not scroll ) but the main div of the page which contain all the content of the page is scroll-able in y direction. you can see the effect here http://btemplates.com/2016/blogger-template-topgames/demo/. is it possible to achieve this effect using html and css only ? if not then how it can be done with javascript?
Yes, you can easily do that using a background image. If you inspect the page you can see how they did it.
CSS:
body {
background: url('<<Your URL Here>>'), center top no-repeat fixed;
}
content-wrapper {
width: 960px;
margin: 46px auto 0px;
padding: 0px;
}
HTML:
<body>
<content-wrapper>
</content-wrapper>
</body>
In the future, right-click the page and inspect the HTML and CSS and you should be able to figure most things out.
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 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);
}
I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.
Please see below........
A: My mobile website contains a lot of content which exceeds the windows height
B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height
C: When user scroll down, he can see the lower part of the image, but not the website content. The bottom of the image should never detached from the screen bottom no matter how the user tries to scroll down
May I know how can I achieve C ??
Also, in situation B, sometimes the image may not exceed the screen height if the user is using a Smartphone with big screen, in this case, the image should be fixed at the top of the screen and not scrollable.
It would be better if all the above can be achieved by NOT using jquery. However, if it is a must, then it is still ok........
Many thanks.
While the general effect is doable with CSS only, you will probably need javascript to toggle the effect on and off.
The general idea is to use position: fixed and overflow: scroll on a layer containing the image, while the body has overflow: hidden. Under these conditions, you're able to scroll the contents of the overlay but not the body.
While this works on desktop, things are a little bit different on mobile where all of the content will be rendered despite the overflow: hidden on the body. A quick work-around is to apply position: fixed to the body as well. I don't know if this is intended behaviour, but it works fine in both Safari and Chrome on iOS.
Markup outlines:
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS:
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
With this you could use javascript to toggle the class no-scroll on the body. When it's there, the overflowing content is hidden and the overlay is visible. When it's not there, the overlay is hidden.
Here's an example of the effect (without the .no-scroll class and javascript, though, just to show that it works):
Full screen
With markup/CSS visible
Edit:
In the example above, I gave the overlay a semi-transparent background and gave the image inside of it a max-width of 100%. If you want the entire screen to be filled with the image, change the max-width to a regular width.
Edit 2:
As requested, here's a jQuery function to toggle the effect.
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
Just give a <button> or whatever the class name close and it'll toggle the effect on and off.
I want to make the iframe window of modal box in Joomla 1.5 to scroll, but without scrollbars to appear. If I set overflow:hidden through css it works in Chrome, but not in Firefox! Does anybody have any idea how can I do this? Any trick?
Overflow: hidden is supposed to give the appearance that a container cannot scroll (i.e. hiding the scroll bars. The fact that is works for you in Chrome is just a quirk of Chrome, not standard. My suggestion would be to leave the scrollbars on the iframe but hide it with either a floating div or with the parent container. So for example, put the iframe inside a div. Force the div width to 18px (guestimated width of scrollbar) less than the width of the iframe with overflow: hidden. The frame will continue to scroll with the mouse wheel but you will not be able to see the scrollbar.
Working example here.
Html:
<div><iframe src="http://afakesite.com/"></iframe></div>
CSS:
iframe {
width: 200px;
border: none;
}
div {
width: 182px;
border: solid 1px black;
overflow: hidden;
}