Menu Moves When Resolution Varies

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:40

Menu Moves When Resolution Varies

Poster: BarraGT
Dated: Tuesday June 28 2005 - 8:16:02 BST

Hello.

I was trying out this menu, and it's awesome, but it changes position if the computer has a different resolution. I did a search here and noticed something that addresses it, but the advice given didn't match the code I have, so perhaps someone else can help.

I just want to place the menu somewhere specific, and I don't want it to move no matter what resolution or monitor the person may be using.

Here is the code I have in one of the two .JS files. The other code section is too lengthy to post:

Code:

menunum=0;menus=new Array();_d=document;function AddMenu(){menunum++;menus[menunum]=menu;}function dumpmenus(){mt="<script language=javascript>";for(a=1;a<menus.length;a++){mt+=" menu"+a+"=menus["+a+"];"}mt+="<\/script>";_d.write(mt)}

if(navigator.appVersion.indexOf("MSIE 6.0")>0)
{
effect = "Fade(duration=0.2);Alpha(style=0,opacity=88);Shadow(color='#777777', Direction=135, Strength=5)"
}
else
{
effect = "Shadow(color='#777777', Direction=135, Strength=5)"
}

timegap=100      // Menu Visibility Time
followspeed=5      // Follow Scrolling Speed
followrate=0      // Follow Scrolling Rate
suboffset_top=10;   // Sub menu offset Top position
suboffset_left=10;   // Sub menu offset Left position

MenuStyle=[      // MenuStyle is an array of properties. You can have as many property arrays as you need. This means that menus can have their own style.
"ffffff",      // Mouse Off Font Color
"000000",      // Mouse Off Background Color
"7F8F9A",      // Mouse On Font Color
"000000",      // Mouse On Background Color
"",         // Menu Border Color
10,         // Font Size in pixels
"normal",      // Font Style (italic or normal)
"bold",         // Font Weight (bold or normal)
"Arial,Verdana,Tahoma",   // Font Name
0,         // Menu Item Padding
"",         // Sub Menu Image (Leave this blank if not needed)
,         // 3D Border & Separator bar
"",         // 3D High Color
"",         // 3D Low Color
"7F8F9A",      // Current Page Item Font Color (leave this blank to disable)
"000000",      // Current Page Item Background Color (leave this blank to disable)
"",         // Top Bar image (Leave this blank to disable)
"000000",      // Menu Header Font Color (Leave blank if headers are not needed)
"",         // Menu Header Background Color (Leave blank if headers are not needed)
]

SubMenuStyle=[      // MenuStyle is an array of properties. You can have as many property arrays as you need. This means that menus can have their own style.
"FFFFFF",      // Mouse Off Font Color
"300000",      // Mouse Off Background Color
"FFFFFF",      // Mouse On Font Color
"3d0000",      // Mouse On Background Color
"",         // Menu Border Color
10,         // Font Size in pixels
"normal",      // Font Style (italic or normal)
"normal",      // Font Weight (bold or normal)
"Arial,Verdana,Tahoma",   // Font Name
5,         // Menu Item Padding
"",         // Sub Menu Image (Leave this blank if not needed)
,         // 3D Border & Separator bar
"",         // 3D High Color
"",         // 3D Low Color
"B8C4CF",      // Current Page Item Font Color (leave this blank to disable)
"",         // Current Page Item Background Color (leave this blank to disable)
"",         // Top Bar image (Leave this blank to disable)
"ffffff",      // Menu Header Font Color (Leave blank if headers are not needed)
"",         // Menu Header Background Color (Leave blank if headers are not needed)
]

AddMenu(menu=[      // This is the array that contains your menu properties and details
"MainMenu",      // Menu Name - This is needed in order for the menu to be called
233,         // Menu Top - The Top position of the menu in pixels
250,         // Menu Left - The Left position of the menu in pixels
,         // Menu Width - Menus width in pixels
0,         // Menu Border Width
,         // Screen Position - here you can use "center;left;right;middle;top;bottom" or a combination of "center:middle"
MenuStyle,      // Properties Array - this is set higher up, as above
1,         // Always Visible - allows the menu item to be visible at all time (1=on/0=off)
"left",         // Alignment - sets the menu elements text alignment, values valid here are: left, right or center
,         // Filter - Text variable for setting transitional effects on menu activation - see above for more info
0,         // Follow Scrolling - Tells the menu item to follow the user down the screen (visible at all times) (1=on/0=off)
1,          // Horizontal Menu - Tells the menu to become horizontal instead of top to bottom style (1=on/0=off)
0,         // Keep Alive - Keeps the menu visible until the user moves over another menu or clicks elsewhere on the page (1=on/0=off)
,         // Position of TOP sub image left:center:right
,         // Set the Overall Width of Horizontal Menu to 100% and height to the specified amount (Leave blank to disable)
,         // Right To Left - Used in Hebrew for example. (1=on/0=off)
0,         // Open the Menus OnClick - leave blank for OnMouseover (1=on/0=off)
,         // ID of the div you want to hide on MouseOver (useful for hiding form elements)
,         // Reserved for future use
,         // Reserved for future use
,         // Reserved for future use

,"<img src='/Site/Index/IndexMenu(Home).jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenuStroke.jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenu(TheDriver).jpg' border='0'>",   "show-menu=TheDriver",   "#",      "",            0

,"<img src='/Site/Index/IndexMenuStroke.jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenu(TheTeam).jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenuStroke.jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenu(TheCar).jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenuStroke.jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenu(TheSponsors).jpg' border='0'>",   "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenuStroke.jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenu(TheFans).jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenuSpace.jpg' border='0'>",      "#",         "#",      "",            0

,"<img src='/Site/Index/IndexMenu(MemberZone).jpg' border='0'>",   "#",         "#",      "",            0

])

// Menu Specifications: Begin

   AddMenu(menu=["TheDriver",
   273,352,160,0,"",SubMenuStyle,,"left",,,0,,,,,,,,,,
   ,"Profile","#",,"Profile",
   ,"History","#",,"History",
   ,"Statistics","#",,"Statistics",
   ,"At Home","#",,"At Home",
   ])

// Menu Specifications: End

dumpmenus()

Any help really would be appreciated!

Poster: Andy
Dated: Tuesday June 28 2005 - 9:05:06 BST

Hi,

Looks like you've got a copy of version 3 there.

We are now at version 5.727 so quite a bit further on than the code you have.

Download the latest version and see if that helps

Cheers,
Andy

Poster: BarraGT
Dated: Tuesday June 28 2005 - 9:20:17 BST

Thanks for that. Can you tell me where I can go to download the newer release, and what do I need to do to replace my current code?

Poster: Ruth
Dated: Tuesday June 28 2005 - 14:18:39 BST

Hi BarraGT,

Go to the Milonic main site. Login, if you haven't registered, then register and log in. Forum registration is not the same as the main site registration. Click the download menu button and download Version 5, using whichever link you need on that download page. It is pretty self-explanatory.

Once you have the new version, unzip it to some folder. In it you will see a menu_data.js file. That is equivalent to your menu_array.js file, it is where you put all your data.

There is a Version3 to Version 5 converter available so you don't have to rewrite everything from your menu_array.js file. On the main site, under DTHML Menu link in the main menu, down toward the bottom, you'll see that converter link. Convert your menu_array.js file, the one you posted here. It will give you a menu_data.js file to download. I would download it to the same place I unzipped the menu files, BUT, I would rename it as I saved it, so that the sample doesn't get written over and you'll always have the sample to use as a model.... You can name it what you want, i.e. my_menu_data.js, converted_data.js, mine.js......whatever you want

Because you don't seem to have anything but images and # in your 'strings' in the old menu file, you're not going to get any of those items converted because it has nothing to read to convert. You will get a menu_data.js file that has all the styles in it but no menus items.

Code:

,"<img src='/Site/Index/IndexMenu(Home).jpg' border='0'>","#", "#","",0

This is one of the 'items' in your main menu. In the new menu you would have to code it yourself since there is nothing for the converter to read as to text, url, status, etc. so it doesn't do anything with that. Once you've converted your menu_array.js file, open the sample menu_data.js file to see how the actual menus are coded.

If you need more help, just post back, someone can help you with it. Also, there is a Beginner's Guide Forum with some very very basic explanations. It's a pretty quick read.

Hope that helps.

Ruth

Poster: John
Dated: Tuesday June 28 2005 - 15:26:54 BST

Also check the readme files that come in the download. Very helpful.

On the main site there are many samples to help get you started. Check under the 'DHTML Menu' item.

Industrial Strength JavaScript and DHTML Menus

Menu Moves When Resolution Varies