I don't think this is not another "resize iframe according to content height" question.
I actually want to resize the iframe dynamically according to a resize of the parent window. For JS Fiddle fans I have an example here
For those who want to look at the code on SO:
<div id="content">
<iframe src="http://www.apple.com"
name="frame2"
id="frame2"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="auto"
allowtransparency="false">
</iframe>
</div>
<div id="block"></div>
<div id="header"></div>
<div id="footer"></div>
CSS:
body {
margin: 0px;
padding-top: 78px;
padding-right: 0px;
padding-bottom: 25px;
padding-left: 0px;
min-height: 0px;
height: auto;
text-align: center;
background-color: lightblue;
overflow:hidden;
}
div#header {
top: 0px;
left: 0px;
width: 100%;
height: 85px;
min-width: 1000px;
overflow: hidden;
background-color: darkblue;
}
div#footer {
bottom: 0px;
left: 0px;
width: 100%;
height: 25px;
min-width: 1000px;
background-color: darkblue;
}
iframe#frame2 {
margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
div#block {
background-color: lightgreen;
margin: 40px;
position: fixed;
top: 80px;
left: 350px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
#media screen {
body > div#header {
position: fixed;
}
body > div#footer {
position: fixed;
}
}
There may be a bit of odd CSS there - I cobbled it together from the actual page. Apologies.
As you can see the green coloured div dynamically changes height accordingly when you resize the window. What I'd like to find out is if this can be done with the iframe to the left of the div.
Can CSS alone make this happen?
I created a new jsfiddle that gets you what you need in raw css. I didn't test cross-browser extensively, particularly in IE. I would anticipate support in IE8 and 9, but would be hesitant to say that 7 would work without hiccups.
The relevant changes:
/* This contains the iframe and sets a new stacking context */
div#content {
position: fixed;
top: 80px;
left: 40px;
bottom: 25px;
min-width: 200px;
background: black;
/* DEBUG: If the iframe doesn't cover the whole space,
it'll show through as black. */
}
/* Position the iframe inside the new stacking context
to take up the whole space */
div#content iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
I think this does what you're after.
First I wrapped the iframe in a div, and set the iframe's width and height to be 100%.
HTML
<div id="frameContainer"><iframe src="http://www.apple.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe></div>
CSS
#frameContainer {
margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
iframe#frame2 { width: 100%; height:100% }
Then I added the following jQuery code.
jsFiddle
$(function() {
var widthRatio = $('#frameContainer').width() / $(window).width();
$(window).resize(function() {
$('#frameContainer').css({width: $(window).width() * widthRatio});
});
});
You can set the width and height of the iframe element to be percentage-based. Here's an example where width is 75% and will dynamically change when you increase/decrease the width of your browser window: http://jsfiddle.net/fallen888/pkjEB/
This worked for me:
div#content iframe {width: 100%}
Related
Is there any way to resize the picture on the right because the actual GIF is 500x500px and it is only showing 100x100px but at the same time keep the layout design like it is? Any help would be extremely apreciated!
What I have now (Demo w/ code): http://jsfiddle.net/dkfn482L/
body {
margin: 0;
}
.t_container::after {
clear: both;
}
.t_iframe {
position: relative;
float: left;
}
.t_iframe iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.t_video {
width: 64%;
padding-top: 36%;
}
.t_image {
width: 36%;
padding-top: 36%;
}
#media (max-width: 768px) {
.t_iframe {
float: none;
width: 100%;
}
.t_video {
width: 100%;
padding-top: 36%;
}
.t_image {
width: 100%;
padding-top: 100%;
object-fit: cover;
}
}
<div class="t_container">
<div class="t_iframe t_video">
<iframe frameborder="0" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
</div>
<div class="t_iframe t_image">
<iframe frameborder="0" scrolling="no" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
</div>
</div>
You can give the Iframe 'width' & 'height' attribute and set fixed value.
however, your CSS override the iframe natural width:
.t_image {
width: 36%;
padding-top: 36%;
}
Try to add <img> element to the iframe and give it a minimum values for height and width.
My css for Iframe:
position: absolute;
right: 0;
top: -100px;
z-index: 1;
height: 110%;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
This is my CSS for Iframe screen on my website, but in mobile devices, I have to scroll the Iframe screen to see the full website.
Note: making the iframe responsive is not in my hand.
The bootstrap method. Use an iframe or video element in it.
<div class="embed-16by9">
<iframe src="..."></iframe>
</div>
with responsive css
embed-16by9 {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.embed-16by9::before {
display: block;
content: "";
padding-top: 56.25%; /* ratio 16:9 */
}
.embed-16by9 iframe,
.embed-16by9 video {
width: 100%;
border: 0;
position: absolute;
top: 0; bottom: 0; left: 0;
height: 100%;
}
I'm trying to make a navigation bar that overlap my header and stick to the top of the window on scroll.
It will start at top: 45px and stick at top: 0 on scroll.
My first approach was to set it at position: fixed; top: 45px and change the value with JS on a scroll event. But Firefox gave me the warning about "asynchronous panning" discussed on this post.
I have been able to do it with a bit of CSS trickery, but I am wondering if there is a simpler CSS way or a valid JS approach to do this (not throwing a warning).
body {
position: relative;
height: 100%;
width: 100%;
background-color: grey;
overflow-x: hidden;
margin: 0;
}
.container {
position: absolute;
top: 0;
left: -1px;
width: 1px;
bottom: 0;
padding-top: 45px;
overflow: visible;
}
nav {
position: sticky;
top: 0;
transform: translateX(-50%);
margin-left: 50vw;
width: 300px;
height: 70px;
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
width: 100%;
background-color: green;
}
<div class="container">
<nav></nav>
</div>
<header>
</header>
<main>
</main>
You can simplify your code and avoid using an extra container:
body {
background-color: grey;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 70px;
margin:45px auto -115px; /* 115 = height + margin-top */
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
background-color: green;
}
<nav></nav>
<header>
</header>
<main>
</main>
How to make that hovering the mouse over the boundary between two elements (here on the vertical line which separates the blue and red)
makes it possible to resize the width of each element?
I'm looking for the behaviour of https://stackedit.io/editor
Is this possible directly with <textarea> resizing possibilities ?
* { margin: 0; border: 0; padding: 0; }
textarea { background-color: red; width: 50%; position: absolute; top:0; left:0; height: 100%; }
#separator { cursor: ew-resize; position: absolute; top:0; width:1%; left:50%; height: 100%; }
#right { background-color: blue; width: 49%; position: absolute; top:0; right:0; height: 100%;}
<textarea>hello</textarea>
<div id="separator"></div>
<div id="right">yo</div>
Sort of like this:
* { margin: 0; border: 0; padding: 0; }
html,body { height: 100% }
textarea { background-color: red; width: 50%; height: 100%; resize: horizontal; min-width: 1px; max-width: 99%; float: left; }
div { background-color: blue; height: 100%}
textarea:active {width: 1px;}
<textarea>hello</textarea>
<div>yo</div>
Note that the textarea:active style is necessary because of an issue with chrome that won't allow an element to be resized less than it's initial width. It's a bad hack to work around it until chrome fixes it.
I am looking for a way to have a fixed width div centered in the display with divs to the left and right that re-size to fill the display. I am currently accomplishing this with a javascript window.resize function. The reason I want the divs to resize instead of just spill off screen is I actually want the images inside those divs to compress and expand. Is there a way I can accomplish this with just css?
Here is an example of my current markup:
HTML
<body>
<div id="wrapper">
<div id="center">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
CSS
body {
margin: 0px;
min-width: 1024px;
font-size: 14px;
line-height: 20px;
}
#wrapper {
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-width: 1024px;
width: 100%;
background: #7c7b79;
overflow: hidden;
}
#center {
position: relative;
width: 1000px;
height: auto;
margin: 0px auto;
}
#left {
position: absolute;
top: 0px;
left: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
#right{
position: absolute;
top: 0px;
right: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
javascript
$(window).resize(function(){
var browser_width = $(window).width();
if(browser_width >1100){ //below this width stop compressing
var width = ((browser_width - 1000)/2)+ 20;
$('.mid_pat2').css({'width': width, 'right': -(width-20), 'min-width': 30});
$('.mid_pat1').css({'width': width, 'left': -(width-20), 'min-width': 30});
}
});
You can do that with table-cell (IE8+), or flex (IE10).
Here's an example with table-cell.
HTML:
<div id="wrapper">
<div id="left">a</div>
<div id="center">a</div>
<div id="right">a</div>
</div>
CSS:
#wrapper {
display: table;
width: 100%;
}
#left, #center, #right
{
display: table-cell;
}
#center {
width: 400px; /*fixed*/
background-color: yellow;
}
#left {
background-color: red;
}
#right {
background-color: blue;
}
If the view port width is smaller then the fixed width, the table will not overflow, but instead the columns will shrink (and the fixed column will try to take as much space as possible)