Spanning Columns

Taken From The Forum:
Forum Topic:
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.