By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,844 Members | 836 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,844 IT Pros & Developers. It's quick & easy.

Cascading not happening with javascript page loading

P: n/a
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.

Mar 18 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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.

Mar 19 '06 #2

P: n/a
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)
Mar 19 '06 #3

P: n/a
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?

Mar 19 '06 #4

P: n/a
tu********@gmail.com wrote on 19 mrt 2006 in comp.lang.javascript:
<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("m eaningful_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.
//-->
same
</script>


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Mar 19 '06 #5

P: n/a
Evertjan. wrote:
tu********@gmail.com wrote on 19 mrt 2006 in comp.lang.javascript:
this.parent.make_global(document.getElementById("m eaningful_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.
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).

Mar 19 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.