xFX JumpStart
Quick Links HomeDownloadPurchaseSupportSite MapPublic ForumsWhen I'm Bored
Utilities DHTML Menu Builder News Description Screenshots Features List Awards Download Purchase Become a Reseller Samples Customers' Web Sites Showcase Challenge and win! Tips & Tricks FAQ Support Registration Information Recover Registration Details Companion Applications
KeyLaunchSoftLedsNice FoldersFile Extension ManagerNetToolsxFXMixerPopUp KillerVBBrainFNETAPE for Traktor Pro
.NET ControlsDXVUMeterNETMixerProNET
ActiveX ControlsDXVU MeterMixerProFormShaperxFX Slider
Multimedia ToolsFreemake
GamesxFX Domino

Web software.xfx.net

Free Flow Positioning

 Experience Required: Beginner

DHTML Menu Builder version 4.10 introduces a new positioning option for the toolbars. This mode was created to solve some of the most severe problems that users experienced while trying to position their toolbars in their HTML documents:

  • Different browsers rendered documents in a different way making the menus look misaligned
  • The use of custom font sizes in a browser would render the page differently causing the menus to look misaligned
  • A margin (empty area) had to be created in the page design in order to make up space for the toolbars
  • Changes made in the page design meant having to reposition the toolbars and recompile the project
  • When printing a page the menus often shifted out place ending above the page contents
  • Under some circumstances, resizing the browser and making it too small may place the toolbars incorrectly, beyond the left border of the page

Although attaching the menus to an image solved many of these issue it still wasn't a perfect fix.
The major advantage of the Free Flow positioning method is that it makes the toolbars part of your HTML content so they will appear perfectly aligned under all browsers, will not fall out place when printing the page and will take up space inside the HTML structure behaving as any other standard HTML element (such as an image, a paragraph, etc...)

The sample below may not show much... as this exact result can be achieved with the usual positioning techniques. But, go ahead and try resizing the browser window and you will see how the text in the sample flows around the toolbar! You may also want to try printing the page to see how the toolbar remains perfectly put.


When you select the Free Flow positioning method you will notice that DHTML Menu Builder displays a code next to the Free Flow option. This code is the ID that you must use to flag an HTML element in your documents as the tag that will receive the menus.

For example, if you would like the menus to appear inside a table's cell you will need to edit the TD tag for the cell and add the id parameter.
For example, if your TD tag looks like this:

<td align="top" width="200">

This is how it would look after inserting the id parameter:

<td align="top" width="200" id="dmbTB1ph">

You will find that inserting the menus inside a cell, using the Free Flow positioning method, provides some great advantages as you will be able to accurately control how the menus are positioned inside the cell by simply changing the cell's align and valign parameters.

In the example above we inserted the menus right in the middle of a paragraph. We did this by using a <span> tag, like this:

<span id="dmbTB1ph"></span>

and inserted it right where we wanted the menus to appear.
This ID can be assigned to any container tag such as SPAN, DIV, TD, etc...

On projects using multiple toolbars DHTML Menu Builder will generate a different code (ID) for each one of the toolbars, so make sure you use the correct codes so that your toolbars are properly displayed.

More detailed instructions about this positioning method can be found in DHTML Menu Builder's documentation by clicking Help->Tutorials->Positioning the menus

Known Issues

  • If you select the Free Flow positioning method but you do not assign the id code to any of the tags in your pages, the menus will not be displayed.
    Far from being an issue, this can actually be considered a feature as it can be easily used to control the visibility of one or more toolbars. For example, if you wish to avoid displaying a particular toolbar inside a specific section of your web site then simply omit a tag with the corresponding ID. This will cause the toolbar with that ID to remain invisible.

  • Under some situations, Internet Explorer may display the submenus in the wrong location. This is due to a improper calculation of the position of the parent elements enclosing the menus. If this occurs, try to avoid using relative sizing for tables and cells directly above the menus (in the HTML structure).
    Update: Version 4.20 includes several workarounds that should prevent this from happening.

  • Under some situations, Internet Explorer may display an "Unknown Runtime Error" message. If this occurs, try using some other tag to position the menus. Our tests show that the TD tag, the one used to create table's cells, provides the best results.

  • Netscape 4 may produce unexpected results when using this positioning method.