The issue I am facing is that:
When I set an iframe - in my html website – in order to show another html page, i get 2 scroll bars on the left but I cant scroll at all.
What I want is to scroll the main page and not the pages inside the iframes.
Iframes:
<div class="sixteen columns">
<div id="main" style="position: absolute">
<iframe src="html5/Project1.html" height="700px" width=" 1000" scrolling="no"></iframe>
</div>
The problem exists on IE and FF not on Chrome.
Try
<iframe src="html5/Project1.html" style="overflow:hidden;width:1000px;height:70px"</iframe>
Related
I'm having the following iframe:
<iframe id="uploader" src="/fileuploader"></iframe>
When it's loaded, there are multiple div elements - I want one of them to be layered on the top of the iframe.
<iframe id="uploader" src="/fileuploader">
[..]
<div class="modal preview"> <---- I want this to be positioned over iframe
<div class="modal-body">
<img src="myimage.jpg" alt="Image">
</div>
</div>
[..]
</iframe>
Preview:
Looks like this is impossible to achieve since nothing works.
What have I tried:
Setting z-index on iframe and the div
Playing with the positions
Playing with iframe transparency
Question:
How can I z-index an element located inside of the iframe over it?
There are a few questions on here similar to this one but their solutions don't seem to work for me. Basically I have embedded a page into a page on a website and am getting double scroll bars, one within the iframe and one in the page it is embedded in. What I would like is to do away with the scroll bar in the iframe and make it extend 100% of the iframe and only use the scroll bar in my page. So it would be hard to tell it is an embedded page. I am using Bootstrap's iframe embed class to keep the page responsive. If I need to do away with that class that's fine. Here is the html.
<div class="container">
<div class="main">
<div class="inner-main">
<h1>Page Heading</h1>
<div class="row">
<div class="col-lg-12">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="mylink"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
Is there a simple way to do this? The embedded page is rather long so I need it to push my page down all the way.
Here is what I ended up doing:
<iframe onload="scroll(0,0);" class="embed-responsive-item" src="mylink"></iframe>
CSS
.embed-responsive-16by9 {
height: 6060px;
}
iframe {
width: 100%;
display: block;
height: 6060px;
}
I will be on the lookout for a better way to do this
Edit: removed my other answer, I misread the question.
It is tough to do unless the iFrame and parent page on the same domain, something like this should work:
Resizing iframe to fit its content
your script will be if you are not using the contents from cross-domain
$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});
I have a 'big' problem with iframe. I had to make an iframe inside a container div witch has a Bootstrap modal inside. everything is working fine on desktop (Chrome, firefox, safari etc.)but on tablets, when i call the open function for the modal, it is remove every other content except the iframe.
here is the html code:
<div class="content">
<div class="container-fluid header">
<div class="container">
<div class="row">
<!-- SOME HTML CODE HERE-->
</div>
</div>
</div>
<div style="clear: both;"></div>
<iframe src="/game/" width="100%" height="786" style="border: none" id="table-1"></iframe>
</div>
The iframe is an html document too, and i know that i souldn't had to use it for this, but thats what they want me to do.
How to make an image fit perfectly in an iframe without having to scroll.
below is an example of my code
<iframe style="display:inline"src="../assessm2/images/social3.jpg" frameborder="0" name="frame 2"></iframe>
</center><br/>
</div>
<div id="text">
<a href="../assessm2/registration.html" target="frame 1" >Show</a>
Hide  
Show
Hide</p></div>
On this page an embedded YouTube video is displayed to the left of a carousel titled "Similar Festivals". The HTML used to embed the YouTube video is:
The HTML of the YouTube section is:
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
The layout of the page (using a responsive Bootstrap grid) is such that the video should have the same height as the carousel to the right of it, but as you can see, it is somehow breaking out of its parent container. I want the video to be aligned with the carousel to its right, how can I fix this.
Here's a screenshot in case there's any doubt about what I'm referring to!
I've noticed that row-fluid container is dynamically adding a width of 33% to your Youtube video. So whatever width expectation you set to it is being reset by that class.
Try this:
<div class="row-fluid">
<div class="span4 spacer twitter">
</div>
<!-- Youtube -->
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
<!-- Similar Carousel -->
<div class="span4 spacer">
<div id="similarCarousel" class="carousel slide last">
</div>
</div>
</div>
(hat tip to Mr. Alien)
It sets the iframe height only. The whole row-fluid container expands somewhat, and the height is irregular. However, you don't have the 'jumping outta the container' problem.
Instead of
<iframe id="fitvid811516"
src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm">
</iframe>
Use this
<iframe width="640" height="360"
src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage"
frameborder="0" allowfullscreen>
</iframe>
And adjust width and height manually. Iframes don't go along well with dynamic sizing.
Also if you don't want to break the layout but also don't want to change the content within, you can also go to the parent container in HTML and set overflow: hidden
.fluid-width-video-wrapper {
overflow:hidden;
}
Note that this would fix your layout but break the iframe; its bottom parts where play controls stay would be hidden.