how do I set my Iframe in screen for mobile devices - javascript

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%;
}

Related

Resize iframe pic to match the layout

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.

Navigation bar : position Absolute and Sticky

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 move images slightly up on scroll using Jquery?

I'm trying to create a simple parallax effect using Jquery (without plugins). Basically I have a few different images layered on-top of each-other and need them to move slightly upwards at different speeds when a user scrolls down, similar to a parallax scrolling effect.
Here's the layout so far (excuse the sloppy code):
body {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
background-color: #ededed;
z-index: 4;
display: table;
}
.header {
position: relative;
width: 100%;
background-color: #ffde15;
height: 900px;
margin-left: auto;
margin-right: auto;
}
.headertopimg {
position: absolute;
width: 100%;
z-index: 10;
}
.headerbehindimg {
position: absolute;
width: 100%;
z-index: 9;
top:0%;
}
.headerbehindbehindimg {
position: absolute;
width: 100%;
z-index: 8;
margin-top: 8%;
}
.headerbgimg {
position: absolute;
width: 70%;
z-index: 7;
left: 50%;
margin-left: -35%;
}
<body>
<div class="header">
<div class="headertop"><img src="http://i.imgur.com/z2DORfA.png" class="headertopimg"> </div>
<div class="headerbehind"><img src="http://i.imgur.com/o1Yl0PD.png" class="headerbehindimg"></div>
<div class="headerbehindbehind"><img src="http://i.imgur.com/VQxs9LD.png" class="headerbehindbehindimg"></div>
<div class="headerbg"><img src="http://i.imgur.com/t5fTRZe.png" class="headerbgimg"></div>
</div>
</body>
Any help would be much appreciated!

Absolute positioned element not extending with scrollable content (past 100%)

I have a popup window in which an element called fade is supposed to extend to the full width of the screen (it does this when there is no scrollable content). However when content exceeds 100% of the browser window it does not extend to 100% of the page height.
If i set html, body { height: 100%; overflow-y: hidden; } I get the result I want but then I get 2 scrollbars on the right hand side.
http://jsfiddle.net/Dpqg5/
HTML
<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>
CSS
#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }
Any ideas on how to get this element to extend fully to the height of the web browser even when there is more scrollable content?
set your fade css to:
#fade {
display: none;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

How to resize iframe when parent window resizes

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%}

Categories