How do I make my website go?

December 5, 2006 11:26 AM

Web Code Filter: Is there an excepted and conventional way to load a new HTML document within a DIV tag when a user clicks on an image outside of said DIV?

I've been doing a bit of research and it looks like IFRAME will do what I'm looking for, but it also looks like IFRAME is not a standard tag. My goal is to allow users to click on a thumbnail/icon inside of a right/left-hand navigation column DIV and bring up new content (ideally just another HTML document) inside of a larger central DIV for an image gallery. Any input you have time to spew in my general direction about this quandary will be greatly appreciated...

posted by joe_from_accounting to computers & internet (8 comments total)

iframes are fairly standard in that any modern browser that also does javascript (probably a precondition for the div setup you've described) will render one just fine.

If you're really allergic to iframes, you could do this with javascript and an XMLHttpRequest if all your HTML documents are on the same domain as the page you're making, or with javascript and normal frames elements if not. But it's a lot of gymnastics for what an iframe will give you mostly for free.
posted by weston at 11:40 AM on December 5, 2006

I'd suggest making them simple links. The iframe solution would work, but would require javascript be enabled. There are enough people out there that turn of javascript that that might be a concern. Since the only 'static' content on the page between the different clicks of your navigation bar seems to be the navigation bar itself, not reloading that would cause minimal savings in speed.

Just be sure the CSS is in a seperate file (to prevent re-downloading) as is any javascript (link via script tag). Those two things would make the response time quicker.
posted by cschneid at 12:23 PM on December 5, 2006

For all practical purposes, IFRAME is a standard tag.
posted by cillit bang at 12:30 PM on December 5, 2006

yes, there absolutely is. iframes are for the weak.

short answer follows:
--
prerequisite: new html document must be valid xhtml

solution: use xmlhttprequest to load new xhtml request as object, climb a few levels down the document object to get the content of the body tag, and add the resulting object as a child node of your div.

i have done this many times. for more information, read about AHAH.
posted by Señor Pantalones at 1:33 PM on December 5, 2006

Chuckle - I just finished a site where I had to retroactively remove my nifty 'iframe' content loader - because, it wasn't standard for their accessibility requirements.

Now, the thing that 'floored' me was the majority of the content being loaded in those 'iframes' was Flash files...

sigh...
posted by jkaczor at 1:38 PM on December 5, 2006

solution: use xmlhttprequest to load new xhtml request as object, climb a few levels down the document object to get the content of the body tag, and add the resulting object as a child node of your div.

If you are implementing this system using server side scripts the last bit is unnecessary -- just write a script that returns html to be stuffed into the div, and call that script using xmlhttprequest. Then you can just do

divname.innerHTML = request.responseText;

and boom you're done.
posted by myeviltwin at 1:44 PM on December 5, 2006

The iframe solution would work, but would require javascript be enabled.

Actually, I think that's not true. In this example, I've made several links, and just specified that their target has the name of the iframe. When the links are clicked, the iframe loads the targeted document. Tested in Safari and Camino only, tho', so you might want to check IE.
posted by weston at 1:45 PM on December 5, 2006 [1 favorite]

No, iframes don't require javascript, just a target attribute.

joe_from_accounting, the key question is, which browsers do you want to support?

In other words, are you happy to have a site which only works in major, recent browsers, say IE5 and Firefox, or do you have any kind of legacy support issues and would hate Netscape 4 users or text-only-browser users to miss out/see an error?
posted by AmbroseChapel at 4:52 PM on December 5, 2006