Integrating iframe like a div with scroll - html

Firstly here's the fiddle
I am trying to integrate a iframe like a div, I know how do this if this was a normal iframe but this iframe has a slider inside it. As a result there are two scroll bars appearing on the right side.
HTML code:
<div class="container">
<div class="h_iframe">
<iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS code:
html,body {height:100%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
Is there any way where I could make the iframe behave like a div so that the page will have a single scroll bar. overflow:none would remove the scroll from the iframe.
Any help would be appreciated.

The other answers already work well in this case, but I would just like to point out that the idea is to make the outer frame "non-existent", rather than making the iframe blend in with the page. This works in this case where the inner iframe is intended to fill the entire page.
However, unfortunately, there is no easy way to do "integrate an iframe like a div" in general (at point of writing).
There is an attribute <iframe seamless> that does exactly what you want (embed an iframe like a div), but that doesn't work in any major browser at the moment. See: http://caniuse.com/#feat=iframe-seamless. There are probably some ways to use Javascript to simulate this: e.g. https://github.com/ornj/seamless-polyfill has the page in the iframe use Javascript to communicate its scrollHeight (using postMessage) to the outer page, which then uses Javascript to change the height of the iframe so the entire page in the iframe can be shown without scrolling.

In this particular instance, with a full page iframe, set the margin of your body tag to 0:
html,body{
height:100%;
}
body{
margin:0;
}
.h_iframe iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="container">
<div class="h_iframe">
<iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
</div>
</div>

Add overflow:hidden to your CSS like this. I tried it in your fiddle and it works.
html,body {height:100%;overflow:hidden}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

You cannot write css to affect the inner contents of the iframe... but you can add an overflow: hidden; to your body.

Related

How to make Facebook Embedded comments box scroll-able in a div?

Ok so I have the embedded Comments box from the facebook developer page
https://developers.facebook.com/docs/plugins/comments#configurator
Everything loads up fine, except I have it in a Div separate from the code the page give you to embed with which has a background color and set to scroll so all the comments would be scrollable as it fills, yet when I add the embed code it removes my divs properties entirely
HTML
#reviews {
height:500px;
width:950px;
overflow-y: scroll;
background:#7f7f7f;
background:rgba(0,0,0,0.5);
text-align:center;
margin:0 auto;
}
<div id="reviews">
<div class="fb-comments" data-href="https://chenacannabis.net" data- width="640" data-colorscheme="dark" data-numposts="5" >
</div>
</div>

Embed an html web-page inside another one and scroll it using the parent scollbar

I would like to have the contents of an html webpage displayed in another (parent) html webpage, stretch the embedded webpage to the width of the parent and also remove the scroll bar of the embedded webpage while being able to scroll down the contents of the embedded webpage using the the scroll bar of the main page as the height of the embedded contents are too long to fit. I tried using code from answers to similar problems including this:
<iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>
but I cannot achieve the desired outcome. I would like is to be able to scroll the contents of the embedded webpage using the scrollbar of the parent page. It is possible (with no need to copy code form the embedded HTML to the parent one instead) and how? Thanks.
I solved the problem by specifying a specific height for the embedded webpage which is greater than or equal to the height of the webpage like this:
<div id="content" class="content content-full" style="margin-top: -40px;">
<iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>
I hope this can solve the problem also for others and any better or different slolution is also appreciated.
ps: You have to specify a height that is at least equal to the height of the contents of the embedded webpage or element for the scrollbar to disappear.
I've solved it by using two DIVs, one inside the other.
<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
<div style="margin-top: -100px; width: 300px; height: 400px">
<iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
</div>
</div>
I've disabled The scrollbars by setting scrolling="no"
I've diasbled user clicks by setting style='pointer-events: none;'
Here is a working sample - https://jsfiddle.net/q46L1ynv/

How to reposition content in no scroll iframe?

I have an iframe for a google chart which has too much spacing around it. I want to embed this in my page but crop it to get rid of the surrounding space.
I was trying to do this by setting the iframe with smaller height and width attributes but I cannot work out how to reposition the content within the iframe to center it.
Here is the iframe for the chart:
<iframe width="550" height="170" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1r56MJc7DVUVSkQ-cYdonqdSGXh5x8nRum4dIGMN89j0/pubchart?oid=1407844401&format=interactive" onload="window.frames['itunes'].scrollTo(250,250)">></iframe>
How do you reposition the content of an iframe in this way or is there a better solution?
Thanks
You should wrap the iframe in a div or something and position the iframe.
here the code:
<div class="wrapper">
<iframe></iframe>
</div>
and this is the css
.wrapper{overflow:hidden;}
.wrapper iframe{position:relative; left:-40px; top:-30px;}

Image overflowing parent container in Firefox after jQuery scrollbar added

I'll try to keep this as succinct as possible...
I have a image that I had setup to fill it's parent div horizontally and scroll vertically.
I've since added a jQuery based scrollbar to replace the native scrollbar for non webkit browsers. Since doing so, my image is overflowing it's parent horizontally in Firefox. Chrome and IE are not having the issue.
It's a little convoluted because I'm using skelJS to set container sizes based on breakpoints, but I don't think that should make a difference. The parent and child containers along with the image have width's set.
I'm going to post the HTML and CSS first and see if there's something obvious I'm overlooking. The jQuery targets the .scroll-pane2 class and is working fine beyond my overflow problem. I'm happy to post that code if there isn't something obvious that I'm missing.
Thanks in advance for the help!
A summary of the code:
HTML:
<div class="8u tasting-menu">
<header>
<div class="scroll-pane2">
<p>Scroll or click for full-size menu</p>
<img src="images/bwh-tasting-list-png.png" class=""/>
</div>
</header>
</div>
CSS:
body {
width:100%;
}
img {
width:100%;
height:auto;
}
.8u {
width:66.6%;
height:auto;}
.scroll-pane2 {
height:27em;
width:100%;
overflow:hidden;
}
.tasting-menu img {
width:98%;
height:auto;
}
The jQuery based skelton I'm using accounts for the .8u. I've used it quite regularly and never had the issue, but I'll definitely take another look at it.
I tried the overflow-x:hidden to no avail. The jQuery scrollbar I'm using overrides the overflow in the scroll-pane2 class.
I need to relook at the scroll bar script I'm using... because before installation, it worked fine, albeit with the Firefox native scrollbars.
I'll try to put a jsfiddle together.

Set Scroll Bar of Iframe to Bottom

In my application I have the Iframe that has some log file content. Since I will always be interested in the latest logs. I always want to keep the scroll bar to the bottom. How can I achieve it.
<IFRAME src="/results/show_client_log?testinstanceId=<%=params[:testinstanceId]%>&clientIp=<%=params[:clientIp]%>" id= "frame" style="width:100%;" height=500px scrolling="yes"></IFRAME>
This the code that enables the scrollbar to iframe.
Does adding this to style section in your iframe work?
overflow: auto;
or maybe even
overflow-x:scroll;
or
overflow-y:scroll;