Little Dynamic Div

To layer or not to layer?

[eeblet]

I've been doing this with jsp includes and reloading the document with event handlers, but it seems really poor form to reload the page for mouseOvers, so I ask of you:

What I'm trying to do: have onClick & onMouseOver & onMouseOut of DIVs w/in a list change the contents of another DIV on the same page. I want the contents of the changing DIV to be external files. Is the only way to do that with layers? I have the luxury of only needing to support IE 5+ & NN 6+.

Let me know if I'm being unclear....

Thanks!
Beth

[joshie76]

I'm not entirely sure what you're after but if you need to dynamically download content into a section of a page then you probably want to be using iframes [htmlhelp.com].

If you could elaborate a little more as to what you need to do I can probably offer a more complete solution.

[eeblet]

Here's a static img of the basic idea; list items on the left control src of div on the right. For example, the "welcome" LI might look like: <LI><DIV id="foo" onClick="funcThatChangesColorAndLoadsBox( foo )">

Is this an iframe thing, then?

Thanks! :)

<URL snipped>

(edited by: Marcia at 7:01 pm (utc) on April 23, 2002)

[joshie76]

You could use Iframes but this would lead to a pretty unresponsive dynamic page. If you just load up your content in the first place it'll all look a little smoother. Admittedly there'd be a bigger overhead on the first load of the page ... I guess it depends how much content there is to load into each section.

If you use the iframe method your LI items could simply be links that target the iframe (like a normal frame):

<a href="welcome.htm" target="myIframe">welcome</a> 
<iframe name="myIFrame" ......etc

Or if you choose to load the whole thing up at once and do it dynamically you just need to put your content in a series of layers all positioned at the same spot with their visibility set to hidden.(style="visibility:hidden"). Your funcThatChangesColorAndLoadsBox(foo) would then set the relevant layer's visibility to visible.

Hope I'm not drifting off down the wrong road there.

Josh

[srwebman]

eeblet,

I've been looking for a way to do the same thing. Basically, I have found two options that seem viable - the same two that Joshie outlined. Either I use iframes, in which case I have all the navigational/branding limitations that come with frames, or I download an entire site's worth of content with the first download.

neither option really suits me. If I find something better, I'll tell you.

[eeblet]

I don't have that much content -- a paragraph or two for each menu item (there will be up to 20 menu items). I'm hesitant to use layers, just cause i fear buggy behavior in browsers, and at least the iframe is nestled neatly within the TD rather than floating ethereally above it (thus potentially overlapping it!). Is this unreasonable paranoia if I'm sticking to IE5+ & NN6+?

[srwebman]

I would go with the layers option since you're using such a small amount of copy for each layer. In fact, you could load each paragraph into JavaScript variables, and then use DHTML to refresh the InnerHTML property of a single layer. This way, you won't have 20 layers stacked on top of each other.

The browsers you mentioned can both handle this functionality. It gets messy when you need to design for NN4, but you should be alright.

Good luck!

[eeblet]

hm... that does sound appealing. the only reason external files appeal to me is that way my coworkers (who are writing the text) can just create a bunch of files and not have to worry about getting lost in DHTML. but I could always have a bunch of simple jsp includes plucked up by a javascript function (for example, when the user clicks on "welcome" it calls a JS function that writes as innerHTML the jsp include "/include/welcome.jsp". Hm. this seems inelegant.

[joshie76]

Changing the innerHTML property comes at a more costly overhead* (in terms of processor legwork) than changing a layer's visibility. Since your source is going to have the same weight either way, personally, I would definitely go with the layered option.

Eeblet, could you stickymail me a URI so I can see what you're doing dynamically?

*Admittedly it won't require a cray to change the innerHTML, but it will be slower, probably notably so on older clients. The reason it's slower is that the browser will have to recalculate the document flow (lie of the land so to speak).

[eeblet]

unfortunately, it's all on our dev server & with the jsp and whatnot, there's no clean way for me to post it publicly. after trying a buncha different things, here's what seems to be the cleanest solution given my 3 priorities (fast-loading, content easy-to-update/create for non-webbish people, easy for me to maintain [no style redundance])....

- javascript controls the source of an iframe
- each external file consists of
- a jsp include that contains header schtuff (doctype, charset, inline style), same file for each page
- the text
- a jsp include that contains footer schtuff (closing tags)

does this sound about right?

[MikeFoster]

Hi eeblet,

Have a look at the two urls in my profile - they are applications of what I call my "Panel Interface" - especially the second one. They are examples of how to do this with dhtml, and not use the iframe.