Topic awaiting preservation: HTML Content

I am new to HTML/Javascript, etc. I was looking at Dr. Ozones' website http://www.ozones.com . It seems like the background and images don't change, when you click on a button. A new window opens up with different HTML content within it. How is this implemented?

Very difficultly.

Dynamic HTML changing the visibility of the box containing text and the text inside of it via the innerHTML property of the HTML element (probably a DIV tag). The page is probably loaded in an invisible frame or IFrame.

If you're new to javascript, then it's probably above your head. Work on simpler things for now, like changing around form elements.

I understand how to use the innerHTML property. I understand it replaces text inbetween the beginning and ending tag. I would like to see how you can dynamically insert an external html page into the current document. I found a site that does this but I'm not sure if I can follow the code. For instance, if I had:

<DIV ID="ieContent" STYLE="position: absolute; left: 0px; top: -10px; width: 0px; height: 0px; z-index: 6; visibility: hidden;">
<IFRAME ID=ieframe FRAMEBORDER=0 WIDTH=0 HEIGHT=0 SCROLLING=NO SRC=""></IFRAME>
</DIV>

<DIV ID="contentLayer" STYLE="position: absolute; left: 0px; top: 0px; z-index: 7; visibility: hidden;"></DIV>

The user clicks an image map and the external html page is inserted into the <Div> tag. Is the a tutorial that dimastrates this techninque? I tried to pull this code apart:

function loadPage(menu_index,url_index) {
selected_index = menu_index;
selected_url = url_index;
rotation=true;
coreAction();
contentLyr.top = 20;
var page_width = (available_width-340);
if(is.ie4) {
contentLyr.width = page_width;
var page = document.all.ieContent.document.frames['ieframe'].document;
page.location.href = eval("menuArray[selected_index].url" + selected_url);
} else if(is.ns4) {
contentLyr.load(eval("menuArray[selected_index].url" + selected_url),page_width);
}
}

I know (without showing all of the code) that the line:

page.location.href = eval("menuArray[selected_index].url" + selected_url);

Inserts the new page, but how?

Ah, that uses a slightly different, more straightforward technique. Instead of using innerHTML, it actually uses a visible IFRAME to display the content. The line

var page = document.all.ieContent.document.frames['ieframe'].document;

makes the variable "page" a reference to the document that the IFRAME contains. Then, by setting page.location.href, you are able to change the page that the IFRAME contains.

I believe this is actually flawed; the ".document" at the end of the line I quoted shouldn't be there. The Location object is a property of the Window object, not the Document object. The Document object also has a location object, but it's pretty much deprecated and doesn't have the href property.

BTW, there are no real tutorials on this stuff, as far as I know at least. I believe the reason for that is that most people who implement these things are able to figure them out on their own; people who only follow tutorials (and especially people who use cut & paste scripts) rarely get to that level. The people who succeed in coding are the ones who figure things out on their own.

From what you've told us, I don't believe you fall into that category; you'll be able to figure this out. Keep working at it.

Hey Slime (and I haven't tried anything like this so I'm just guessing) wouldn't the iframe be actually a child "document" of the parent doc? Wouldn't that make the second .document necessary to properly refrence the iframe doc? of course most of the time the document ref itself is superflous anyway so it shouldn't really matter.

Totally shooting from the hip here, it just reminds me of how in NN4 you used to refrence embedded divs CSS properties with document.layer.document.someCSS type syntax.



.:[ The Tao of Steve ]:.
Be Desireless
Be Excellent
Be Gone
...................................

"wouldn't the iframe be actually a child "document" of the parent doc? Wouldn't that make the second .document necessary to properly refrence the iframe doc?"

document.all.ieContent.document.frames['ieframe'] is the Window object of the page contained inside the IFRAME. This is essentially the "top level" object in which code is run in that page. By adding .document to it, you get that page's document object, which mainly contains information about the document (all the DOM stuff; references to all the HTML elements and their style sheets and other properties).

"of course most of the time the document ref itself is superflous anyway so it shouldn't really matter."

Well, Maybe not in IE. But it *does* matter, because the Location object that's a property of the Window object has the behavior that when you change it (like location.href = '...'), it reloads the page with the new URL. The location object that's a property of the Document object does *not* have that behavior, so technically, the code shouldn't work. Unless I overlooked something, which is entirely possible.

Okay,

I think I am close. I published my website to the Internet http://members.cox.net/twardone . The only menu option that actually works is under menu1 option 1.

The problems that I am experiencing are as follows.

1. The background is not showing through the <Div>
2. I want to automatically resize the window based on the html page being loaded.
3. The animated gif (the bird) stops flying after you make the first menu choice.
4. The page load is not smooth.
5. I would like for the page to load, and everything be visible except the window that holds the html content. I want this window to only be visible after the user clicks a menu option.
6. The menu stops working, correctly.


Any help would be greatly appreciated.




[This message has been edited by T-Bone (edited 04-12-2002).]

1) Its not just a div, its also an IFRAME, there are special things you must do to have transparent IFRAMES. I did it here.
2) I do not beleive this is possible. I think it has been asked before but don't remember a solution being found.
3) try adding return false; after your function to load the frame is called (ie onClick="loadFrame(); return false;"
4) maybe cut down image sizes, using an iframe uses more memory than just a div.
5) Simply put it on its own div and show/hide the div when needed.
6) I didn't understand ur problem here.

Hope these help a bit. I am extremely tired. Sorry they are so short.
-dk

- can't decide? have another drink.