Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:22

Spanning Columns


Poster: hitmanHT
Dated: Wednesday February 6 2008 - 17:41:42 GMT

Hi

I'm looking for a way to span columns in a menu which has a 'divides' property specified (like the HTML colspan attribute for tables). The aim is have a header item that goes across the top of the whole menu which has 3 columns. The item properties documentation mentions a 'dividespan' and although there is no description for this property, it seems correctly named to provide this functionality. I have tried assigning a number of different values to this property, but it behaves as if it were not an item property at all (throws a js error). Does anyone know definatively what 'dividespan' does, how to use it, or any other way that I might achieve column spanning in the DHTML menu?

Thanks

Howie T

Re: Spanning Columns


Poster: John
Dated: Thursday February 7 2008 - 13:58:34 GMT

Give us a URL so we can see exactly what you want and if there's another way to do this.

Re: Spanning Columns


Poster: Ruth
Dated: Thursday February 7 2008 - 22:52:08 GMT

Well, I can't figure out what it is doing either, but try this which is from the downloaded data file. I just set up the main menu trying out the divides and the dividespan. The off border stuff is only so I can see things. So, this a horizontal menu with nine items, the divides is set to 3 to give a 3 column menu with 3 items in each column. Now, the dividespan, I would think if you set it to dividespan=3 in the 1st item then I would think you'd need to remove the other two items that would be across the top, that is, since this is a horizontal menu, the 1st 3 items. However, if you do that it really messes it up. Now, I played and by putting image=; into the 2nd and 3rd items and setting the type=header; it seems to look as if that top item is spanning the 3 columns. I didn't even try with orientation vertical, since I can't figure out what's happening in the easier orientation while using divides.

So, as John, noted, if you could give us a url so we can see the menu and explain just what you want, I can try doing some experimenting, or perhaps find another way to do it :)

Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;
margin=5;
divides=3;
aI("text=1topleft and a bunch of other text here;offborder=2px solid red;type=header;dividespan=3;");
aI("image=;itemwidth=1px;type=disabled;");
aI("image=;itemwidth=1px;type=disabled;");
aI("text=2topleft;offborder=2px solid black;type=header;");
aI("image=spacer;offborder=2px dotted #FFCC33;itemwidth=4px;type=header;");
aI("text=2topright;offborder=2px solid aqua;type=header;");
aI("showmenu=Samples;text=3topleft;offborder=2px dotted lime;");
aI("image=spacer.gif;offborder=2px dashed #ff00ff;itemwidth=4px;type=header;");
aI("showmenu=Partners;text=3topright;offborder=2px solid black;");
}


Ruth

Re: Spanning Columns


Poster: hitmanHT
Dated: Friday February 8 2008 - 16:31:34 GMT

Hi

Thanks very much for your help on this. Your reply has prompted me to reexamine my code and I'm highly embarrassed to say that I had a simple JS error :oops:. Sorry to have wasted your time. There is one very minor bug (I think) which lingers. The 'separatorimage' doesn't span with the rest of the row.

http://213.120.149.63/pub/menu.html

Once again, thanks very much for your help here, I am booked into my local optician to have my eyes tested so that I might spot simple mistakes before bothering anyone.

Best

Howard

Re: Spanning Columns


Poster: Ruth
Dated: Friday February 8 2008 - 18:19:32 GMT

Hi,

Yes, that's how it's always been. The only thing I can suggest is to use css. There are two ways you can do it.

1. add a black [or whatever color you want to use] line at the bottom of your heading.gif bg image. Then create a class to put the bgimage into the item.
Code:
.spn{background: #ffffff url(heading1.gif) repeat-x bottom left}


Because the image has a black line at the bottom and is set to not repeat top to bottom and to be positioned at the bottom left, it will look as if there is a separator line at the bottom of the header.

2. in the css create a class for that item and set the border to be 0 for top, right and left and 1 for bottom

Code:
.spn{background: #ffffff url(heading.gif) repeat-x bottom left;border-top:0px solid ffffff;border-right:0px solid ffffff;border-bottom:1px solid black;border-left:0px solid ffffff;text-decoration:none;}


Either will work and will make it look like there is a black line below the 'header span' The advantage of using css for the bg image is that you can set it to only repeat-x and position it at the bottom left, then when anyone who needs larger font size sets their browser for that, the bgimage will not repeat on the y axis and have the item look like it is white grey striped.

Hope this helps.

Ruth

Re: Spanning Columns


Poster: John
Dated: Friday February 8 2008 - 18:24:58 GMT

hitmanHT wrote:
Your reply has prompted me to reexamine my code and I'm highly embarrassed to say that I had a simple JS error

Howard,

While understandingly embarrassing (I've done the same thing many times!), it's certainly not a bother. We're here to help regardless, so stop by any time.

Re: Spanning Columns


Poster: hitmanHT
Dated: Monday February 11 2008 - 17:38:22 GMT

Hi Ruth & John

Thanks so much for your time and effort. All fixed, and on to the next challenge! Your menu system is not just good, it's superb.

If I might suggest an enhancement for the future, I could use an ajax directive from the 'popup' method. :)

Best regards

Howard

Re: Spanning Columns


Poster: John
Dated: Monday February 11 2008 - 19:36:10 GMT

Many thanks for the kind words, Howard. Most appreciated. I've passed your suggestion on to Milonic.