table/ cell targeting

[Bengal313]

Here is a question for all those super webdesigners. I have a page that has 3 columns., (25%, 50%, 25%) named table left, middle, right. What I need to do is have all my main navigation on the left table...home, about us, contact us, programs.

Have the content in the middle table.

Have related links in the right table.

Now, with out using frames, iframes is there a way I can....

When click on the link in the left table the content related to that link loads in the middle and links related to this page loads in the right table. At the same time the page stays static and the main navigation (left) stays the same. I need the effect of frames without using them. I dont want to have a template and reload a new page over and over. Thank you everyone that can help!

[STDestiny]

There is a way you can do it using DHTML layers. The downside to that is that, A, it makes the page extremely long-loading, because it must load all of the layers when the page loads, and B, it's not supported in all browsers. Your best bet (even though I know you said you can't) is to use frames.

[Bengal313]

If I do use frames can I...
When clicking on a link on the left have the content load in the middle frame and have a third page load in the right frame. Basically have three frames one with the navigation, one with the content, and a third with related links. If possible explain......

[brothercake]

You could use <object src="file.html"> - you can change the src through script, and style the object with CSS.

You wouldn't need any tables to do that ;)

[Bengal313]

I am kinda new at this is there a way you can give me an example I can learn from?

[ronaldb66]

Bro,

<object src="file.html"> How is browser support on that? Because it seems like the best thing since sliced bread: including page fragments without the need for client or server side scripting...

[Difinity]

Be careful w/ frames though. I've heard from 2 different sources that frames are getting written out of the next version of HTML. I'd check around to find out what I could about that.

To do what you are wanting I use the iframe tag. It loads a totally separate page into a defined space like a frame, but for my uses it works better than frames.

Also, I use drop down menus using JScript that will NOT cross frame bounds.

[whackaxe]

<object src="file.html">

thy holy grail if that does work. i would maybe use js with the innerHTML property on a div

[Catman]

It should be <object data="file.html"></object>

As for support: IE 5+ for PCs and Macs support object, Netscape 6+ support object (with a few quirks in 6), Mozilla supports object (with a big quirk -- it wants to render the html file fully, even if that extends it beyond the confines of the object), and Opera 7 supports object. Lynx will not, of course, but that you take care of with the contents of the object element (such as a plain html menu of the embedded files).

[brothercake]

Originally posted by Catman
It should be <object data="file.html"></object>
Yeah it should, sorry.

Do you know how to manipulate the contens through script? I've been trying this, but it doesn't work:

<object type="text/html" width="640" height="320" id="doc" data="/">

</object>


<script type="text/javascript">

function changeDocumentLocation(uri)
{
var docObject = document.getElementById('doc');
docObject.data = uri;
}

</script>

<ul>
<li><a href="javascript:changeDocumentLocation('/')">home</a></li>
<li><a href="javascript:changeDocumentLocation('/scripts/')">scripts</a></li>
<li><a href="javascript:changeDocumentLocation('/games/')">games</a></li>
</ul>

[Bengal313]

Does anyone have an example of what "brothercake" is talking about. I need help understanding this stuff. I know an example would explain alot.

[brothercake]

This is a bit of a hack (quite a lot of a hack) but it works.

<div id="doc" style="border:2px inset;width:640px;height:320px;">
<object type="text/html" width="640" height="320" data="/"></object>
</div>

<script type="text/javascript">

function changeDocumentLocation(uri)
{
var docDiv = document.getElementById('doc');
docDiv.innerHTML = '<object type="text/html" width="640" height="320" data="' + uri + '"></object>';
return false;
}

</script>

<ul>
<li><a href="/" onclick="return changeDocumentLocation('/')">home</a></li>
<li><a href="/scripts/" onclick="return changeDocumentLocation('/scripts/')">scripts</a></li>
<li><a href="/games/" onclick="return changeDocumentLocation('/games/')">games</a></li>
</ul>

There must be a better way ... shurely ...

[giz]

>> thy holy grail if that does work. <<


I tried it on a navigation bar (just the nav bar inside the object file) placed inside the left table cell of a two cell table (left is nav, right is coontent), just to see what happens.

Netscape 4 totally ignores it, so no site nav at all. Search engines would get the same view (so nav bars are a bad thing to try with this).

Mozilla 1.1 rendered it, but the height was too short, it was too wide, and it overlapped the content of the right hand table cell. I added width and height attributes and that fixed it.

IE 5.5 rendered it, but with a right-hand scroll-bar without a scroller in it. Without width and height attributes IE failed to render it.

Additionally, when the nav bar was actually visble, clicking the navigation opens the new page only inside that left-hand table cell, not in the whole window.

This might be useful for something, but nav bars are not it.

[brothercake]

For legacy and SE support you put content inside the object:

<object ...>
<ul>
<li><a href="/">home</a></li>
<li> ... </li>
</ul>
</object>

[Bengal313]

I tried to get the above code to work but when I preview in browser (IE6) I get my c:/ Directory. What gives? Has anyone else tried to get this code to work, if so please send me a copy at shakim@hotmail.com. I tried but shamefully failed. NEED HELP!