PageSync Overview
A number of Cool Focus Flash menus are able to keep the last-selected menu button 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 button won't change and the visual tie between page and menu is gone.

PageSync is a system built into NeonBar and many other Cool Focus menus which allows the pages on your site to inform the menu of which button to highlight. 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 which entry to highlight.

Although NeonBar 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 button selected.

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 NeonBar. 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 NeonBar 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 NeonBar 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 NeonBar.

    <script language="JavaScript">
    <!--
    var timeid=0;
    function selectItem(i)
    {
    if(!window.main.document.NeonBar){timeid=setInterval("selectItem(" +i + ")", 500); return;}
    clearInterval(timeid);
    var loaded = window.main.document.NeonBar.GetVariable("loaded") == "true";
    if(!loaded){timeid = setInterval("selectItem(" + i + ")", 500);}
    else {clearInterval(timeid); window.main.document.NeonBar.SetVariable("selectitem", i);}
    }
    //-->
    </script>
  2. (a) If using frames, change the red text to the name of the frame containing NeonBar. (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 NeonBar links to, add this code to the <body> tag:
    onload="top.selectItem(1)"
    Change the 1 in the brackets to the index number of the button that should be highlighted in NeonBar whenever this page is open. For example, if the 4th button on the menu should be highlighted when this page opens, change the number to 4. If you're not sure what the number should be, you can open the datafile for the applet in a text editor to find the button-number.

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