I have a 2 iframe's one (iframe1) which is 100% of the page, and the 2nd (iframe2) hovers over the first one.
How can I set the height of the main body to that of iFrame1 so that the scroll bar is on the main page and the iframe2 is anchored to the top of the main page?
i do this to do some custom tracking but right now the iframe2 scrolls down when I scroll the content of iframe1 which is done in its on iframe
here is what i have so far:
<html>
<head>
<style>
body{background:#efefef; height:100%; padding-top:40px;}
#wrap{margin:20px 20px 50px;}
</style>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#iframe_1
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
#iframe_2
{
position:fixed; left:0; top:0; margin-top: 440px; margin-left: 425px; width:300px; height:500px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="iframe_1">
<iframe width="100%" height="100%" src="http://www.loudounsmilecenter.com/our-services.aspx" frameborder="0" allowtransparency="true" ></iframe>
</div>
<div id="iframe_2">
<iframe width="600px" height="600px" src="about:blank" frameborder="0" allowtransparency="true" ></iframe>
</div>
</div>
</body>
i want the iframe_2 to be over the "" section in iframe1. because they aren't same domain i have cross-domain issues so i have to do an overlay with iframe to track.
because the scroll is in iframe_1, iframe_2 doesn't anchor to that section
let me know if you have any ideas.
Related
The idea is that all iframes show the end of the page, where the pressure map is. But when they are created, iframes don't appear in the same starting position, so when I try to scroll them all down, some cross the threshold!
<html>
<head>
<style>
iframe {
height: 200px;
width: 100%;
border: none;
}
.iframe-container {
height: 120px;
width: 700px;
overflow: auto;
overflow: hidden;
float: left;
}
</style>
</head>
<body style="background-color:black;">
<div class="grid games" id="jogos-sofascore">
<div id="select-box-5" style="width: 100%;">
<div class="iframe-container" >
<iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed"></iframe>
</div>
</div>
</div>
<script>
function atualizar() {
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
}
setInterval(atualizar,5000);
</script>
</body>
</html>
I tried using a way to scroll to the top and then to the end:
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = 0)
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
But it didn't work, the iframes weren't scrolled to the beginning as they should.
How could I solve this problem making the scroll-to-end-of-page event malleable regardless of the start position of iframes?
Expected Result:
Current Result:
You need to set the height of the iframe to the height of the content.
Currently, you are setting the height of each iframe to 200px. However, the height of the content varies for each individual source. If the height of the source of the iframe is less than 200px, you will "overscroll". In this case, you can to apply a specific height to each iframe.
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
<html>
<head>
<style>
iframe {
width: 100%;
border: none;
}
.iframe-container {
height: 120px;
width: 700px;
overflow: auto;
overflow: hidden;
float: left;
}
</style>
</head>
<body style="background-color:black;">
<div class="grid games" id="jogos-sofascore">
<div id="select-box-5" style="width: 100%;">
<div class="iframe-container" >
<iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed" height="200"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed" height="155"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed" height="155"></iframe>
</div>
</div>
</div>
</body>
</html>
Note that you can get the height of the content of the iframe by going to the source of it and getting the body's offsetHeight (e.g, document.body.offsetHeight).
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
<html>
<head>
<style>
iframe {
width: 100%;
border: none;
}
.iframe-container {
height: 120px;
width: 700px;
overflow: auto;
overflow: hidden;
float: left;
}
</style>
</head>
<body style="background-color:black;">
<div class="grid games" id="jogos-sofascore">
<div id="select-box-5" style="width: 100%;">
<div class="iframe-container" >
<iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed" height="200"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed" height="155"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed" height="155"></iframe>
</div>
</div>
</div>
</body>
</html>
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
<html>
<head>
<style>
iframe {
width: 100%;
border: none;
}
.iframe-container {
height: 120px;
width: 700px;
overflow: auto;
overflow: hidden;
float: left;
}
</style>
</head>
<body style="background-color:black;">
<div class="grid games" id="jogos-sofascore">
<div id="select-box-5" style="width: 100%;">
<div class="iframe-container" >
<iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed" height="200"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed" height="155"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed" height="155"></iframe>
</div>
</div>
</div>
</body>
</html>
https://games.app.goo.gl/xBJcfuDt4gSMEDe96
I am trying to create a responsive iframe that will get a map, but when I resize the browser, it resizes using the aspect ratio, and I would like him to remain filling the entire space. As in this example: http://dev.fhmp.net/tailorfit/demo/, in the case where the overflow is crop.
Today it looks like this:
.iframe-rwd {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section id="container">
{% include "main/header.html" %}
{% include "main/sidebar.html" %}
<section id="main-content">
<section style="padding-right: 0px;padding-left: 0px;" class="wrapper">
<div class="iframe-rwd">
<iframe
name="main-content"
src=""></iframe>
</div>
</section>
</section>
</section>
In the past i've just set the iframe width to 100%, if you have the iframe in a responsive container than it will always take that width and retain whatever height you set the iframe to.
This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.
HTML
<div class="iframe-rwd">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071&output=embed"></iframe><br /><small>View Larger Map</small>
</div>
css
.iframe-rwd {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This question already has answers here:
Auto-Fit iFrame Height
(2 answers)
Closed 7 years ago.
I'm trying to adjust my iframe with one scrollbar and auto height the iframe but i dont know how. How can i do that?. The code is here
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<body>
<iframe src='http://www.dohop.com/widget/2/?forms=flights&target=&tabs=top&orientation=horizontal&border_color=808080&text_color=202020&background_color=D0D0D0&form_border_color=808080&form_text_color=000&form_background_color=FAFAFA&width=1000&flang=es&whitelabel=http://vuelos.gangatravel.es/' scrolling='yes' width='1000' height='250' frameborder='0' style='border:none; overflow: hidden;' allowtransparency='true'>
</iframe>
<div style='text-align: right; width: 1000px; display:block; margin-top:5px;'>
<a href='http://www.dohop.com' style='font-size:10px;text-decoration:none;color:#007BA4;'></a>
</div>
You can just allow the iframe taking the full width and hide the body overflow. For this, modify your HTML to following,
<body>
<iframe src='http://www.dohop.com/widget/2/?forms=flights&target=&tabs=top&orientation=horizontal&border_color=808080&text_color=202020&background_color=D0D0D0&form_border_color=808080&form_text_color=000&form_background_color=FAFAFA&width=1000&flang=es&whitelabel=http://vuelos.gangatravel.es/' scrolling='yes' frameborder='0' style='border:none;' allowtransparency='true'>
</iframe>
<div style='text-align: right; width: 1000px; display:block; margin-top:5px;'>
<a href='http://www.dohop.com' style='font-size:10px;text-decoration:none;color:#007BA4;'></a>
</div>
</body>
And use the following CSS,
iframe{
min-width:100px;
width:100%;
height:100%;
}
body{
overflow:hidden;
height: 100%;
margin: 0px;
padding: 0px;
}
html {
height: 100%;
}
adding the following to the head section of the code might solve the problem
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
add this as an atttribute inthe iframe element
onload='javascript:resizeIframe(this);'
<style type="text/css">
.xyz {
position: absolute;
top: 100px;
left: 140px;
z-index: -1;
}
#container {
position: relative;
overflow: hidden;
opacity: .2;
}
</style>
<body>
<div>
<video id="container" autoplay loop muted>
<source src="<%=request.getContextPath()%>/Files/images/sample.mp4" type="video/mp4">
</video>
<div class="xyz">
<a href="<%=request.getContextPath() %>/Files/jsp/Home.jsp">
<img src="<%=request.getContextPath() %>/Files/images/play.png" height="50" width="50"
onmouseover="this.src='<%=request.getContextPath()%>/Files/images/Koala.jpg'">
</a>
</div>
</div>
</body>
The anchor tag here is not working.
The image play.png should change to Koala.jpg on mouse over and when clicked Home.jsp should be displayed. But the code is working without div. Using anchor in div neither image is gettig changed using mouseover nor linking to Home.jsp.
Just remove z-index from the CSS . Changed code :
.xyz {
position: absolute;
top: 100px;
left: 140px;
}
I created a "master page" in jsp using frameset, and I included the master page in my other jsps where i have a in the where the contents will be. How can I change the size of the whenever the window size changes?
Below is my sample code :
masterPage.jsp
<html>
<frameset style="border: 0;" rows="135,*,38" style="z-index:1" >
<frame id="headerFrame" noresize="noresize" name="ffwHeader" frameborder="0" scrolling="no" src="header.jsp" style="z-index:1" />
<frame name="ffwMenu" frameborder="0" scrolling="no" src="menu.jsp" style="z-index:3" />
<frame name="ffwFooter" noresize="noresize" frameborder="0" scrolling="no" src="footer.jsp" style="z-index:1" />
</frameset>
index.jsp
<html>
<head>
<title>Upload A Disposition Rule</title>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>
</head>
<body >
<div id="bodydiv" align="center" style="position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: 1080px; overflow: auto; ">
<!--contents-->
</div>
<iframe src="masterPage.jsp" name="masterPage" />
</body>
Thanks in advance.
Currently your bodydiv is defined as
<div id="bodydiv" align="center" style="position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: 1080px; overflow: auto; ">
Since you specified in the comment to the first answer by #user8900 that you want the bodydiv to be resizable when the window size changes, it sounds like you want to alter the width style attribute on your div.
<div id="bodydiv" align="center" style="position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: '100%'; overflow: auto; ">
At that point, however, I think you could probably just remove the width style attribute from the div altogether. Further, as a general coding style note, you should think about moving all of your CSS style definitions to a .css file (or at least the existing <style> head section.)
<head>
<title>Upload A Disposition Rule</title>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
#bodydiv { position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: '100%'; overflow: auto; }
</style>
</head>
<body>
<div id="bodydiv" align="center">
<!--contents-->
</div>
(etc...)
</body>
If you want to change the size of the iframe relative to the 'window' size, try using percentage values - with the body width at 100% E.g.
<iframe src="masterPage.jsp" name="masterPage" style="width: 80%; height: 80%;" />