I create overlays on facebook games. These games are displayed within iframes.
I can render either 500px * 500px or 700px * 700px;
I have to detect the size of the iframe that embeds the game to know what overlay I should render.
The only suitable technique I found was to create a div with width 100% and height 100%, and then to retrieve his size with javascript.
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: #f0e68c;
}
The condition to make it work is to set html and body height to 100%. Else the container's height retrieved is 0.
My question is: do you think that body height = 100% and html height = 100% can break the page that contains the game ?
I want to believe it does not have any consequence on the page :)
But in the same time, I know that the default value for body and html is auto, not 100%.
I might be missing some key piece of information here.
What do you think ?
Thank for your advices !
No, style rules within an iframe cannot impact the parent page.
Setting height to 100% means that it will always take the size of the viewport. As you are including an iframe that does not impact any other DOM element outside, it will not impact on your website
Related
I am creating a site where i have given the elements static widths and heights. The website also includes images. When i resize the window, all the elements bundle up together (for example, in full window mode there are 3 images in a line whereas when I resize the window only 1 image is shown per line). Also all other elements get stacked up on each other. I wanted to know how can I prevent this and let all the elements in the same order as they are when in full window by giving it a side scroll bar on the bottom. For reference, see the Facebook login page: facebook login page. You might need to logout.
When you resize it, it simply gives a side scroll bar on the bottom and all elements remain in the same order. Is it possible to do this just with HTML or CSS or do I have to use JavaScript. Thanks a lot in advance!
By applying the following Css:
body {
min-width: 1280px;
overflow-x: scroll;
}
Just replace the pixel value with the required width.
you need to make the width of the body fixed to a specific px (the width of your window), for 1000px example
body {
min-width: 1000px;
max-width: 1000px;
overflow-x: auto;
}
If you add overflow-x: scroll; or overflow-x: auto; to the body, that should do the trick. Also don't forget to add a min-width and max-width as well to make it take effect.
The code below takes the height of the navigation (50px, this is important for later) and the height of the viewport then sets the max-height of the image to be viewport height minus navigation height.
I do this so that the image will always be fully visible, no matter how tall it might be. Unfortunately, this has a small drawback.
Whenever I refresh the page, for a split second I could see the image before the JavaScript height has been applied. After comparing the difference in height using Photoshop, I realized the difference is exactly 50px which is the height of the navigation. This makes it clear that the image uses the CSS rules for a split second before the JavaScript kicks in.
Now my question is this - can I make it so that the image doesn't get displayed until the JavaScript manipulation has been applied to the image?
CSS
.specific-image {
display: block;
max-height: 100vh;
max-width: 100%;
margin: 0 auto;
}
JavaScript
function fitImage() {
var navHeight = $("nav.navigation").outerHeight();
var viewport = $(window).height();
$(".specific-image").first().css({"max-height":viewport-navHeight});
}
Chrome for iOS hides its address bar when the user scrolls up. This feature does not work well with 100vh (or any vh unit) because as the toolbar shrinks, the viewport height changes and thus the size of the element changes. I have a cover image with 100vh and it causes a very noticeable jitter as the length of the entire page grows or shrinks.
The problem exists for any height set with vh, I think.
I can (and probably will) resort to javascript to set my cover image height, but I'd prefer to use vh.
Any clever ideas?
I'd recommend using 100% instead of 100vh - you can add this...
body{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
From there, any element without another wrapper that has its own height will be able to fill the full screen just using width and height at 100%. Example below!
https://codepen.io/will0220/pen/KXqoGZ
Problem: I have a page that looks terrible <480px and doesn't display enough relevant information to the user.
Attempted Solutions:
(ex. 320px screen) set the initial scale to 1.5, but then I need to set the scale accordingly for all the screen sizes between 320-480px.
(ex. 320px screen) set the width of your viewport to 480px, however this makes you need to scroll around the screen instead of zooming out like setting the scale would do.
Question: What it seems I need is a combination of the two solutions. One that will scale my viewport, but only until it shows a min-width such as 480px worth of content on the screen. Is this possible without javascript or is solution #1 what I would need to do?
Other considerations: Solution needs to work on all browsers/mobile (IE11+)
I'm not 100% sure what you are trying to do but if I understand correctly, you can set this in css. Setting the width to 100% will keep it flexible to your viewport window & setting a minimum width will not allow it it get any smaller than that.
html,body {
width: 100%;
min-width: 480px;
height: auto;
}
Have you attempted to use media queries ?
For example:
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
I want to set an iframe.children video of any website as a div.parent background. the children iframe will always be bigger than parent div and parent div overflow will be hidden. Iframe will also keep aspect ratio. I found some jquery plugins but I want to understand how it works. Please help me.
What you're talking about is basically intrinsic ratio†. A ratio must maintain width and height at a constant relative value so when width increases or decreases, the height of a video does likewise of course. We can do this by creating a container (usually a <div>) that has the desired dimensions (usually 16:9 for widescreen or 4:3) and place the iframe and/or video within that container.
The technique commonly employed for a responsive video embedded within an iframe is as follows:
box (a.k.a container, or wrapper)
This div will be triggered by any re-sizing. For any element in the DOM a re-size involves calculation of height and width at the least.
Further down this post I made a simple demo.
Notice the width: 100%and the padding-bottom: 56.25%.
If width increases from 100px to 200px , then height increases from 56.25px to 112.5px.
The ratio of 16:9 is constantly maintained by setting the padding-bottom: 56.25%. If you have an older video with the aspect ratio‡ of 4:3, you'd use padding-bottom: 75% If you have a non-standard aspect ratio like 8:21, you can find the padding-bottom percentage by dividing the denominator by the numerator like so: 8/21 = .38 = 38% (The quotient was rounded down).
So the funky padding-bottom percentage acts like an inflatable cushion that inflates or deflates according to when width changes, but only enough to re-size the height within the parameters of the ratio.
The extra padding-topis to counter the huge padding-bottom otherwise the video will be pushed too far and cause overlapping of elements. The height:0 is probably not necessary as this weird value was to deal with I.E.6. I just left it in there just for that edge case (you know just in case you time traveled back to 2001 or you live in a cave in the middle of the Gobe Desert.)
iframe
The rule sets for the iframe are a lot easier to explain. Simply put, the iframe (and the video) height and width are stretched to fit perfectly within .box. So basically it's .box that does all the work and the iframe goes along and conforms to the dimensions of .box.
.box {
position: relative;
padding-bottom: 56.25%;
/* [56.25%= 16:9 ] [ 75% = 4:3 ] [ 41.66% = 24:10 ] */
padding-top: 25px;
height: 0;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
<div class="box">
<iframe id="ifrm" src="https://arcx.s3.amazonaws.com/av/test.html"></iframe>
</div>
By now you should be thoroughly confused by my ramblings, so I strongly advise you to read these articles:
Creating Intrinsic Ratios for Video
Fluid Width Video
What is Aspect Ratio?‡
A Box with an Intrinsic Ratio†