Evertjan. wrote:
tu********@gmail.com wrote on 19 mrt 2006 in comp.lang.javascript:
Anyone?
Please quote what you are replying to.
If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at the
top of the article, then click on the "Reply" at the bottom of the
article headers. <http://www.safalra.com/special/googlegroupsreply/>
Here is what I do in a nutshell:
I have a simple HTML page with a hidden IFrame. In the IFrame page, at
the end, I have the following javascript:
"this.parent.make_global(document.getElementById(" a_div_from_IFrame").i
nnerHTML);"
The make_global function resides in the main HTML page and it mainly
copies the given content to a global variable.
Later on, in the main page's onLoad event I substitute the innerHTML
of a div with the loaded content.
The problem is that the CSS of some of the innermost <div> tags from
the IFrame page doesn't show up correctly. (The background-image
doesn't show up at all).
But your code is in the iframe and directed to the container page,
so what would iframe page css have to do with it?
Container frame css does not cascade into the iframe page.
Can you point me in the right direction please? Or give me another
idea how to make a cross browser page loader? Thanks.
Show us the URL or a short version of a code demonstrating this behavour.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
What I mean is that I have a page structure like this:
"default.html" (main page, the index, the loader page):
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var global_variable_1 = "<p>No page founf</p>";
function make_global(variable_a)
{
global_variable_1 = variable_a;
}
function present_site()
{
document.getElementById("where_to_put_loaded_page" ).innerHTML =
global_variable_1;
}
//-->
</script>
</head>
<body onload="present_site()">
[...]
<div id="where_to_put_loaded_page">
Initial text here is: no page loaded.
</div>
<iframe style="visibility: hidden" src="page1.html"></iframe>
</body>
</html>
"page1.html" (loaded page):
<html>
<body>
[...]
<div id="meaningful_content">
Here I put the content that I want dynamically loaded in the main page.
</div>
[...]
<script language="javascript" type="text/javascript">
<!--
this.parent.make_global(document.getElementById("m eaningful_content").innerHTML);
//-->
</script>
</body>
</html>
So basically I send the content from the IFrame to the main page via a
global variable and take/replace it via innerHTML.
The address where you can see this is:
http://zamolxisinteractive.com/default.html (main page)
http://zamolxisinteractive.com/page1.html (content for iframe)
It is a bit more complex there but the mechanism is what I described
above.
The problem can be seen at the bottom of the telephone images. There I
end up with some <div>s that have a CSS class that should make them of
a certain size and put a background telephone image on them (same image
as the above 2 rows). (The text inside the divs is: "here should
appear a telephone image in background"). The CSS in both IFrame and
index page is the same one, template.css.
Is there something wrong with my approach?
