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 iTab and many other Cool Focus menus which allows the pages on your site to inform the menu of which tab 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 iTab 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 tab selected.

Both of the iTab examples in this documentation show PageSync in action. View the source of the example pages and the pages loaded into the <iframe> to see the script used.

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 iTab. However it can be used for testing from your hard disk.
Using PageSync
PageSync should only be used in framed sites, where iTab is placed in a permanent frame or is loading pages into an HTML <iframe> on the same page. If you don't use frames, or you reload iTab in every page, PageSync will not work correctly - you should use the SelectedTab parameter instead.

  1. 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).

    <script language="JavaScript">
    <!--
    var timeid=0;
    function selectTab(i)
    {
    if(!window.main.document.iTab){timeid=setInterval("selectTab(" +i + ")", 500); return;}
    clearInterval(timeid);
    var loaded = window.main.document.iTab.GetVariable("loaded") == "true";
    if(!loaded){timeid = setInterval("selectTab(" + i + ")", 500);}
    else {clearInterval(timeid); window.main.document.iTab.SetVariable("newtab", i);}
    }
    //-->
    </script>
  2. If you're using iTab to load pages into an <iframe>, leave out the window.main. parts. If not, change the red text to the name of the frame containing iTab. (Remember that frame names are case-sensitive!)

  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 iTab links to, add this code to the <body> tag:
    onload="top.selectTab(1)"
    (If you're using iTab to load pages into an <iframe>, change the word top in the line above to parent.)

    Change the 1 in the brackets to the index number of the tab that should be selected in iTab 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.

Reading The Current Selection
Another JavaScript function can be used to read the index number of the current tab, if required. To use this function, paste the following code into the page containing the earlier script block:

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

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

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