Cascading not happening with javascript page loading

T

Tudor Tihan

Hi,

This is my first post here, so please be kind.

I have tryed to make a javascript html page loader by using an
invisible <IFrame> and some javascript variable text passing between
entities.

This seems to brake the CSS after some depth, or perhaps I am not
understanding something.
The idea is that I have an inner <div> that has a background image and
it does not show up in the loaded page.

Can you help me with it please?

http://zamolxisinteractive.com/default.html

Thanks.
 
T

tudortihan

Anyone?

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").innerHTML);"

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).

Can you point me in the right direction please? Or give me another idea
how to make a cross browser page loader? Thanks.
 
E

Evertjan.


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
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.
 
T

tudortihan

Evertjan. said:
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


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.


Show us the URL or a short version of a code demonstrating this behavour.

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("meaningful_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?
 
E

Evertjan.

<script language="javascript" type="text/javascript">

leave the language="javascript" out, not needed anymore.

leave the <!-- out, not needed anymore.
this.parent.make_global(document.getElementById("meaningful_content").i
nnerHTML);

You cannot call a javascript function from a child iframe, I presume.

You could however easily test for that,
also by duplicating this function in the iframed page.
 
T

tudortihan

Evertjan. said:
You cannot call a javascript function from a child iframe, I presume.

You could however easily test for that,
also by duplicating this function in the iframed page.
Evertjan.
The Netherlands.

well, the function works, because the HTML tags arrive where they
should be. Only the css
does not work correctly, certain parts of the css to be more exact.
(background-image is the worst).

I've solved it for now by using embedded styles instead of classes, but
I really dont like that.

What other ways to dynamically load a html page with javascript are
there?
(I mean to have a part of a page show any of the site's loadable html
subpages).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,021
Latest member
AkilahJaim

Latest Threads

Top