J
Julia Briggs
How do I construct a <iframe> or equivalent for FireFox/NS browsers,
inside a screen centered <div> tag? Can it be done?
inside a screen centered <div> tag? Can it be done?
FireFox/NS experts: <iframe> inside <div> question -- help pls!
M
mscir
Julia said:
Does this work for you?
<style type="text/css">
..inline {
background-color: #FFAABB;
text-align: center;
height: 520px;
width: 520px;
}
..if1{
width: 500px;
height: 500px;
}
</style>
<div class="inline">
<iframe class="if1" SRC="http://www.google.com">
</iframe>
</div>
R
RobB
mscir said:
Since this is a JS group, I assume you meant programmatically...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>foo</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
#container {
width: 70%;
height: 70%;
margin: 40px auto;
background: pink;
}
</style>
<script type="text/javascript">
//<![CDATA[
function IFramePopulate(ctr_id, src)
{
var ctr;
if (ctr = document.getElementById(ctr_id))
{
while (ctr.hasChildNodes())
ctr.removeNode(ctr.lastChild);
var ifrm = document.createElement('IFRAME');
//ifrm.frameBorder = 0; //optional
ifrm.style.width = String(ctr.offsetWidth + 'px');
ifrm.style.height = String(ctr.offsetHeight + 'px');
ctr.appendChild(ifrm);
ifrm.src = src;
}
}
//]]>
</script>
</head>
<body>
<div id="container"></div>
<div style="text-align:center;"><a href="#null"
onclick="IFramePopulate('container',
'http://www.google.com')">go</a></div>
</body>
</html>
R
Randy Webb
RobB said:
Why rely on a JS dependency when its not needed?
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
J
Julia Briggs
Ok, how can I get that to auto-center as an absolute layer? I've tried
different ways, but can only get it to display in a fixed position.
Julia
different ways, but can only get it to display in a fixed position.
Julia
M
mscir
Julia said:
If you mean how can you center the div on the page using CSS, while this
might not be the best newsgroup for a CSS inquiry, did you try:
margin: auto;
maybe something like:
..div1{
width: 420px;
height: 420px;
margin: auto; /* center div on page */
text-align: center; /* center iframe in div */
}
<div class='div1'>
<iframe>
</iframe>
</div>
T
Toby Inkster
Julia said:
div.layer {
position: absolute;
left: 50%;
width: 200px;
margin-left: -100px;
}
R
RobB
Toby Inkster said:
Thought I covered that: "Since this is a JS group, I assume you meant
programmatically..."
Took the meaning of "construct" as signifying "after load" as
otherwise it's simply an HTML-related query. Could be incorrect,
although this:
....didn't help elucidate the issue. fwiw...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>foo</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
#container {
position: relative;
width: 600px;
height: 400px;
margin: 40px auto;
border: 3px #000 double;
background: pink;
}
</style>
<script type="text/javascript">
//<![CDATA[
function IFramePopulate(ctr_id, src)
{
var ctr;
if (ctr = document.getElementById(ctr_id))
{
while (ctr.hasChildNodes())
ctr.removeNode(ctr.lastChild);
var ifrm = document.createElement('IFRAME');
ctr.appendChild(ifrm);
ifrm.frameBorder = 0; //optional
ifrm.style.width = '450px';
ifrm.style.height = '300px';
ifrm.style.position = 'absolute';
ifrm.style.left = String((ctr.offsetWidth - ifrm.offsetWidth) * .5)
+ 'px';
ifrm.style.top = String((ctr.offsetHeight - ifrm.offsetHeight) * .5)
+ 'px';
ifrm.src = src;
}
}
//]]>
</script>
</head>
<body>
<div id="container"></div>
<div style="text-align:center;"><a href="#null"
onclick="IFramePopulate('container',
'http://www.google.com')">go</a></div>
</body>
</html>
Yes. I know, it's JS....
R
Randy Webb
RobB said:
Does that mean if they ask how to set the color of an element, in a JS
group, then you will give them a JS solution instead of an HTML/CSS
solution?
Just because a question is asked in a particular group does not mean
that the answer is necessarily the topic of that group.
But this message is not posted solely to c.l.j, it is also posted to
alt.html
Again, why rely on a JS dependency when its not needed?
R
RobB
Randy Webb said:
This is silly. Here's the original Q:
When I read that, it seemed unlikely that anyone would be asking if
they could 'construct' an iframe (HTML) inside a div (HTML) - that's
like posting "can I put a image inside a paragraph?" Not impossible,
but unlikely. I interpreted it as a request for a dynamic solution.
But, you're right, I am deeply ashamed, and I'll never post here again
after this unforgiveable lapse.
Maybe.
