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);'
Related
I have a task to launch 2 pdf's in a single html page and do the pdf's comparsion side by side, so I have create 2 iframes for each comparing, however I have a problem on sync the scroll bar behaviour, like when I move the vertical scroll bar on the left side web page(iframe1), then the scroll bar on right side web page(iframe2) will move as well. Is there anyone know how to do it? or other method beside using iframe, but available to launch 2 web pages and sync the scroll bar? Thanks in advance.
Here is the code im trying
<html>
<head>
<script src="http://code.jquery.com/jquery-1.3.2.js"></script>
<style>
.container {
width: 80%;
height: 200px;
margin: auto;
padding: 10px;
}
.div1 {
width: 15%;
height: 200px;
float: left;
overflow:auto;
border:1px solid black;
}
.div2 {
margin-left: 15%;
width: 15%;
height: 200px;
overflow:auto;
border:1px solid black;
}
</style>
<SCRIPT>
$(document).ready(function()
{
$("#div1").scroll(function () {
$("#div2").scrollTop($("#div1").scrollTop());
$("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () {
$("#div1").scrollTop($("#div2").scrollTop());
$("#div1").scrollLeft($("#div2").scrollLeft());
});
$($("#iframe1").contents()).scroll(function(){
$($("#iframe2").contents()).scrollTop($(this).scrollTop());
});
});
</SCRIPT>
</head>
<body>
<section class="container">
<div id="div1" class="div1">
<iframe id="iframe1" src="sample.pdf" style="width:600px; height:500px;"></iframe>
</div>
<div id="div2" class="div2">
<iframe id="iframe2" src="sample.pdf" style="width:600px; height:500px;"></iframe>
</div>
</section>
</body>
</html>
I'd like to build a website with a full height whatever the user's screen. Scroll is impossible, everything is shown in the page.
I tried something like :
<body>
<div class="header">
test
</div>
<div class="central">
test
</div>
<div class="footer">
test
</div>
</body>
html,body{
height:100%;
}
.header,.footer{
height: 20%;
background-color:blue;
}
.central{
min-height:60%;
background-color:red;
}
It works in my screen with a big resolution but not in my 15", page is scrollable. If body is limited to 100%, why all the elements aren't in the page?
JSFIDDLE
Thanks.
Because the body has built-in margin.
Just remove it.
A normal CSS Reset would generally have this as standard.
html,
body {
height: 100%;
margin: 0;
/* see? */
}
.header,
.footer {
height: 20%;
background-color: blue;
}
.central {
min-height: 60%;
background-color: red;
}
<body>
<div class="header">
test
</div>
<div class="central">
test
</div>
<div class="footer">
test
</div>
</body>
I think it's because the body has margins. Try :
html,body {
height:100%;
min-height:100%;
max-height:100%;
margin:0px;
padding:0px;
}
set min height to html tag and remove default margin, padding to body tag
html{
min-height:100%;
}
body{
padding: 0;
margin: 0;
min-height:100%;
width: 100%;
height: 100%;
}
I'm trying to embed an Youtube video inside a Div, but the video appears outside the Div.
I'm using a library called mb YTPlayer to do that.
My website demo:
I would like to put the video inside the div with red background.
My code:
CSS:
.screen{
background-image: url('img/window.png');
width: 950px;
height:390px;
margin:auto;
}
.videoprom{
padding-top:91px;
padding-left:5px;
}
.videoprom span{
display:block;
width:940px;
height:390px;
background-color:red;
}
My HTML:
<div class="screen">
<div class="videoprom">
<span class="test">
<a id="video" class="player" data-property=
"{videoURL:'https://www.youtube.com/watch?v=vLUNWYt3q1w',containment:'.test',autoplay:true, mute:true, startAt:015, stopAt:110, opacity:5}"></a></span>
</div>
</div>
How can I fix that? Thanks.
Add a relative positioning to the div to fit into the container and then adjust the padding or margin.
.screen {
background-image: url("img/window.png");
height: 390px;
margin: auto;
position: relative;
width: 950px;
}
#wrapper_mbYTP_video {
margin-top: 90px;
}
Output:
I'm using the load method to load a webpage with in my website.
// main.js
$(document).ready(function ()
{
$("#content").html("<object data='http://tired.com/'>");
});
// index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/main.js"></script>
<style type="text/css">
#container{
width: 100%;
height: 100%;
}
#content{
margin-top: 10;
margin-left: 100;
margin-bottom: 10;
margin-right: 10;
width: 500px;
height: 500px;
}
</style>
</head>
<title>
Testing loading a html page into a div
</title>
<body>
<div id="container">
<div id="top">
<p> Top </p>
</div>
<div id="content">
</div>
<div id="bottom">
<p> Bottom </p>
</div>
</div>
</body>
</html>
In spite of giving the content div a height and width of 500px, the webpage still loads in it's original size.
How do I make it larger?
Thanks.
It does work, check this fiddle.
JSFiddle Demo Link
You also might want to add px to your margins.
#content{
margin-top: 10px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 10px;
background:skyblue;
width: 500px;
height: 500px;
padding:10px;
}
I would recommend trying to set style on the object tag itself:
#content object {
width: 500px;
height: 500px;
}
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%;" />