Evertjan. wrote:[color=blue]
>
tudortihan@gmail.com wrote on 19 mrt 2006 in comp.lang.javascript
:
>[color=green]
> > Anyone?[/color]
>
> 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/>
>
>[color=green]
> > 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).[/color]
>
> 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.
>[color=green]
> > Can you point me in the right direction please? Or give me another
> > idea how to make a cross browser page loader? Thanks.[/color]
>
> 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)[/color]
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?
