Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #112

Can the TreeMenu Magic system be made to work in a frameset? I would like the current page marker to always automatically coincide with the clicked menu item or the page that loads into the mainFrame.

The Answer

Prepared Oct. 2003 by Gerry Jacobsen, PVII

TreeMenu magic is primarily designed to work in normal, non-frames based sites. While the TMM system will work fine in a frames-based page right out of the box, some of the advanced functionality will not work as expected. The current page marker (the link that is clicked) will not automatically switch to the "currentmark" class, and will not remove any other links that are already set to that class. However, with a few tweaks these features can be made to work seamlessly in a frameset. Here's how:

In our example, let's assume you have a TMM system already set up in the left frame of a frameset, named "leftFrame", and you have a main frame, named "mainFrame" into which the content pages will load.

1. You will need to add a new, special JavaScript function called "P7_TMMframe()" to your p7tmscript.js file,.

-Copy and paste this bit of code into your existing p7tmscript.js file:

function P7_TMMframe(tU) { //v1.6 by Project Seven Development(PVII)
  // v1.6 tweaked for + - text based trigger support
  //includes section link support 
  var i,x,d,hr,ha,ef,a,ag,c;if(document.getElementById){ 
  d=document.getElementById('p7TMnav'); 
  if(d){hr=tU;ha=d.getElementsByTagName("A"); 
  if(ha&&ha.length){for(i=0;i<ha.length;i++){
  if(ha[i].href){if(ha[i].href.indexOf(hr)>-1){
  if(ha[i].onclick&&ha[i].onclick.toString().indexOf("P7_TMenu")>-1){
  a=ha[i].parentNode;}else{ha[i].className="p7currentmark";
  a=ha[i].parentNode.parentNode;}
  //full toggle support - remove leading slashes below to enable
  //P7_TMfull(ha[i],5);
  while(a){if(a.firstChild && a.firstChild.tagName=="A"){
  if(a.firstChild.onclick){ag=a.firstChild.onclick.toString();
  if(ag&&ag.indexOf("P7_TMenu")>-1){c=a.firstChild;
  if(c&&c.data&&c.data.charAt(0)=='+'){P7_TMenu(a.firstChild,1);}
  if(a.firstChild.className=="p7plusmark"){P7_TMenu(a.firstChild,1);}}
  }}a=a.parentNode;}}else{if(ha[i].className=="p7currentmark"){ 
  ha[i].className="";}}}}}}}
} 
 

2. Next, copy this JavaScript function, P7_trigTMM(), into your existing p7tmscript.js file:

function P7_trigTMM(tU){ //v1.0 by Project Seven Development(PVII)
  var theFrame="leftFrame";
  if(tU==null){tU=document.location.href;}
  eval("top."+theFrame+".P7_TMMframe('"+tU+"')");
  }

-Save the file.

3. In order to properly trigger the pages to load in the mainFrame be sure that you have set the target attribute on each link. This can be set inside the TreeMenu Magic user interface or it can be set directly in code view, a proper link should look like this:

<a href="information/about_us.htm" target="mainFrame">About Us</a>

4. There are two ways to trigger the new functions to properly reset the current link in the menu, depending on the overall functionality you require.

Method (A) The simple way:

-add this behavior to each page link in the TreeMenu Magic menu:

onClick="P7_trigTMM(this.href)"

-so that the entire link looks like this:

<a href="information/about_us.htm" target="mainFrame" onClick="P7_trigTMM(this.href)">About Us</a>

This will load the appropriate page into the mainFrame and will also reset the page marker to the link just clicked. Normally, this is all you need to do. Read on if you want to deploy this technique with even more functionality.

Method (B) The harder way:

There are times when you may have pages loading into the mainFrame without being triggered by the menu, for example when you have a link to another page that will load into the mainFrame on the current content page. In this case, it is best to place the script and a trigger right onto the page being loaded. This will insure that the menu is ALWAYS in the correct state, that is, open at the exact menu level that reflects the link to the page.

-Add this bit of code to the page that is being loaded into the mainFrame, into the <head> section, right above the closing </head> tag:

<script language="JavaScript" type="text/JavaScript">
<!--
  function P7_trigTMM(tU){ //v1.0 by Project Seven Development(PVII)
  var theFrame="leftFrame";
  if(tU==null){tU=document.location.href;}
  eval("top."+theFrame+".P7_TMMframe('"+tU+"')");
  }
  onload=P7_trigTMM;
  //-->
</script>

-Of course, for efficiency you can place this into an external JavaScript file and link it to the page, but remember to never, never, add this to the existing p7tmscript.js file.

This code will now cause the scripts to run auto automatically when the page loads in to the mainFrame and reset the menu to the appropriate sub menu section.

Note 1:
If your frame name for the menu is different than "leftFrame" you can edit the name inside P7_trigTMM JavaScript function, its the first line, to reflect your actual frame name. For example, if your frame name is "MyFrame" then the changed line would look like:

var theFrame="MyFrame";

Note 2:
If you are using the advanced method, Method (B), and you are loading a page that does not exist as a part of the menu, but you wish to trigger a certain section in the menu anyway, then you will need to move the "onload=P7_trigTMM;" from the JavaScript tag to the <body> onLoad event. Here's how:

1. Disable the existing onload call in the JavaScript section of the page by adding two forward slashes to the left of the line, it should look like this:

//onload=P7_trigTMM;

2. Add the function call to the <body> tag, as an onLoad event. To trigger the appropriate menu section, include the url of the page link in the menu that you wish to trigger. For example, if you wish to trigger the "About Us" link, which looks like this in the menu:

<a href="information/about_us.htm" target="mainFrame">About Us</a>

then simply place the href value of the link inside the parenthesis of the P7_trigTMM() function, inside a pair of single quotes, so the <body> tag will look like this:

<body onLoad="P7_trigTMM('information/about_us.htm')">

Back to the questions list