I have a iframe and I want to create another div as an overlay over this iframe for some time. Therefore, the size of that new overlay div and iframe should be same in every condition. The size of iframe may change for many reasons like browser window resizing, moving the splitter etc. I tried to use the onResize function from jQuery but it doesn't seem to work except for browser window resize. Could someone please suggest a way to handle all the cases?
Thanks in advance.
Give them both a parent div with a certain width. Then maximum the content of the div for the overlay and iframe
.container {
width: 750px;
height: 400px;
position: relative;
}
.overlay, iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.overlay {
z-index: 3;
background: #0cc;
opacity: .7;
}
iframe {
z-index: 2;
}
<div class="container">
<div class="overlay"></div>
<iframe src="http://wikipedia.com"></iframe>
</div>
Related
What I am trying to do should be simple. But somehow I am not able to find an answer to it.
Here is my codepen:
https://codepen.io/mvsimple/pen/wvgbvgQ
HTML:
<div class="parent">
<iframe class="child" src="https://reesgargi.com/"></iframe>
</div>
CSS
.parent {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 62.5%;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
I want the iframe to fit inside the div (so that its width = parent div width)
But iframe loads the page zoomed in, from the center.
I have tried using CSS (Flexbox, Table display, and W3S trick
But I am helpless. I tried the iframe resizer library but it had its own issues. (Dragging)
Please advise my fellow programmers.
Finally found a solution!
All I had to was to scale down the iFrame and set its width equal to the original size (source of that iframe).
.child{
width: 1280px;
/* Magic */
transform-origin: 0 0;
transform: scale(0.703);
}
I have to display a full-screen modal containing an iframe with a form with input text fields. I already got the iframe to display and scroll correctly.
However, when I start typing on the input fields, the whole iframe scrolls all the way to the bottom, so you can't see what you're typing on the fields. It only scrolls when you start typing, not on focus.
This occurs on iOS Safari or Chrome and not on Android devices. Also note that the issue doesn't occur if I scroll to the bottom a bit, so that the input field is at around the vertical center of the screen (i.e. upper half of the screen), before tapping and typing on the field.
<body>
<!-- some contents -->
<div class="wrapper">
<iframe src="http://iframe.com" />
</div>
</body>
body {
position: fixed; // I only set this to fixed via JS when modal pops-up
}
.wrapper {
-webkit-overflow-scrolling: touch;
position: fixed;
overflow-y: scroll;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
iframe {
width: 100%;
height: 100%;
z-index: 99999;
}
Any help and pointers is appreciated. Thanks!
Fixed it by setting the wrapper to position: absolute instead of fixed, and setting the following CSS to html and body.
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
Wrapper CSS now looks like this:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
EDIT: I solved it: it was in the settings of the pdf that I needed to change the mode to 'Page Fit'
I try to display a pdf in a div that is exactly a half of my screen.
I don't want to have to scroll to see the single A4 pdf page.
When I resize the screen I also wan't the pdf to get bigger/smaller.
The problem is that the embeded pdf is not resizing itself and it is scrollable.
CSS:
split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
}
.left {
left: 0;
background-color: blue;
}
embed#pdf {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
HTML:
<div class="split left">
<embed id="pdf" src="my_pdf.pdf" type='application/pdf'>
</div>
I have tried to use the tag, but I get the same result.
Thank you for your help!
I solved it: it was in the settings of the pdf that I needed to change the mode to 'Page Fit'
I need to have an absolute div that is a child of only body fill the entire document area (window + any scroll area)
-- width: 100% only fills the viewable screen
I prefer a CSS only solution but pure javascript is ok. I tried without success setting:
opaque.style.minHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight);
I made a jsFiddle of the code below. If you scroll down the output, you will see that the opaque div stops at whatever height the output window was when it was rendered.
In case you are wondering... it is to make an opaque overlay of all content in the div behind it (think slideshow). My only other solution is to disable scrolling, but this is problematic.
Thanks for any help.
<div class="page-container"></div>
<div id="opaque"></div>
body {
width:100%;
}
.page-container {
position: relative;
max-width:978px;
width: 100%;
min-height:2500px;
margin:0 auto -50px auto;
border:solid #999;
border-width:2px;
background: lightblue;
}
#opaque {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: grey;
filter: alpha(opacity=70);
opacity: 0.7;
}
Can use
#opaque {
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
}
remove width:100% from body due to creates horizontal scrollbar
Depending on use case it is often common to add class to body when using such an overlay that sets body overflow to hidden
DEMO
You can put a position: relative on your body so that the body will be used as a reference point by the child element in terms of height (as opposed to the document object).
Using javascript to set one elements height equal to anothers
var o = document.getElementById('opaque');
var p = document.querySelector('.page-container');
o.style.height = window.getComputedStyle(p).getPropertyValue("height");
FIDDLE
This dreaded problem.
What I currently have
html:
<html>
<body>
<div class="wrapper"></div>
<div class ="footer"></div>
</body>
</html
css:
* {
margin: 0;
}
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0;
}
.footer
height: 36px;
}
The problem is when i inspect the rendered page with chrome a few problems I see:
1. The html tag has a height associated with it hmmm and its not the entire page height
2. so I have div inside of the wrapper div that extends past the wrapper, body, and html tag?
My best guess is that if i can get the html to the page height I could style the footer to page bottom.
I was considering using javascript to grab the true height in pixels and passing that to height and ditching the percent. Only problem is I still want to know whats going on!
Thanks,
JT
add this css to your wrapper divs
wrapper_div{ overflow:hidden; }
this is a hack to recalculate floated elements inside an element. Otherwise the browser will forget about the floated elements, overflow-hidden does the trick or you can append a clear floated element to the bottom of the wrapper div like so
CSS
clear_float{
clear:both; display:block;
overflow:hidden; visibility:hidden;
width:0px; height:0px;
}
HTML
<div class="wrapperdiv">
/* other HTML elements*/
<div class="clear_float"></div>
</div>
this is assuming that the troublesome div is classed wrapperdiv
on second look this is completely invalid
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
}
you are setting the height twice in one declaration. height: auto !Important will take precedent over height: 100% so you need to decide whether you want your height automatically rendered over explicitly at 100%.
and your missing the opening block in this css declaration
.footer
height: 36px;
}
Just before the closing tag of the wrapper add a div with the class 'clear'
CSS:
.clear { clear: both; }
.footer { margin-top: -36px; }
The problem is that floated elements behave like absolute positioned elements.. They are not taken in account when calculating the height of the wrapper div.
In the end I just made the html body tags set via pixels and not percent. Nothing I tried above satisfied me.
If you want a facebook like fixed footer status bar. Try using the following css:
.footer {
width: 100%;
height: 25px;
position: fixed;
bottom: 0px;