PageSync Overview
A number of Cool Focus Flash menus are able to keep the last-selected menu item highlighted until the next is clicked. This provides a visual tie between the menu and the page displayed in the site's main frame. As long as the visitor always uses the menu to navigate, he's always got that visual reference.

But what if he uses the browser's Back or Forward buttons? Or if you include hypertext links to your other pages and he clicks one of those? Without PageSync, the menu's selected item won't change and the visual tie between page and menu is gone.

PageSync is a system built into TabPanel and many other Cool Focus menus which allows the pages on your site to inform the menu of which tab and button to select. Each page you link to from the menu includes a simple line of JavaScript: when the page is opened - by any method - this script contacts the menu and tells it what to select.

Although TabPanel supports the PageSync feature, you don't have to include the script in every page the menu links to, or indeed in any pages at all. If there are pages that don't contact the menu when they open, the menu will just leave the current selection unaltered.

PageSync Limitations
  1. Because PageSync relies on JavaScript/Flash connectivity, it won't work in all browsers (see Browser Compatibility). However it won't cause any problems in the browser's that don't support it; the applet just won't receive the JavaScript messages.

  2. This feature will work only in registered versions of TabPanel. However it can be used for testing from your hard disk.

  3. If your site does not use frames you should use Item Selection instead, although the details below can be used as an alternative.
Using PageSync
Although PageSync was designed to be used in framed sites (where TabPanel is placed in a permanent frame or is loading pages into an HTML <iframe> on the same page), it can also be used in a non-framed site where you reload TabPanel in every page.
  1. (a) If using frames, copy and paste this code into the <head> section of your framesetting web page (the web page which contains your <frame> and <frameset> tags, or your <iframe> control).

    (b) If not using frames, copy and paste this code into the <head> section of every page containing TabPanel.

    <script language="JavaScript">
    <!--
    var tid=0;
    function selectTab(i)
    {
    if(!window.main.document.TabPanel){tid=setInterval("selectTab(" +i + ")", 500); return;}
    clearInterval(tid);
    var loaded = window.main.document.TabPanel.GetVariable("loaded") == "true";
    if(!loaded){tid = setInterval("selectTab(" + i + ")", 500);}
    else {clearInterval(tid); window.main.document.TabPanel.SetVariable("newtab", i);}
    }
    var bid=0;
    function selectButton(i)
    {
    if(!window.main.document.TabPanel){bid=setInterval("selectButton(" +i + ")", 500); return;}
    clearInterval(bid);
    var loaded = window.main.document.TabPanel.GetVariable("loaded") == "true";
    if(!loaded){bid = setInterval("selectButton(" + i + ")", 500);}
    else {clearInterval(bid); window.main.document.TabPanel.SetVariable("newbutton", i);}
    }
    // -->
    </script>
  2. (a) If using frames, change the red text to the name of the frame containing TabPanel. (Remember that frame names are case-sensitive!)

    (b) If not using frames, delete the red text and the dot after it.

  3. If you changed the name of the applet in your HTML code, change the blue text to the new name you chose.

  4. In each page that TabPanel links to, add this code to the <body> tag:
    onload="top.selectTab(1); top.selectButton(2)"
    Change the 1 in the brackets to the index number of the tab that should be selected in TabPanel whenever this page is open. For example, if the 4th tab on the menu should be selected when this page opens, change the number to 4.

    Change the 2 in the brackets to the index number of the button that should be selected on the selected tab. For example, if the 3rd button should be selected when this page opens, change the number to 3. If no button should be selected, change the number to 0.

    If you're not using frames, delete the red text (including the dot).

    Always send the selectTab() call before the selectButton() call, not the other way around.

Reading The Current Selection
Two other JavaScript functions can be used to read the index number of current tab or button, if required. To use these functions, paste the following code into the page containing the earlier script block:

<script language="JavaScript">
<!--
function getTab()
{
   var tab = 0;
   if (window.main.document.TabPanel) tab = window.main.document.TabPanel.GetVariable("activetab");
   return (tab*1);
}
function getButton()
{
   var button = 0;
   if (window.main.document.TabPanel) button = window.main.document.TabPanel.GetVariable("activebutton");
   return (button*1);
}
// -->
</script>

These functions return the 1-based index of the currently-selected tab or button. If an error occurs (or no button is selected), the function returns 0. This function can be used within script in a web page like this:

var currentTab = getTab();
var currentButton = getButton();
if (currentTab > 0) alert("Tab " + currentTab + " is selected.\nButton " +currentButton + " is selected.");
else alert("An error occurred.");