I have a YouTube iframe with a div as a sibling.
I started from this and all works great. (the title is visible and the video is clickable).
The problems started when I had to add a css scale transform on the stripWrapper div:
example.
As you can see this caused my title to hidden behind the YouTube video. In order to fix this I added a position: absolute; on the wrapper div, which caused the title to be visible, but now the video is not clickable.
When I reduce the z-index of the stripWrapper the video is clickable but the title is not visible: example
Comments:
1. The 80% width is only because I want JSBin's "edit" button to be visible.
2. "stripWrapper" must be 100% height
Last test's code:
HTML
<div class="wrapper">
<div class="stripWrapper">
<div class="strip">I am a title</div>
</div>
<iframe width="80%" height="100%" class="myIframe" src="http://www.youtube.com/embed/JTMf40ORFE8?playsinline=1&controls=0" frameborder="0" allowfullscreen=""></iframe>
</div>
CSS
.stripWrapper{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
right:0;
bottom: 0;
z-index: 10;
-webkit-transform: scale(1.05);
}
.strip{
position: absolute;
top: 20px;
left: 10px;
width: 80%;
background-color: green;
z-index: 12;
text-align: center;
font-size: 18px;
color: white;
}
.myIframe{
position:absolute;
top:0;
left:0;
right:0;
bottom: 0;
width: 80%;
height: 100%;
border: 1px solid blue;
z-index: 11;
}
edit: All tests:
test1 (everything is working, no scale)
test2 (added scale - div is hidden)
test3 (added position absolute - video not clickable)
test4 (changed z-index - div hidden again)
Check it out just need to make sure you are scaling the iframe and make sure the container has position:relative;
http://jsbin.com/wiluyiwire
Related
I've set up a lightbox using only CSS and my images are longer than the viewport. The background is scrolling but the images won't.
Live site: https://hwestdesign.com
I've tried changing the overflow to various different settings and on different selectors and nothing is working. I'm really new to this and I don't know if I'm just making a simple mistake. I've read threads that have similar problems but the solutions provided aren't working either.
This is the CSS code I currently have active:
.thumbnail {
max-width: 100%;
}
.lightbox {
display: none;
width: 300px;
height: 300px;
overflow: scroll;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
padding:10px;
text-align: center;
background: rgba(0,0,0,0.8);
}
.lightbox img{
max-width: none;
margin-top: 2%;
overflow-y: visible;
height: auto;
}
.lightbox:target {
outline: none;
display: block;
overflow: visible;
}
This is the HTML:
<div class="grid-item item1">
<img src="images/covers/hwest.jpg" class="thumbnail">
<img class="lightbox-content" src="images/hwestbranding.jpg">
</div>
When this loads the light box pops up and there is scrolling but it’s only the background underneath the light box that scrolls. The images are longer and I want to be able to scroll just the images vertically. Right now they are the right size but fixed. I’ve tried changing their position and the overflow but it does nothing
The combination of position:fixed and the overlay size is causing the issue. Setting an element to a fixed position removes it from the scroll context of the rest of the document. To resolve this you need to give the lightbox container a new scroll context by using the overflow property.
Note: you'll need to place the mouse cursor (pointer event) OVER the lightbox/modal specifically to cause the scroll. Otherwise, the "scroll" action will pass through to the document below
Here's an example:
And a link to codepen since its a bit difficult to see here.
body {
min-height:300vh;
background: url(https://images.unsplash.com/photo-1559291001-693fb9166cba) left top repeat;
}
.modal {
/* dark background overlay helps to position content */
position: fixed;
top:0; right:0; bottom:0; left:0;
background-color: rgba(0,0,0,0.6);
}
.modalInner {
/* put the white box in the right place */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* define how big it is before scrolling */
width: 80vw;
height: 80vh;
overflow-y: scroll;
/* look & feel */
background-color: #ffffff;
padding: 20px;
border: 1px solid #000;
}
<div class="modal">
<div class="modalInner">
<img src="https://images.unsplash.com/photo-1560010871-220685e68662" width="100%" />
</div>
</div>
What I am trying to accomplish:
- create a pop-up div (fixed), centered in view
- this pop-up should be 60% height of the browser window
- the contents of the pop-up should be an image and a 'x' above the upper right corner of the image
- the height of the image should be maximal, considering it should be contained in the div together with the 'x'
- the aspect ratio of the image should be maintained
I tried the following code
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" width="1200" height="630" alt="" title="" />
</div>
With CSS:
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
text-align: right;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
This code is not solving the problem, the image is not contained in the (yellow) div, as can be seen in the following screen shot:
http://www.michielvisser.nl/tmp/screenshot.jpg
How to contain the image in the div with maximal height for the image in the div and maintain aspect ratio?
SOLUTION 1: Remove the height and width from .pop-up and change height:100% in .image to height:60vh. That works perfectly. Apparently the child (img) will not adjust to the parent (div), but the parent (div) will adjust to the child (img). Sounds like real life.
SOLUTION 2: Essentially the problem arises when the window is resized (except in firefox). The solution can be to redraw the image after a resize, this solves the problem:
$(window).resize(function(){
$('img').hide();
setTimeout(function(){ $('img').show(); }, 1);
});
Your problems are:
You have an inline width and height set on your image, which is overriding the CSS styles for width and height on that image
The margin from your X is pushing the image down since the X is wrapped in a <p> tag.
You don't need object-fit at all.
The simple way to solve #1 is to delete the inline width and height from the image tag and leave it to the stylesheet.
Number 2 can be solved by wrapping the X in a div instead of a p, or you can use a pseudo element for it. I have taken the latter approach in the snippet below.
To solve #3, just delete the style from the stylesheet. (Having this property set in Safari actually messed things up for me.)
This snippet is tested in Safari 10.1.1. Note how the placeholder image is quite large by default (1000x800), but it only displays as big as it can per the parent div.
Edit: Based on your comments, let's revise this further so that we dictate the size on the image, and just let the wrapper take up the size of the image.
So on our image, in order to get it to be 60% as tall as the screen, we can do:
img {
height: 60vh;
width: auto;
}
Then, in our parent, we won't specify a width or height at all, but we can do display: flex just to make sure it is big enough to fit its contents.
body {
background: #333;
}
.pop-up {
display: flex;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: yellow;
}
.exit {
color: black;
text-decoration: none;
text-align: center;
font-size: 300%;
display: block;
position: absolute;
top: -50px;
right: -40px;
width: 40px;
height: 50px;
}
.image {
height: 60vh;
width: auto;
opacity: 0.7;
}
<div class="pop-up">
X
<img class="image" src="http://placehold.it/1000x800" alt="" title="">
</div>
I put the image above the P tag and added some CSS to .exit-button and .image
From here you can adjust padding and sizing of the elements.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
position: absolute;
text-align: right;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<img class="image" src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" width="1200" height="630" alt="" title="" />
<p class="exit-button">x</p>
</div>
I copied your code and edited it. Please tell me whether this is the output you wanted or not.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
padding-top: 30px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
margin-top: -50px;
text-align: right;
margin-right: 0;
font-size: 300%;
}
.image {
margin-top: -20px;
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" alt="" title="" />
</div>
Because of either needing to hardcode in the alignment of the image given the size or deal with weird convolution, I believe this is the best way:
Create a fixed overlay occupying the entirety of the screen, create a container of 60% height, align it in the center with flexbox and stick the image inside making it occupy the entire height. The aspect ratio will update automatically (only happens with height).
As for the button – give it absolute positioning and a right position of 0, and manually give the parent relative positioning (this is necessary).
<div id="popup">
<div id="container">
X
<img src="https://i.redd.it/gelilvo30mgz.jpg">
</div>
</div>
html,
body {
height: 100%;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#container {
position: relative; !important // has to be specified for the children (anchor) to find the bound
height: 60%;
background: #333;
}
a {
right: 0;
position: absolute;
}
img {
height: 100%;
}
https://jsfiddle.net/L2nLjjxc/1/
I believe that's the least amount of convolution if you want it to be dynamic.
I have a question.
I got this so far:
I basically want the highlighted div to cover your device screen no matter how big the device screen is. now i see 2 different divs when i open this on my phone. i only want to see the one that is highlighted. How do I achieve this?
Thanks in advance,
kevin
You could use viewport height as your height value:
.main {
height: 100vh;
background-color: green;
}
<div class="main">
CONTENT
</div>
Using height: 100vh means the element in question always be 100% height of the viewport a user / devie has.
More info: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
You can probably do that by setting the position of the div that you want to make fullscreen, to absoluteand then apply the below CSS.
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
Thus, the final css would be as follows
.fullscreen{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
}
You can use position: absolute; or position: fixed.
Use absolute for just making it cover the whole page.
Use fixed to make it nailed in a default position. If u use fixed, even though your page is more than 100% you cannot scroll down to see any other things.
CSS
div.any {
position: absolute; /*position: fixed;*/
top: 0;
left: 0;
width: 100%;
height: 100%;
/*You can add anything else to this like image, background-color, etc.*/
}
HTML
<div class="any"></div>
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: fill;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This should be easy, but I've spent a while trying to figure this out... I have a div that is 73px in height. I also have an Iframe that is suppose to stretch to the rest of the page but it overflows and I have two scroll bars (Iframe, and page). How can I have the div above the Iframe and have the Iframe in 100% height? I've also tried a negative margin and padding and that hasn't done anything.
Trying to get rid of the page scroll bar when using 100% and top: 73, but you can see the code for yourself.
I find this an interesting problem, so I've spent some time debugging the design on your page.
Now for me, the textarea always stretch exactly to the bottom of the page, not farther, and the page scrollbar does not appear.
Here are the modifications (I hope you did not change your code or stylesheets too much while I was debugging):
1.) - The "container" div:
Using bottom: 0 together with position: absolute ensures that the div stretch to the end of the page. Using height: 100% would cause the div to overflow! Using overflow: hidden does not allow the page scrollbar to show up.
<div class="container" style="position: absolute; top: 73px; bottom: 0; overflow: hidden; left: 50%; margin-left: -475px;">
2.) - The left pane ("span-12" div):
<div class="span-12" style="float: left; padding-top: 17px; width: 470px">
3.) - The right pane ("span-12 last" div):
You can use the same trick as with the "container"
div: absolute positioning and use of the top, right and bottom css properties.
<div class="span-12 last" id="friend_pane" style="position: absolute; top: 0; right: 0; bottom: 0">
4.) - And the iframe:
<iframe src="/friend/shell.php" frameBorder="0" allowTransparency="true" style="height: 100%; width: 100%">
EDIT - To make it center-aligned, I added "left: 50%; left-margin: -475px;" in the style of the "container" div. This tricks belongs to #clairesuzy, I didn't find it myself.
http://jsfiddle.net/HZTTp/:
<!doctype html>
<html>
<head>
<title></title>
<style>
html,
body {
margin: 0;
overflow: hidden;
}
body {
padding: 0 !important;
padding: 30px 0 0;
}
#top {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 100%;
overflow: hidden;
background: gray;
}
html
>
body
#bot {
position: absolute;
top: 30px;
bottom: 0;
width: 100%;
}
object {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bot">
<object data="foo"></object>
</div>
</body>
</html>
You can use a wrapper div on the iframe to specify where you want it's sides to be (top:73px; left:0; right:0; bottom:0;) with the help of position:absolute.
HTML:
<div id="head"></div>
<div id="main">
<iframe src="http://i.reddit.com/"></iframe>
</div>
CSS:
body { margin:0; padding:0; }
#head { height:73px; background:#c33; }
#main { top:73px; left:0; right:0; bottom:0; position:absolute; }
#main iframe { border:0; width:100%; height:100%; display:block; }
Demo: jsfiddle.net/fErZY
A bit tricky.. and most solutions work OK for the main part but IE7 doesn't like when a iframe is set to 100% tall without it's parent having an explicit height (in px, not percent) - so my solution is to absolutely position the container so you get the 73px top and 0 bottom co-ordinate you need - then it should be as simple as setting the #friend_pane div to 100% height, and then subsequently the iframe to 100%.. but that's the bit IE7 doesn't like.. so adding position: absolute; right: 0; also to the friend_pane div, along with the 100% height - then makes IE7 apply the 100% height to the iframe too.
There is leakage (small?), if that's what you've been referring to in your comments, that is to do with the iframes natural box model, but I found setting a negative bottom margin -4px on the iframe counteracts that
So with your code; remove all inline styles from .container #friend_pane and the iframe #friendpane_area
and add these styles:
.container {
position: absolute;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
Here's a demo of this with your page code:
JSBin HERE
Note: overflow:hidden; on the #friend_pane div instead of the negative 4px margin on the iframe will also cure the "leakage"
and to keep some general code in the answer.. a simplified demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FriendsConnect | My dashboard</title>
<style type="text/css" media="screen">
body {
background-color: #4DA2CA;
margin: 0px;
padding: 0px;
}
#mainbar {
background-image: url('http://friendsconnect.org/bar_fade.png');
background-repeat: repeat-x;
background-color: #494949;
padding-top: 6px;
height: 67px;
}
#infobox_left {
color: #444444;
margin-bottom: 15px;
padding: 15px;
background-image: url('http://friendsconnect.org/grp2.png');
background-color: #F2F2F2;
background-repeat: repeat-x;
float: left;
width: 440px;
}
#com-status {
border: solid 1px;
border-color: #3B7D99;
background-color: #4794B7;
padding: 15px;
float: left;
clear: left;
width: 440px;
}
.container {
position: absolute;
width: 950px;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
</style>
</head>
<body>
<div align="left" id="mainbar">Main bar</div>
<div class="container">
<div style="padding-top: 17px;" class="span-12">
<div id="infobox_left">
<font color="#000000">Welcome TEST, what's up?<br/></font>
SOCIAL POINTS <font color="#000000">0 Points</font><br/>
ACCOUNT STATUS <font color="#2C8231">No Problems Found</font><br/>
CONNECTBOX <font color="#000000">0 New Messages</font>
</div>
<div id="com-status">
<strong>Pete Allport commented on your status</strong><br/>Pete Allport Commented: Yeah bro thats beastt...
<div style="float: right;"><button>Close</button></div>
</div>
</div>
<div id="friend_pane">
<iframe id="friendpane_area" src="http://google.com" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>
which you can see:
JSBin Here
You can wrap your iframe in a div and set the div's position:fixed with top:73px then right, bottom, and left set to 0 so the div fills remaining space below your 73px header. Once your wrapper is set you can specify height and width to 100% for your iframe.
example: http://jsfiddle.net/pxfunc/KTwxb/
HTML:
<div id="header">Header</div>
<div id="wrapper">
<iframe id="frame" src="http://www.supercalifragilisticexpialidocious.com/"></iframe>
</div>
CSS:
html, body {margin:0;padding:0;height:100%;font-family:helvetica,arial,sans-serif;}
#header {width:100%;height:73px;}
#wrapper {position:fixed;top:73px;right:0;bottom:0;left:0;}
#frame {width:100%;height:100%;border:0;}
Here is an example. Only way I was able to hide the scroll bar was to set the iframe's html overflow property to hidden.
http://jsfiddle.net/nERqu/
HTML:
<div class="top">
<p>div text</p>
</div>
<iframe class="iframeBottom" src="http://www.google.com">
</iframe>
CSS:
.iframeBottom {
height: 100%;
width: 100%;
position: absolute;
scrolling: no;
}
.top {
height: 73px;
width: 100%;
background-color: yellow;
position: absolute;
z-index: 999;
}
It seems like iframe is being treated as an absolutely positioned element whether or not you actually specify that in the css. If its container is absolutely positioned, it should be able to fill the container using width:100% and height:100%.
In other words, if my theory is correct, the iframe isn't sizing "correctly" because it is searching for a positioned (i.e. relative, absolute, just not static) parent element. It needs to figure out how to adjust its size and the closest abs pos element is the browser viewing area itself. 100% height of the screen would normally fill the screen height, but the iframe is positioned down 73px, thus making it overflow by 73px.
Play with this a bit, it should be a nice step in the right direction:
<div style="position:absolute; width: 515px; top:73px; bottom:0px; right:0px;">
<iframe id="friendpane_area" style="position:absolute; width:100%; height: 100%;" src="./FriendsConnect My dashboard_files/shell.htm" frameborder="0" allowtransparency="true"></iframe>
</div>
Hi Folks Here is what i got in css:
#loading {
background:#000 url(loading.png) center;
opacity:0.5;
cursor:auto;
min-height:250px;
z-index:15;
}
#main {
padding: 10px;
z-index:1;
}
and in html:
<div id="loading">
<div id="main">Something here</div>
</div>
and i expect the loading.png to cover the div#main but it doesn't and "Something here" stays on the top of loading.png !?
Update: background is in CSS not an image in loading div.
Your HTML is wrong. The div main should be outside the div loading:
<div id="main">
<div id="loading"></div>
Something here
</div>
You also need to position the latter div using CSS so that it does not just push the main content out from underneath it, as well as sizing the div at 100% of its container's width and height:
#main { position: relative; }
#loading {
background: url("loading.png");
opacity: 0.5;
cursor:auto;
width: 100%;
height: 100%;
z-index:15;
/* Positioning */
position: absolute;
left: 0;
top: 0;
}