Well, almost...

joba — Sat, 13 Oct 2001 19:29:19 +0000

First of all, many thanks for your help!

I mixed your suggestions, did some browsing on the web and came up with a solution to make a table change dynamically the content of another table, closer to what I wanted. You can check the result on arakno.net. Comments and criticism will be very welcome! I opted for this because personally I dislike the absolute positioning requirement for layers and also because they do not allow javascript use (inside the layer, that is). Layers can make your html code messier as well, if you're using many with long pieces of text.

So I used innerHTML the following way:

I have a script that has arrays for each content:
var content = new array;
content[0] = "The first text";
// I use this to load external html files, if they have scripts on them
content[1] = "";
content[n] = ...;

Then, on the options table I have:
option1

option 2
...
and so on

And on the destination table (or any other place holder) I have a tag:
...

Advantages (at least I think they are advantages for what I had in mind):
-No need to use absolute positions that were pissing me off whenever the window was resized or moved, forcing me to use code to check that.
-Use of text when it is needed, or external files on the fly with not that many scripting code
-external files can themselves use javascript

Disadvantages:
-you tell me
-not crossbrowser (did not check with NN6+)

THAT'S IT!

joba — Thu, 11 Oct 2001 14:31:15 +0000

THAT'S EXACTLY IT!

Gee, I was hoping for some "high-level" spec of hints and guidelines and I even got the whole code working the way I needed!

Thanks!

detox — Wed, 10 Oct 2001 04:42:31 +0000

this should be crossbrowser. Did you want to have content shown from the links or just a description of the link?

I have done this with layers but you could do it with innerhtml etc. The prob is crossbrowser stuff. I have more experience with this than inner html.....

either way this should work ok:

<?php
  

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">

<html>
<head>
    <title>Untitled</title>
    
</head>

<body>




&lt;script language=\"JavaScript\"&gt;<!--
function show(object) {
    if (document.getElementById && document.getElementById(object) != null)
         node = document.getElementById(object).style.visibility='visible';
    else if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'visible';
    else if (document.all)
        document.all[object].style.visibility = 'visible';
}

function hide(object) {
    if (document.getElementById && document.getElementById(object) != null)
         node = document.getElementById(object).style.visibility='hidden';
    else if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'hidden';
    else if (document.all)
         document.all[object].style.visibility = 'hidden';
}

function hideall(object) {
hide('myLayer1')
hide('myLayer2')
hide('myLayer3')
hide('myLayer4')
hide('myLayer5')
 

}

//-->&lt;/script&gt;

<style type=\"text/css\"><!--
.myStyle {position: absolute;top : 20; left: 80; visibility: hidden;}
.mytable {position: absolute;top : 25; left: 10; visibility: visible;}
    body {font-family: Verdana, Arial, Helvetica;font-size: 10px;color: #000000}
    .content {font-family: Verdana, Arial, Helvetica;font-size: 10px;color: #000000}

//--></style>
<span id=\"mytable\" class=\"mytable\">
<table width=\"300\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"left\"  bgcolor=\"#FFFFFF\">
<tr>
    <td bgcolor=\"#EAEAEA\" width=\"60\"><a href=\"javascript:;\" OnClick=\"hideall();show('myLayer1')\" class=\"content\">nav 1</a><br><br>
<a href=\"javascript:;\" OnClick=\"hideall();show('myLayer2')\"  class=\"content\">nav 2</a><br><br>
<a href=\"javascript:;\" OnClick=\"hideall();show('myLayer3')\"  class=\"content\">nav 3</a><br><br>
<a href=\"javascript:;\" OnClick=\"hideall();show('myLayer4')\" class=\"content\">nav 4</a><br><br>
<a href=\"javascript:;\" OnClick=\"hideall();show('myLayer5')\"  class=\"content\">nav 5</a><br><br></td>
    <td bgcolor=\"#FFFFFF\">
       &nbsp;&nbsp;
    </td>
</tr>
</table>
</span>




<span id=\"myLayer1\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\"><tr><td class=\"content\">
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
</td></tr></table>
</span>
<span id=\"myLayer2\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\"><tr><td class=\"content\">
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
</td></tr></table>
</span>
<span id=\"myLayer3\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\"><tr><td class=\"content\">
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
</td></tr></table>
</span>
<span id=\"myLayer4\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\">
<tr><td class=\"content\">
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>

</td></tr></table>
</span>
<span id=\"myLayer5\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\"><tr><td class=\"content\">
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
</td></tr></table>
</span>



</body>
</html>
?>