Nortree top level sections

[twobyte]

Hi,

I'm setting up a site where the client wants to have javascript cascading menus.

I've implemented the nortree soltion which works well but I now have a problem with the design. The top level sections need to be spaced in accordance with the section name length. In the original design they are layed out like:

<td><a ...>section1</a> | <a ..>section2</a> | <a..>section3</a> | <a...>section4</a></td>

With nortree the links all have to fit in boxes of the same width.

Does anyone know a way I can generate top level links with nortree in the format above, or will I have to hard code this navigation into the templates?

Thanks in advance for any help,
T

[NormanRouxel]

Nortree can lay out the top level horizontally but It won't be easy to make the boxes variable width.

You do have the source of all tha JavaScript that generates the DHTML so you could try to fix it yourself if you have the time.

Norman

[NormanRouxel]

I found a one-liner that will get you close to what you want.

In nortree_menu_create.js find the line:-

SName = SName.replace(/"/g, "\\\""); // escape double quotes

ADD the following line immediately above it:-

if ( ThisLevel == 1 ) LineWidth = SName.length * 10;

This will set the width of the top-level cells to 10 pixels for every character in the text in that cell. Change the 10 above to suit your font size.

Norman

[twobyte]

Thanks Norman that's fantastic.

I've hardcoded it for now as a temporary measure, but if I find time nearer the end of the project I will definitely work at implementing your solution as the benefits are obvious.

If so and when its up and running I'll let you know.

Regards,
Twobyte

[edwardk]

Hi Norman

I've found myself in a simalar situation and have tried the code you suggested "if ( ThisLevel == 1 ) LineWidth = SName.length * 10;". It worked very well until I used section names with spaces. These entries actually increased in size quite a bit. Do you have any suggestions on how I might work around this?

thanks

ed

[NormanRouxel]

This is weird. A space is just a character after all. However there is a possibility that you have lots of spaces in there but as it's HTML only a single one is being displayed. You can try this:

immediately below

if ( ThisLevel == 1 ) LineWidth = SName.length * 10; 

temporarily insert the line


if ( ThisLevel == 1 ) Sname += ' ' + SName.length;

This will display the character count for each section text. See if it makes sense.

There is a posibility that the spaces are being escaped as either & n b s p ; or & # 2 0 ; and this is adding to the character count. This can be fixed if it turns out to be the case.

Also if you post your Act_section_tree_names.js I can have a look.



Norman

[edwardk]

Hi Norman

Tried the code but the menu completely dissappeared. I could see what you were doing so I did a bit digging and came up with

"if ( ThisLevel == 1 ) LineWidth = eval(SName.length * 5.5)+25;"

This seems to do the trick. The 5.5 works well with the font and font attributes I am using (have attached screen caps of NorTree) and the "+25" adds just enough space for the arrow gif to be displayed without crowding.

Thanks again for your help.

ed