Where your adventure begins
Full Service Web HostingNetObjects Fusion 7 Websites Portal



Did you ever wish you could layout a little area in NOF, be able to put anything in it that NOF will allow you to put, and then be able to pop it up on a mouseclick or a mouseover. See what I mean in the Demo.

This is Dynamic HTML (DHTML). You need to know how to insert Javascripts into NOF, but apart from that, this is pretty easy to do. (Go to demo.)

You put a Javascript in the Head. You put some Before Tag of the layout region that is to be your Popanything. You put some more After Tag. You include a .js file as a New File Asset (in Assets View). Lastly, you make a Javascript link with onclick, onmouseover or onmouseout commands in the link.  This makes your Popanything appear and disappear as you want it to, either in a fixed place, or adjacent to the mouse.

I've put the code you need to insert, and instructions, in this text document. Right click it and Save As, then open it in Notepad. You'll find it more reliable to copy script from a text document than from a webpage. Have the text document open as you cut and paste the separate bits to your NOF page.

You'll also need to download and include the popanything.js file as a New File Asset. Make sure it is in the same directory as the page which has your Popanythings on it. You should only have to include it once for your whole site. This is easiest if you publish Flat. Then the path to the file is always just the simple name of the file. If you publish in some kind of hierachy (eg By Site Section) then you will have to vary the path to the file as specified in the code you place in your Head. TIP: Much simpler to publish Flat!

This technique works when using Dynamic Page layout. It doesn't work so well using Fixed. And I've not tested it with the Regular Tables layout option.

You can put your layout region (or table, or text box, or pic) anywhere. It won't show up where you physically place it in NOF. Rather it will appear where you specify in the variables in the script. You can even overlap it somewhere on your NOF page so it doesn't take any room in your web browser. You'll get the little overlap warning, but, in this case, you can ignore it.

I made these three Popanythings over to the right of my layout area (where they weren't overlapping any other objects, then I drifted them back across my Layout area using the arrow keys. (This way, they overlap - ie NOF doesn't try to incorporate them into the underlying Layout region.)

Here's how they all looked once I had them where I wanted them:

See how I've put them over my Layout region, and even overlapped them over each other. To work on my page after I'd done this, I just hid them all (Menu item: Object/Hide Object or, better still, select the object and hit Control-H).

The variables you need to change

In the script you put Before Tag on the layout area that is to be your Popanything, there are five variables. The script around there looks like this:

//Enter variables


//End enter variables. Don't touch script that follows

Invent a name to suit yourself. This name also goes in the links that trigger and close your Popanything.

Change the leftX and topY variables only if you are wanting to fix the position of the Popanything by using the show() function. If you are using the mouse() function, the values here are immaterial.

Change the width and height to reflect the size of your Popanything area. You can get it by scrolling down a little when you put the code Before Tags. The size of the div is the size of the layout region:

See how my divWidth and divHeight are as per the first measurements in the Object HTML for the layout region I am surrounding with Javascript.

How the Popanythings position themselves

If you use only the show() function, the Popanything will appear where you specify in the code you place before your layout region (or table etc).

If you use the mouse() function, it will appear adjacent to the mouse. By default the horizontal position is 20px to the right of the mouse; the vertical position centres it above and below where the mouse is. (You'll see what I mean if you check the third link on the demo page.)

If there's not enough room for it to fit without going outside the viewable area then the default is varied as follows:

  • If the bottom of the browser is too close so it would be partially obscured by going below the viewable area, then it will sit just above the bottom of your window.
  • If it would project above the top of the browser window, then it will sit just below the top of the browser window.
  • If it would project outside the viewable area to the right, then it will pop up to the left of the mouse.
  • If it would project outside the viewable area to the left, then it will sit just inside the browser window on the left.


OK. That's it. Good luck!

Return to the TOP of this page


|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2002 gotFusion LLC.  The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC
Copyright, legal notice & privacy statement