Need some help

[jean4designs]

I have a sub navigation bar on my web page and I would like the links to link to that page in a cell under the Sub navigation bar.

Example.... Personal Injury....you would click on this and the text would change to that catagory, click on another link DUIs and again the text would change to that catagory in the same cell.

Am I dreaming or can this be done.

Jeanne

[buddylee17]

I would need a link to the page to see exactly what's happening, but yes it can be done with javascript.

[jean4designs]

I would need a link to the page to see exactly what's happening, but yes it can be done with javascript.

The link is http://www.jean4designs.com/MullaneyLawFirm/Areas_Of_Practice.html
The area of white is where I would like to type in the text. The page will originally open with something else in that box and then as the user clicks the top navigation bar the info/text on those subjects will replace the original object..if possible...If I have to I could use documents to put in that space for the topics but I would like the option of changing the text is I have to....

Jeanne

[buddylee17]

So are you wanting the link content to fill the white box?

[jean4designs]

So are you wanting the link content to fill the white box?

Yes in a nice paragraph format..

[Fungus1487]

easiest way to do this is with javascript and all your content in page.
Example:

with a simple HTML layout like below with your seperate "pages" content in each 'div'.

<div id="content01" class="show">
    <p>Content 01</p>
    <p>My first bit of content to show everybody</p>
</div>

<div id="content02" class="hide">
    <p>Content 02</p>
    <p>Another bit of content to show everybody</p>
</div>

<div id="content03" class="hide">
    <p>Content 03</p>
    <p>Again!!! Another bit of content to show everybody</p>
</div>

And the following CSS, you will have a page with the other content in it but only one block is visible.

div.show
{
    display:block;
}
div.hide
{
    display:none;
}

You then use javascript to change which is visible

function changeContent(contentID) {
    // Hide the 3 holders first
    document.getElementById('content01').classname = 'hide';
    document.getElementById('content02').classname = 'hide';
    document.getElementById('content03').classname = 'hide';

    // Then show the content whose ID was passed to this function
    document.getElementById(contentID).classname = 'show';
    return false;
}

Then in you menu down the side of the page you would add a javascript "onclick" event to each of the buttons so they would show different blocks

<p><a href="#" onclick="return changeContent('content01');">Show Content Block 01</a></p>
<p><a href="#" onclick="return changeContent('content02');">Show Content Block 02</a></p>
<p><a href="#" onclick="return changeContent('content03');">Show Content Block 03</a></p>

This is definately not the best method but i am assuming you dont have too much previous experience with javascript. There are free API's out there which can do alot of this for you and also use XMLHttpRequests to 'dynamically' load pages such as jQuery. I recommend you check it out if you are looking for the 'best' way to achieve what your after.

[jean4designs]

Thank you so much and you are right...I am just starting out and Javascript, well lets just say it is going to take me a while...I work in Dreamweaver so I have that program do a lot for me but I want more..

Tahnk you again

[jean4designs]

i haven't replied to this for awhile because I have been racking my brain trying to work with the answers I have been given. I have come up with using an iframe to get the response I want when clicking the sub menu buttons....all the html documents show up in the iframe when the appropriate nav button is pushed. Unfortunely when the template page loads the pages loads with file can not be found in the iframe. When you push the sub nav buttons then the html page shows up. How can I have the html page from the first sub nav button show up when the page originally loads

This is the code for the nav button the sends it to the iframe:

<td width="101" align="center" valign="middle"><a href="../Personal_Injury.html" target="TEXTFRAME1"><img src="../images/Personal_Injury_White.png" alt="Personal Injury" width="78" height="20" id="Image1" onmouseover="MM_swapImage('Image1','','../images/Personal_Injury_blue.png',1)" onmouseout="MM_swapImgRestore()" /></td>

and this is the code for the ifram box:

<!-- TemplateBeginEditable name="Text" -->
		<td colspan="10" rowspan="6" valign="top"><iframe src="../Personal_Injury.htm" name="TEXTFRAME1" width="533" height="326" scrolling="No" frameborder="0" id="TEXTFRAME1"allowautotransparency="true"></iframe></td>
		<!-- TemplateEndEditable -->

I am going a little nuts over all this....any help would be appreciated.