Simple Frame refresh


I have frames A, B and C.
I have links of menu in A
When I click it, content will display in frame B which has a links too.
and when I click it, content will display in frame C.

My problem is whenever I clicked other links from A(topnav) menu, the content of frame C remains.

I have home.html displayed in frame C as default.
I want also to show this default page when user clicked new menu in A.

I hope I made myself clear.
I’ve attached image just in case.
Thank you.

This is one of the main reasons why iframes are considered bad practice, much better solutions to get around this is to use Ajax driven content which is a big leap from an iframe but has an easy code base to work with depending on whether you choose to use vanilla JS or a library such as jQuery.

Thank you for your response.
Is vanilla easy to use?

Vanilla JS is just JavaScript, basically it’s just a coding term to say that your not using any libraries such as jQuery which is vanilla JS built into a easy to work with DOM manipulation library which fixes the cross browser compatibility issues.

Thank you for the new term. Can you recommend a good source, tutorials for that?

Off Topic:

Guys, I’ve moved this to the JavaScript forum, because this looks like more of a programming issue. :slight_smile:

Frames are bad practice, so lets do the same thing in an even LESS accessible manner – RIGHT.

Do yourself a favor, build it with includes using a CGI/SSI and forget this frame nonsense or worse, AJAX for nothing. Page-loads aren’t evil and to be frank if your content is ‘big enough’ for page-load to be an issue, it’s time to break it into more sub-pages. (or take a good hard look at semantics and separation of presentation from content)

As Dan Schulz said shortly before passing, AJAX is the new Framesets… and he did NOT mean that as a compliment.


I followed one of the suggestion and I found this tabber.js. I’m working with php.
I thought I’m saved from this frustration. Seems like require() and include() function is not working well.

<div class="tabber">

     <div class="tabbertab">
	  <p><?php require("student/stud_view.php");?><a href = 'student/stud_view.php'>asdf</a></p>

     <div class="tabbertab">
	  <p>Tab 2 content.</p>

     <div class="tabbertab">
	  <p>Tab 3 content.</p>

	 <div class="tabbertab">
	  <p>Tab 3 content.</p>

Any help would be appreciated.