Member Avatar for 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

  • 3 Contributors
  • 7 Replies
  • 104 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by jean4designs

Dani AI

Generated

Short answer: this is almost always a path or filename mismatch on first load, not a browser bug. What works when you click a menu link but fails on initial load means the iframe is pointing to a URL the server cannot find at page load.

A quick checklist and debug steps (do these first)

  • Paste the iframe src URL into the address bar (open it by itself). If it 404s, the path or filename is wrong.
  • Use the browser Network panel to compare the URL requested when the iframe fails and the URL requested when the menu link successfully loads content. Look for differences in folder depth, extension, or letter case (Linux servers are case-sensitive).
  • If you are testing from the file system (file://), try via http:// on the server — relative resolution differs.

Practical fixes

  • Use a site-root (absolute) path or the same exact filename/extension used by the working menu link so the iframe resolves correctly on load.
  • Set the iframe src at runtime to match the first submenu link. Example: copy the first subnav href into the frame on DOM ready.
<script>
document.addEventListener('DOMContentLoaded', function() {
  var first = document.querySelector('.subnav a');
  var f = document.getElementById('TEXTFRAME1');
  if (first && f) f.src = first.href;
});
</script>

Better alternatives

  • Follow and load content into a normal DIV instead of an iframe. You can preload hidden DIVs and toggle them, or fetch the partial with AJAX (jQuery .load or fetch). This avoids iframe path confusion, is more accessible, and easier to style.
  • If content lives on another domain, keep the iframe; otherwise prefer AJAX or server-side includes.

References: iframe element and URL resolution details on MDN (iframe element) and the DOMContentLoaded event (DOMContentLoaded).

Recommended Answers

All 7 Replies

Member Avatar for buddylee17

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

Member Avatar for 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
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

Member Avatar for buddylee17

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

Member Avatar for jean4designs

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

Yes in a nice paragraph format..

Member Avatar for 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.

Member Avatar for 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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.