Javascript  -  Navigation Console

secondarybutton3
If you click the button on the left, a pop-up window should appear with a series of buttons which, when clicked, will take you to various pages in the Workbench Site. You’ve probably seen “navigation console” type pop-up windows on websites before - here’s how to do this cool thing in NetObjects Fusion:

Step One: A Pop-Up Window Console

  1. Right-Click (Control-Click if you’re on a Mac) in the Layout Area of your page and select “Layout HTML” (aka “Layout Script” in NOF 2.0)
     
  2. Type the following code into the “Between Head Tags” field of the “Layout HTML” window:

    <SCRIPT LANGUAGE = “JavaScript”>
    <!--
    function console()
    {
    newwindow = window.open(‘./pagename.html’,’
    WindowName’,
         ‘width=
    XXX,height=YYY’)
    }
    // -->
    </SCRIPT>



    (everything between the {curly brackets} should be on one line without a carriage return) where pagename is the name of the Console page, WindowName is the text you want to appear in the title bar of the console window, XXX is the width and YYY is the height of the Console Window you’ll create in Step 3. The path to pagename may vary depending on the Site Structure you are using to publish this site. See the Linking Usage Note for details.
  3. Click “OK”

Step Two: Calling the Pop-Up Window Console

  • If you want the console window to open automatically when this page is loaded, enter this text into the “Inside Body Tag” field of the “Layout HTML” window:

    onLoad = “console()”


     
  • If you want the console window to open when a link is clicked, select the text or image object you wish to use as the trigger:
    1. click on the “Link” button in the Properties window
    2. select javascript: from the drop-down protocal window
    3. type in the following code into the URL field:

      console()

Step Three: Defining the Links in the Pop-Up Window Console

  1. Create a new page in NOF
     
  2. Right-Click (Control-Click if you’re on a Mac) in the Layout area and select “Layout HTML” from the pop-up menu that appears
     
  3. Enter the following code into the “Between Head Tags” field in the “Layout HTML” window:

    <SCRIPT LANGUAGE = “JavaScript”>
    <!--
    function updateParent(newURL)
    {
     opener.document.location = newURL
    }
    // -->
    </SCRIPT>


  4. Click on “OK”
     
  5. For each “link” you create, do the following
     
    1. Select the “External Link” tab from the “Links” window
    2. select javascript: from the drop-down protocal menu
    3. type the following code into the URL field:

      updateParent(‘http://www.yourURLhere.com’)



      where www.yourURLhere.com is the full URL for the page you are linking to. This is especially important if you are linking to pages outside of your own web site.
       
  6. When you have populated your page with links, make a note of the page’s height and width, then go back to the page you were working in in Step One and edit the XXX and YYY values in the “Layout HTML” window.

Go Back to Previous Page

Have a question that you can´t find the answer to? Want to report a possible bug?

Send a help request to NetObjects Technical Support