I am trying to position a large container div 60 pixels above the browser bottom so as to make room for a video stream and still images, very similar to this solution here.
Unlike the common sticky/fixed type footer, the container is kept in its place on visiting the page and subsequent browser resize - but can be scrolled up for users wanting to explore the site's content.
Looking at the sample site, I can see that the CSS property "top" changes on browser resize, but I can't find the mechanism that accomplishes this.
How should I go about achieving this kind of elasticity?
Thank you very much in advance!
You can do this with Javascript along the lines of
setTop = function(e) {
document.getElementById('content').style.marginTop = window.innerHeight - 60;
};
window.onresize = setTop;
Full working example:
<html>
<head>
<title>My Page</title>
<style type="text/css" media="screen">
#content {
width: 80%;
margin: 0 auto;
border: 1px solid black;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
Here is the content...
</div>
<script type="text/javascript" charset="utf-8">
setTop = function(e) {
document.getElementById('content').style.marginTop = window.innerHeight - 60;
};
setTop();
window.onresize = setTop;
</script>
</body>
</html>
Related
I have embedded a streetview map that I want to only perform the action to look around (by click and drag with the mouse or with the compass) but not to move to a direction.
I tried by applying pointer-events to none but that stops all pointer actions.
Here is a link to my code: https://jsfiddle.net/Dimgk1984/8tnxo3as
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View controls</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!4v1518736193836!6m8!1m7!1szChzPIAn4RIAAAQvxgbyEg!2m2!1d29.56028532748453!2d-95.08539144618427!3f213.12!4f0.18000000000000682!5f0.7820865974627469" style="margin-top:-100px" width="100%" height="1000" frameborder="0"allowfullscreen >
</iframe>
<style>
.map-container {
pointer-events: none;}
</style>
</body>
</html>
Try to set StreetViewPanoramaOptions to False and/or LinksControl. On Gmaps streetview API reference they also mention streetViewControl. Try it. Its pretty well documented on their reference page.
I'm attempting my first web video project and am getting nowhere and need a little help with using a full width video header or background.
I found an example that does what I am trying to do using the below videos and it works just fine - no buffering, acceptable quality, etc.
The .mp4 file uses a 640x360 format # 23 fps (613kbps) and this works fine on any display I view it - the whole frame is visible top to bottom, side to side.
The research I've done indicates the best video format to use is 720 x 24fps, which I have tried (actual dimension is 1280x720) but found it only works well on less than maximized browser resolutions, in which case, it looks great, otherwise, a small portion of the bottom, maybe the bottom 18% of the frame, is not visible until you scroll down, which is unacceptable. I need the video to work as well as the 640x360 with the whole image visible. In addition, buffering occurs with the 720 format, whereas there is no buffering with the 640x360.
I am using Sony Vegas for the video editing and there is no option for a 640x360 format. The closest is 640x480 but that produces the same result - to tall and the bottom is not visible.
There is a site that uses the 1280x720 format successfully (http://mazwai.com/#/) but I have no idea how.
Can someone point me in the right direction?
Thank You.
This is the current code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
<style>
body{ margin:0px; background:#000; max-width:1000; }
#bg_container{ height:800px; overflow:auto; }
#bg{ width:100%; }
</style>
</head>
<body>
<div id="bg_container">
<video id="bg" src="www.parishpc.com/images/720.mp4" autoplay loop muted"> </video>
</div>
</body>
</html>
This code worked a little bit better - only the bottom 5% was not visible:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<style>
body, html { margin: auto;
background:#fff;
height: 100%;
}
header {
height:100%;
width:100%;
overflow:hidden;
position:relative;
}
.video {
position:fixed;
top: 50%; left: 50%;
z-index:1;
min-width: 100%;
min-height: 100%;
width:auto;
height:auto;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<header>
<video autoplay loop class="video">
<source src="www.parishpc.com/images/720.mp4" type="video/mp4">
</video>
</header>
</body>
</html>
If anyone is still trying to make the video take up the entire viewport, this can be done with the following code ->
(I am also fairly certain this requires you to add the video through your .html using the tag, instead of adding it as a background in your css properties)
Set your parent container you want to fill the video with to:
position: relative;
Add the following properties to your video:
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
z-index: -2;
object-fit: fill;
Try
body {
margin: 0;
padding:0;
}
and remove transform: translate(-50%,-50%); from video class
This should work
Let me know if you require any further help
I'm not sure exactly what you want, but having a video background without stretching or cut off parts is impossible to do while accommodating to every user's window size.
This solution will make sure the video is 100% of the window's height. If they want to see the cut off parts they'd have to resize their window to fit the width.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
height: 100%;
width: auto;
}
.video {
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<video autoplay loop class="video">
<source src="http://www.parishpc.com/images/720.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
I thought I had CSS floats figured out but apparently I don't because I can't figure out why this page is behaving the way it is. I'd like for the photo and status divs to each take up 50% of the screen such that both of them appear on the same line and that line takes up 100% of the screen. But what is happening is that the "Stats" div renders below the "Photos" div. The only way I can get them to render on the same line is to reduce their respective widths to 49% (or lower) but then there's a slight gap between the right edge of "Stats" and the edge of the screen. There's something that's taking up additional room but I don't know what it is and I don't see anything in Chrome's Dev Tools. By the way, reset.css is just Meyer's reset.
Thanks.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../../reset.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="content-main">
<div class="photos">Photos</div>
<div class="stats">Stats</div>
</div>
</body>
</html>
base.css
.content-main {
width: 100%;
}
.photos {
float: left;
width: 50%;
background: #cf6;
}
.stats {
float: left;
width: 50%;
background: #bbb;
}
I found my error. If add additional padding to each of the elements, that creates the problem. I left that out of my question so that code shown above will work. My bad.
I'm having some trouble figuring out how to extend an iframe to 100% of it's container element in Firefox and IE (it works fine in Chrome). From searching around, it makes sense that there has to be a height specified on the containing div (and possibly body and html as well). However, I have done that, and the iframe is still not extending. Do all of the parent divs have to have a specified height and position for this to work, or just the containing parent? Any fix for this would be greatly appreciated!
Here's what I have:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {margin:0; padding:0; height:100%}
#container {width: 1000px; min-height: 550px; position: relative}
#smallContainer {position:relative} /*no height specified*/
#iframeContainer {height: 100%; position: relative}
#iframe {height: 100%; width: 100%; display: block}
</style>
</head>
<body>
<div id="container">
<div id="smallContainer">
<div id="iframeContainer">
<iframe id="iframe" src="foo.com"></iframe>
</div>
</div>
</div>
</body>
</html>
You might need a combination of..
$(function(){
var height = window.innerHeight;
$('iframe').css('height', height);
});
//And if the outer div has no set specific height set..
$(window).resize(function(){
var height = window.innerHeight;
$('iframe').css('height', height);
});
Try this Jquery script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
var height = window.innerHeight;
$(document).ready( function(){
$('iframe').css('height', height)
} );
</script>
I want to have a 2 column layout, and have the left column able to be 200 px at first, and have a "shrink" button to shrink it down to 10px, and have the right column expand to fill all the rest of the available space. Then if they click on the "show" button (which will be all they see in the now 10px wide left column) have the left grow back to 200px and have the right column shrink by that amount.
I can't figure out how to make the right column grown and shrink without knowing the exact width of the window.
I hope this makes sense, and I really hope someone can point me in the right direction.
Browser requirements are IE8, FF3.6, Safari, and Chrome, so in theory I can use some advanced CSS techniques. At least I don't have to support IE6.
If you float your left column (float: left;) with variably a width of either 10 or 200px, and simply add overflow: hidden; to the styles of the right column, the right column will expand and contract to fill the space, whatever the site of the left column is.
Something like this should do the trick:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css" media="screen">
html, body { height:100%;}
#container { overflow:hidden; height:100%; }
#sub-content { background:yellow; float:left; height:100%; width:200px; }
#main-content { background:red; height:100%;}
#container .shrink { width:10px; }
</style>
</head>
<body>
<div id="container">
<div id="sub-content">
Sub content
<a id="toggler" href="#">Toggle</a>
</div>
<div id="main-content">
Main content
</div>
</div>
</body>
<script type="text/javascript">
var link = document.getElementById('toggler');
link.onclick = function() {
var subContent = document.getElementById('sub-content');
if (subContent.className == 'shrink') {
subContent.className = '';
} else {
subContent.className = 'shrink';
}
return false;
}
</script>
</html>
it would help if you put your sample on http://jsbin.com/, but try the following:
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}
and then make the right column width 100%.
Is this what your are looking for?: http://jsbin.com/uweqe3