The idea for the website is that there is a video playing in the background that takes up the entire width and height of the browser when you go to it. Then you scroll down and get to rest of the content. So far I have the video part of it working. The part that is causing me trouble is a picture of an iphone that also needs to be included. About half of the phone is covering up a part of the video. The other half you need to scroll down to see (along with the rest of the content). I need the phone to 1. Always appear in that position, no matter the window size; and 2. Scale to be the same ratio of phone size to window size.
I've tried many things to get this functioning, it just hasn't seemed to work for me yet.
<script>
$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});
</script>
</head>
<body>
<iframe id="video" src="http://www.youtube.com/embed/SLTVLIjvdnw?HD=1;autoplay=1;controls=0;showinfo=0;" frameBorder="0" allowfullscreen></iframe>
<div id="box">
<img id="iphone" src="img/phone.png" alt="iPhone" />
</div>
<div id="test"></div>
</body>
html, body {
border: 0px;
margin:0px;
padding:0px;
}
body {
overflow: hidden;
}
#test {
width:400px;
height:400px;
background-color:blue;
}
#box {
position:absolute;
max-width:280px;
left:10%;
top:380px;
}
#iphone {
max-width: 100%;
}
Here is a pure CSS solution, assuming I understood the problem correctly:
http://jsfiddle.net/5aVZa/1/
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.video {
background: black;
width: 100%;
height: 100%;
}
.iphone {
width: 50%;
margin: 0 auto;
display: block;
margin-top: -25%;
position: relative;
z-index: 2;
}
Related
How can I get rid of this extra white space that iframes create? I am using a reference to a web app but, as far as I know, it should stretch to any 16:9 aspect ratio window. This isn't happening though. It seems this happens with other videos too, but the sides are often transparent. Is there a way I can do that here? Thanks
HTML:
<body background="images/Background.png">
<iframe id="primaryVideo" src="http://54.202.201.116/app/5/">
<p> Your browser does not support iframes. </p>
</iframe>
<button id="restart" left="1%">Start Over</button>
</body>
CSS:
#videoWrapper{
height: 100%;
}
#primaryVideo{
width: 80%;
height: 80%;
border: none;
position: absolute;
float: left;
display: inline;
}
div{
text-align:center;
}
I dug into the layout of that address and found the real location of the video. I applied the styles suggested from this old but still relevant article. It's 100% responsive. If you don't want it as big as the viewport, adjust the width of div.frame accordingly.
Demo 1 is the actual video in an iframe, Demo 2 is the site the has the video within the iframe. The player in Demo 2 looks like videoJS plugin so if you play the video through that, then the dimensions are up to the site which is still responsive. You can't see it functioning on SO because the site in question does not support https. Check it out at this Plunk.
Demo 1
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://s3-us-west-2.amazonaws.com/static.tapmedialabs/tap_media_intro_video_v8.mp4' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>
Demo 2 see Plunk for a functioning demo
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://54.202.201.116/app/5/' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>
i have website embedded inside iframe to use in webview application
<body>
<iframe id="iframe" src="http://www.medicamall.com"></iframe>
</body>
this is CSS Code
body {
margin:0;
padding:0;
height:100%;
}
#iframe {
border:none;
width:100%;
height:calc(100% + 200px);
position: absolute;
overflow: hidden;
}
i need to hide specific 200px from the bottom of the iframe
it works for me when i use height:calc(100% + 200px);
but when scroll to the bottom of the page it's appear with scroll
how to prevent this area from shown in scroll also
You need to move your CSS to hide the overflow to a the parent container of the iframe.
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#iframe {
border: none;
width: 100%;
height: calc(100% + 200px);
position: absolute;
}
You can see an example on my plnkr.
http://embed.plnkr.co/xFXzg7g90Itpuee6hKB9/
I want to make the div 30% of the height of the window and then on click make it 90%. The thing is I'm only being allowed to specify widths in percentages but with height it breaks unless its px. Any thoughts? Here's a link:
http://codepen.io/chris86/pen/avvWwJ
Here's the html:
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<div id="button" class="banner" value="Switch Class"></div>
Here's the CSS:
.banner {
background-color: #c3c3c3;
height: 100px;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 200px;
width: 80%;
padding: 0;
margin:0 auto;
}
And the jQuery:
$(function() {
$('#button').click(function(){
$(".banner").switchClass("banner","bannerbig",'fast');
$(".bannerbig").switchClass("bannerbig","banner",'fast');
return false;
});
});
The reason your code breaks is because using percentage as the value for height or width is dependent on the height of the parent. As far as the DOM is concerned, the only element that has absolute height / width by default is the document object.
So, you have to specify the first DOM elements which don't have absolute height by default as a percentage of the document's height, like so:
html, body {
height: 100%;
}
Then use the appropriate percentage heights for your .banner and .bannerbig classes in CSS:
.banner {
background-color: #c3c3c3;
height: 30%;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 90%;
width: 80%;
padding: 0;
margin:0 auto;
}
Hope this helps.
<div id="first">Something</div>
<div id="last">something too</div>
<style>
#last {
position: absolute;
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
}
#first {
}
</style>
My problem is that I can't reach last div with the border of the first div. I want last div to be at bottom and first div to have overflow:auto;? But it doesn't work. When I fill my div some text nothing is showing no scrollbar or anything like that and the first div kind of goes behind the last div even though I haven't assigned them any z-index values.
How Can I solve this? I want my first div to grow until it reaches last div and fill it with text maybe with scrolling appearing when it is only needed. I mean when two divs touch each other kind of.
This will give you a fixed size footer (#last) but the content (#first) expands as needed:
body {
margin: 0px;
padding: 0px;
}
#wrapper {
position: absolute;
top: 0;
bottom: 200px;
left: 0;
right: 0;
}
#first {
background-color: #5588FF;
width: 100%;
max-height: 100%;
overflow-y: auto;
}
#last {
background-color: #FF8855;
position: fixed;
bottom: 0px;
height: 200px;
width: 100%;
}
See this fiddle for the full solution: http://jsfiddle.net/xWa9f/4/
Is this what you want? Fiddle link: http://jsfiddle.net/emw2x/2/
body, html{
height: 100%;
}
#last {
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
border: 1px solid black;
width: 100%;
height: 10%;
}
#first {
border: 1px solid red;
height: 90%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
}
Give that a try to see if that's what you want.
if you accept some javascript in the mix, i have this solution for you.
first, change the absolute positioning to fixed positioning of the #last div.
set overflow:auto to the #first div and the javascript does the rest (you need jQuery):
(function () {
var heights = window.innerHeight;
var outerHeights = $("#last").outerHeight(true);
jQuery('#first').css('height', (heights - outerHeights) + "px");
})();
basically it calculates the window height of your monitor, it subtracts the height of the #last div and gives what's left to the #first div. when the content exceeds the available pixel height, a scroll bar will appear.
check it here: http://jsfiddle.net/vlrprbttst/rR7Uu/2/
the plus here is this works at any window resolution, so you don't have to worry about screen resolutions and you don't have to worry about the height of your #last div (margins, paddings, borders, whatever included)
I would like to do something with my document which is quite unique (haven't seen it before) and thus maybe not even possible.
What I would like is to have a div which will overlay everything in the document, maybe give it background black so that nothing is visible. Second I would like to have a small squire window in the overlay which doesn't share the black background, in fact it is somewhat transparent and therefore it would be possible to 'peek' trough that window to see document content. But only the content where this window is. It would be kinda like those "zoom" plugins in which only a small portion is being zoomed, but in this case it would show specific content. Any idea how to create such a thing?
An example of what you can do is the following (it may not be the best but it works)
HTML
<div id='peakview'></div> <!-- This div is your view window -->
<div id='out'>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
</div>
The <div> inside of #out will re-size accordingly to the position of #peakview creating the illusion of a full overlay. This can be done with simple css and some calculus.
Mainly what you need is the position of the element on screen.
var h = $(this).offset().top;
var l = $(this).offset().left;
var r = ($(window).width() - ($(this).offset().left + $(this).outerWidth()));
//right offset
var b = ($(window).height() - ($(this).offset().top + $(this).outerWidth()));
//bottom offset
In my example I used .draggable() from jQuery UI to move the div around. And while dragging the 4 divs shown above are adjusting their height and width to fill up the space between #peakview and document border.
An example for the first div
$('.overlay:eq(0)').css({
top: 0,
left: 0,
width: '100%',
height: h //the height is always changing depending on the #peakview .offset().top
});
In this fiddle you will see how the filling divs behave
Another ruff start:
http://jsfiddle.net/XDrSA/
This require some extra work, but it may suit your needs.
HTML:
<div id="yourContent" style="width: 300px; margin:100px auto;">
<input type="button" id="zoom" value="Click to zoom"/>
</div>
<div id="zoomer">
<div id="window">This is your "window"</div>
<div id="overlay_top"></div>
<div id="overlay_left"></div>
<div id="overlay_right"></div>
<div id="overlay_bottom"></div>
</div>
CSS:
body {
margin:0;
padding:0;
}
#zoomer {
height: 100%;
width: 100%;
position: absolute;
top: 0;
display: none;
}
#overlay_top {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
top: 0
}
#overlay_right {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
right: 0;
}
#overlay_left {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
left: 0;
}
#overlay_bottom {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
bottom: 0;
}
#window {
margin: 0 auto;
height: 100%;
width: 80%;
position: absolute;
background-color: rgba(0,0,0,.5);
}
And a piece of javascript:
$('#zoom').click(function() {
$('#zoomer').fadeIn();
});
You may need to stumble with the positioning, and the window will be a fixed size one. Not draggable though.