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%;" />
Related
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.
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:
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);'
I've managed to do a Iframe that shows only certain part of the page with this code:
<div id="divContainer" style="display: block; margin-left: auto; margin-right: auto;">
<div id="frameContainer" style="overflow:hidden;">
<iframe src="http://www.cofm.es/informacion-corporativa/buscador-farmacias" scrolling="no" style="width: 1000px; height: 750px; margin-top: -330px; margin-left: -250px;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />
</div>
Source: iframe to Only Show a Certain Part of the Page
Now what I'm trying to do is to make the Iframe show on the 100% width on the screen. I've been able to do this with images with this code:
<img style="width: 100%; display: block; margin-left: auto; margin-right: auto; " src="http://i.ytimg.com/vi/ROv863DuJu4/maxresdefault.jpg" />
I'm trying to make the iframe adapt to the screen size like the image does.
Iframe is an inline element - You need to set css " display:block " - then you can make it 100% and it will scale - Hope this helps.
here is an example - you would have to set the containing element to full width as well..
<iframe style='display:block;width:100%' src='http://someurl.com'></iframe>
https://jsfiddle.net/cqgfqgqk/
I have made 3 websites
http://ice-os.com
http://hannahmontana.sf.net
http://demilovato.sf.net
they use an iframe on the main page index.html and load all the pages in this iframe
what i want to do is if some goes to say http://en.ice-os.com/home.html instead of index.html I want to
reload this home.html in my index.html in the iframe
how can this be done?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{padding:0;margin:0;}
.myFloatBar{
top:0;
left:0;
width:50px;
position:fixed;
}
<style>
<style type="text/css">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style></head><body style="background-color: rgb(35, 35, 35); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="margin-left: 50px; font-family: monospace;"><iframe id="tree" name="tree" src="home.html" marginheight="0" marginwidth="0" frameborder="0" height="100%" scrolling="auto" width="100%"></iframe></div>
<div class="myFloatBar"><span style="font-family: monospace;"> </span><span style="color: rgb(233, 233, 233); font-family: monospace;">ć°·Bar</span><img src="http://ice-os.com/images/home.png" alt="Home" title="Home" onclick="document.getElementById('tree').src='home.html';document.title='Home'" style="width: 48px; height: 48px;"><img onclick="document.getElementById('tree').src='downloads.html';document.title='Downloads'" style="width: 48px; height: 48px;" alt="Downloads" title="Downloads" src="http://ice-os.com/images/downloads.png"><img onclick="document.getElementById('tree').src='links.html';document.title='Links'" style="width: 48px; height: 48px;" alt="Links" title="Links" src="http://ice-os.com/images/links.png"><img style="width: 48px; height: 48px;" onclick="document.getElementById('tree').src='projects.html';document.title='Projects'" alt="Projects" title="Projects" src="http://ice-os.com/images/projects.png"><img style="width: 48px; height: 48px;" alt="Revision Control" title="Revision Control" src="http://ice-os.com/images/revisioncontrol.png"><img style="width: 48px; height: 48px;" onclick="document.getElementById('tree').src='contact.html';document.title='Contact'" alt="Contact" title="Contact" src="http://ice-os.com/images/contact.png"><img onclick="document.getElementById('tree').src='about.html';document.title='About'" style="width: 48px; height: 48px;" alt="About" title="About" src="http://ice-os.com/images/about.png"></div>
</body></html>
Wow, it's been a while, but I've seen this done with Javascripts that force users into framesets. I remember it from back in the late 90s, but I think it's kind of fallen out of favor since users have generally hated frames. (Usually this was for navigation on sites that, for whatever reason at the time, either didn't support server-side includes or perhaps the developer didn't understand includes...)
You can probably Google "javascript open page in frameset" and find a sample.