Width of vertical menu in table

Poster: Arcady
Dated: Friday March 19 2004 - 6:46:57 GMT

Hello. I testing out this menu script to see if it can be integrated into my site. I cannot figure out how to make the menu as wide as the table cell I am putting it in.

See example here: http://www.sg1archive.com/index2.shtml

Thanks

Poster: Ruth
Dated: Monday March 22 2004 - 16:17:54 GMT

Took me forever to find it. You have to change this in the menu_data.js file to
That shadow is shifting the menu to make the shadow. Then on the page in the main menu put the following getting rid of top and left positions

Also, just for your info, if you make the table 120 width instead of 122 it will match the Navigation menu below, and in this menu, if you put in non-breaking lines spaces after the words like Home   you can shift the arrows over to the right side more. You'll need to experiment on how many for each item. Lastly, in the menu_data.js file, you should change the _subOffsetLeft=-10 a bit lower, like maybe -2 or -3. That -10 is putting the submenu 10 pixels into the main menu.

Really nice page. I like Stargate.

Ruth

Poster: Arcady
Dated: Monday March 22 2004 - 16:51:59 GMT

I tried what you said, but I still cannot get it to work. It is only as wide as the text, and that is useless to me. What am I missing?

Also, it doesn't even appear at all in Internet Explorer on the Mac. I need this to work in all browsers. I'm thinking of dropping the idea for javascript menus altogether at this point. It's too much work for something that should be easy to set up.

Poster: John
Dated: Monday March 22 2004 - 18:01:15 GMT

Good grief, don't drop it just yet! You've got a great looking site, and you picked the best menu for it.

Now for the picky-picky...

This statement in your css...

...is overriding the menu and messing up the spacing. I also discovered that if the arrow.gif is left out the separator goes all the way to the right side. As soon as the arrow is added it shrinks. Actually, the menu itself is the proper width, it's what's inside it that has a problem.

For now I dropped the above css line, and you can see what I think you want at http://www.west.asu.edu/sa/testsite/sg/. I know just leaving that out doesn't fix your problem, but perhaps it will give you a direction (css and I don't get along!).

Also, your HTML needs some cleaning up...

1. Numerous missing " " around tag attributes.

2. Sometimes the use of ' ' instead of " ".

3. Numerous unclosed tags (<td>, <tr>, <span>, <a name...>, etc.).

PS - Don't forget many episodes of SG tonight - it's Monday...

Poster: Ruth
Dated: Monday March 22 2004 - 18:10:38 GMT

Sorry, I left out itemwidth="100%"; Many of us who use table bound menus have found that using that solves a lot of problems. Also, you need to get the latest release. If you login and go here http://www.milonic.com/forum/viewtopic.php?t=3108 and check watch this topic, you'll get an email whenever there's a new release with any new capabilities added or minor bug fixes. I downloaded and tested your page in ie5.5, ns6, 7, and firebird .07 with the itemwidth="100%"; added along with the menuwidth. It renders perfectly in them, with the arrow all the way to the right. And, I agree with John, you have a great site. I've been browsing.... Love your gate!

Ruth

PS for John, what I've done for a workaround to enable still having such coding is to make that td coding into a class and just assigning it to tables, then I just leave it out of the table I put the menu in. Works on my browsers but not sure about macs since I don't have one. Got one to give away so I can test my pages ?

Poster: Maz
Dated: Monday March 22 2004 - 18:13:13 GMT

Yes, I'm seeing that on the mac ie it has to be perfect.

Remove all the ... from your paths, should start with a hash /

Also you might need itemwidth="100%";

Nice! I'll have to take another look at how to use my forum, any good mods?

maz

Poster: John
Dated: Monday March 22 2004 - 18:22:38 GMT

Good catch, Ruth (as always).

I have added it to my demo link and put the line back into the css. All is well (except where I didn't call all the images on the page).

Note also that I moved the main menu code back into the JS file and placed the JS call to the _data file in the <td>.

Poster: John
Dated: Monday March 22 2004 - 18:25:11 GMT


Give away - no, but I still have my old dual 533MHz G4 available for sale...

Poster: Ruth
Dated: Monday March 22 2004 - 18:33:59 GMT

What the heck is a G4, sounds like some guy thing, you know dual carbs? And, would it be too old to test my pages? [I just finally tossed two apple II c, I think it was c maybe one was e]

About the putting the script call in the cell, I didn't think you could do that, the directions say you can't?

Ruth

Poster: John
Dated: Monday March 22 2004 - 18:48:36 GMT


G4 is the chip designation (like P4 for - well, you know). Dual carbs? Yeah, you could say that - it has 2 main processor chips.

Old? No. Got it new 3 years ago, and the G4 is still a very powerful chip. I'll send you the full specs off-list.

It works! At least I think my mock-up is right...

Poster: Ruth
Dated: Monday March 22 2004 - 18:51:16 GMT

it works for me also, on my pc browsers, wonder what it does on the mac ie browser that Andy lists the MAC PROBLEM link in the table sample?

And, I wouldn't have any idea what the specs mean, but you can send them. If they don't say 12" wide by 8" high I'm lost.

Ruth

Poster: Arcady
Dated: Monday March 22 2004 - 18:52:51 GMT

Thanks for all the help everyone. I think I have most of it sorted out now:

http://www.sg1archive.com/index2.shtml

I still can't get it to work in IE on Mac though. Can someone take a look at what I've got and help me out?

Poster: John
Dated: Monday March 22 2004 - 18:55:51 GMT


That'll have to be Maz...

Poster: John
Dated: Monday March 22 2004 - 18:56:44 GMT


Nothing so technical. Just a list of what's on the machine.

Poster: Ruth
Dated: Monday March 22 2004 - 19:08:29 GMT

Looks perfect in ie5.5, ns6, 7 and firebird .07. You are missing a semi-colon after the drawMenus() in the main table menu. Also, try downloading the newest update [keep a backup someplace of the one you have] and see if that helps with ie on the mac.


Ruth

Poster: Arcady
Dated: Monday March 22 2004 - 19:16:50 GMT

I added the semi-colon.

I had version 5.07 and just upped it to 5.09, but the menu doesn't show up in Mac IE still. I tried to follow the instructions to make it work in Mac IE but maybe I missed something.

Thanks for everyone's help.

Poster: Ruth
Dated: Monday March 22 2004 - 19:19:08 GMT

Did you check John's link with your mac ie? See if that one loads, that could give us some more info. If it does then we need to look at your page, if it doesn't then maybe something else is a problem.

Ruth

Poster: Arcady
Dated: Monday March 22 2004 - 19:23:58 GMT

I tried John's link in Mac IE and it doesn't work either.

Poster: Maz
Dated: Monday March 22 2004 - 19:27:14 GMT

Hi Ruth, I have the iMac G4 love it, although I think John does have the dual carbs and probably a lot newer than mine;) They get all the best educational deals, its sad.

Hi Arcady,
I'll take another look at mac, make sure you have the latest update, there were some ie mac problems on the previous update. Mine works fine now, but one little error could be causing it not to load.

I see navigation and site news now. Almost there. you have to lose the ... before the paths on your index and in menu_data.js they should all start with a slash /

maz

Poster: Arcady
Dated: Monday March 22 2004 - 19:37:29 GMT



Those aren't part of the menu script. The menu sits inside a table cell within that element.

Poster: Ruth
Dated: Monday March 22 2004 - 19:39:44 GMT

Navigation and Site news are outside the menu, so it seems the menu is not loading at all on the mac ie. Going for a nap, ya'll take care.

Ruth

Poster: Maz
Dated: Monday March 22 2004 - 20:11:28 GMT

Now I'm getting a javascript syntax error line 1.


You still need to change this:

<SCRIPT language=JavaScript src="../menus/milonic_src.js" type=text/javascript></SCRIPT>
<script language=JavaScript>
   if (parent.frames.length) { top.location=document.location;}
   if(ns4)_d.write("<scr"+"ipt language=JavaScript src=../menus/mmenuns4.js></scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=../menus/mmenudom.js></scr"+"ipt>");
</script>
<SCRIPT language=JavaScript src="../menus/menu_data.js" type=text/javascript></SCRIPT>

To this:

<SCRIPT language="JavaScript" src="/menus/milonic_src.js" type="text/javascript"></SCRIPT>
<script language="JavaScript">
   if (parent.frames.length) { top.location=document.location;}
   if(ns4)_d.write("<scr"+"ipt language=JavaScript src=/menus/mmenuns4.js></scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=/menus/mmenudom.js></scr"+"ipt>");
</script>
<SCRIPT language="JavaScript" src="/menus/menu_data.js" type="text/javascript"></SCRIPT>

For example on your menu_data.js

in the paths you have "../menu/image.gif";
change to "/menu/image.gif";

I don't know where you introduced the syntax error.

maz

Poster: Arcady
Dated: Monday March 22 2004 - 20:24:24 GMT

Okay, I changed the script and got rid of the .. stuff, but it still won't load in Mac IE. Where are you seeing the javascript error?

Poster: Maz
Dated: Monday March 22 2004 - 23:56:11 GMT

Hi,

We should swap tasks, I'm getting lost on forums and you on menu.

Where's Kevin, Andy, someone who knows js?

I tried Firebird w3 validation but you don't have enough doc tags to get any results. Then the page wouldn't come up in IE, probably because you were working on it, so I checked js console instead and thats where the error showed.

Now you have paths correct I'll see if I can find anything. If ie is having a js conflict I wouldn't know, perhaps someone else can have a look.

Okay, here's just detail stuff, but I'm wondering if your js .src is interfering with milonic src.

aI("text= SG-1 Info;url=http://www.sg1archive.com/sg1/;showmenu=SG1");
aI("text= Atlantis Info;url=http://www.sg1archive.com/atlantis/;showmenu=Atlantis");

I would add a ; at the end of each line before the last "

This could be something:

};
drawMenus();

make it this without that semicolon:

}
drawMenus();

Have you looked up details for frames, you have if parent frames, unless you have checked info on frames it can cause problems. But most likely it wouldn't be working at all if that was it.

Okay here is where mac ie gets confused, it doesn't like the quotes on those single dimensions:

padding=5;
separatorsize=1;
subimagepadding=1;
borderwidth=0;

..............
or take out what you don't need.
fontstyle="normal";
borderwidth=0;
bordercolor & borderstyle unless you are still using those, thought you were using a border.

You can make a new submenu style by copying the style, changing the style name in style and menu style=, maybe after you got it working;)

You could probably even make the portal work with the same menu without extra js.

Your urls can also start with a slash from the root /s1.shtml but that's your choice to have full urls.
.....

Unless I missed something or its js related, it should be working with those fixes.

maz

Poster: Arcady
Dated: Tuesday March 23 2004 - 0:38:21 GMT

I did a whole bunch of stuff, including all your suggestions, and now it is working! (It's a royal pain to make it look similar in Windows IE, Mac IE and Safari - which I use.) It still looks just a bit "off" in Mac IE, but if it works, then the 10 people out of 10 million that use Mac IE can get by.

I still have some fiddling to do (gotta be careful, seems like a single error will make Mac IE puke) but I'm pretty much set to send in my money and put this live on my site!

Note for future Mac IE problems: the stupid thing caches like a nightmare. I had to keep closing the app and re-launching it to make it see simple changes to the menu. I never did get itemwidth="100%" to work in it either - it makes it wider than the browser window in IE with that, so I had to set a specific item width.

Thanks to everyone for your kind support. I hope the users on my site like this change as much as I am liking it so far.

Poster: Arcady
Dated: Tuesday March 23 2004 - 0:46:18 GMT

Okay, maybe I spoke too soon. It looks like it screws up still in Mac IE, making itself wider than the browser window, then if you reload it looks right.

Mac IE is the worst pile of junk ever created!

Poster: Maz
Dated: Tuesday March 23 2004 - 0:56:53 GMT

Great, finally!

Ie is a pain, fortunately most will be using Safari.

Looks good, you might want to add a border now to submenus, you could now copy the main menu style and rename it submenu, and change the style name on the submenus.

There is also another way to say copyof mainmenu style and then just add to it. You'll probably see that done on the milonic site.

Now you have a basic menu working you could do all kinds of things like I was saying you can plot your graphics and create more menu links.

Its best to test each step ready to undo if it disappears.

maz

Poster: Arcady
Dated: Tuesday March 23 2004 - 6:07:55 GMT



So I went ahead and tried that. Now IE is broken again (and I did save my original menu_data file, so I don't get it. I pasted the same exact stuff back in and it won't load at all now.) If this thing is going to break every time I breathe wrong, maybe I should look for something else.

Poster: Maz
Dated: Tuesday March 23 2004 - 6:33:52 GMT

Its working fine and your borders. Use shift and reload to make sure you get the new version.

Now you can get remove borders and fontstyle on menustyle.

No quotes needed on padding & subimagepadding.

with(menuStyle=new mm_style()){
onbgcolor="#547CBB";
oncolor="#ffffff";
offbgcolor="#E7EBF7";
offcolor="#000000";
separatorcolor="#ffffff";
separatorsize=1;
padding=5;
fontsize="7.5pt";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="#ffffff";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="/menus/arrow.gif";
subimagepadding=2;
overfilter="Fade(duration=0.2);Alpha(opacity=90)";
outfilter="randomdissolve(duration=0.3)";
}

with(menuStyle1=new mm_style()){
onbgcolor="#547CBB";
oncolor="#ffffff";
offbgcolor="#E7EBF7";
offcolor="#000000";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#ffffff";
separatorsize=1;
padding=5;
fontsize="7.5pt";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="#ffffff";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="/menus/arrow.gif";
subimagepadding=2;
overfilter="Fade(duration=0.2);Alpha(opacity=90)";
outfilter="randomdissolve(duration=0.3)";
}

It gets easier once you get the hang of it.

maz

Poster: Arcady
Dated: Wednesday March 24 2004 - 0:29:49 GMT

Okay, I got borders working and I even solved the IE Mac issue (the menu_data file was in UTF-8 encoding or something).

Now I have begun to add onfunction and offfunction stuff and it's still working great!

I have one question though: When I look at the menus in IE 6 on Windows, there is some transparency to them. Is this not implemented on Safari or Mac IE? It looks especially neat on this test page: http://www.sg1archive.com/store2.shtml

Thanks again to everyone for all the help. I'll be purchasing this menu as soon as I can find some more spare change in the couch.

Poster: kevin3442
Dated: Wednesday March 24 2004 - 3:14:50 GMT


Out sick... bad cold ruined my whole weekend and then some. Looks like you guys got it figured out just fine.

Couple of general notes:

(1) Maz pointed this out on severl properties. In general, any property that is a numeric should be assigned as such, without double or single quotes around the value. I.e.,
should be
In most cases, the browser's implementation of javascript should automatically "cast" the value from a string (in quotes) to a numeric value when the property is used in a numeric context. But some crappy browsers may have some difficulty with that. I notice, Arcady, that you are assigning double-quoted (string) values to menuwidth and itemwidth in your Main Menu. Might want to remove the quotes.

(2)
That's because of the

part of the overfilter definition in your menuStyle1. You're basically telling any menu that uses that style to be 10% transparent. A cool effect, but it'll only work in IE5.5+ on Windows.

I was wondering, in all this messing around with table-bound menu, did you try taking the menu out of the table and just positioining it horizontally using an offset from center? That might take away some of the headaches brought on by tables.

I agree with the others... nicely designed site.

Cheers,

Kevin

Poster: Maz
Dated: Wednesday March 24 2004 - 3:55:29 GMT

Glad to see you back Kevin, I was ill all last week.

Besides the IE flashbacks, looks like it was small stuff. You can't leave all the js to Ruth, although she does try:)

I didn't want to confuse Arcady, there was nothing wrong with the implementation of the table, it was just not showing up in IE. Since the top and bottom item is the table and not the menu it wouldn't work, unless Arcady wants to add those links to the menu and style them.

Then everything would go back into menu_data.js keeping the script where it is, removing relative and replacing it with top= ; left= ;

Then the menu would sit in the same position on every page with the scripts under the body tag. Its easier to work. You can add more menus just by giving them another name and different position on the page, without worrying about changing the layout.

Anyway I think Arcady got his wings ready to move on to the next portal

maz

Poster: John
Dated: Wednesday March 24 2004 - 4:25:00 GMT

Glad to hear it. Nice work, you two!

Was just about to dig into it on Safari, but it's past my bed time (been working on the new site).

Poster: Arcady
Dated: Wednesday March 24 2004 - 8:30:32 GMT

Okay, I thought I had figured out how to enable a mouseover in the menu, but I am getting an error in Windows IE (it worked in Safari though.)

Here's the old original html:
<a href="/forums/" OnMouseOut="return CloseChevron(8)" OnMouseOver="return ForumsChevron(8)">SG-1 Forums</a>

Here's what I put in for the menu:
aI("text=&nbsp;Forums;url=http://www.sg1archive.com/forums/;offfunction=return CloseChevron(8);onfunction=return ForumsChevron(8);");

Why won't it work in Windows IE? I'm getting an error when I mouse over that menu item.

Poster: Ruth
Dated: Wednesday March 24 2004 - 8:58:26 GMT

I think you don't put the word return in there. At least when I removed that it and tried it on the desktop I got no error, I just got the word Forum when I moused over and it went away when I moused off

Ruth

Poster: Arcady
Dated: Wednesday March 24 2004 - 9:15:57 GMT

That's it! Now I can rebuild my funky Stargate to light up with my cool new menu.

Thanks!

Poster: Maz
Dated: Wednesday March 24 2004 - 15:51:17 GMT

I knew you would take off into that stargate, good luck on your next encounter

maz

Poster: John
Dated: Wednesday March 24 2004 - 16:10:29 GMT

Please - take us with you...