Dynamic menu position based on window size.

DanOoo · Mar 17, 2005

I need some assistance or guidance. I have a menu where the submenus loose their offset when a user changes the window size. Because of the application use I can not use a page refresh function. I need help with making the code dynamic and automatic while the window is being resized. Below is the code that I have so far and it works great when the page is loaded. However, I have not been able to figure out the dynamic repositioning when the window size is changed. Your suggestions are greatly appreciated.

***Sorry for the long array and code that follow!***
Thank you,
DanOoo

Code:

<SCRIPT language=javascript src="menu/ypslideoutmenus/ypSlideOutMenusC.js"></SCRIPT> 
<SCRIPT> 
   var group1 = grouping1(); 
   var group2 = grouping2(); 
   var group3 = grouping3(); 
   var group4 = grouping4(); 
   var group5 = grouping5(); 
   var group6 = grouping6(); 
   var group7 = grouping7(); 
   var group8 = grouping8(); 
          
   function grouping1() 
   { 
   var getWindowPos1 = document.body.clientWidth ? document.body.clientWidth : document.body.offsetWidth; 
   var offsetgrouping1 = -209; 
   var newLeftgrouping1 = getWindowPos1 / 2 + offsetgrouping1; 
   return newLeftgrouping1 
   } 
    
   function grouping2() 
   { 
   var getWindowPos2 = document.body.clientWidth ? document.body.clientWidth : document.body.offsetWidth; 
   var offsetgrouping2 = 5; 
   var newLeftgrouping2 = getWindowPos2 / 2 + offsetgrouping2; 
   return newLeftgrouping2 
   } 
    
   function grouping3() 
   { 
   var getWindowPos3 = document.body.clientWidth ? document.body.clientWidth : document.body.offsetWidth; 
   var offsetgrouping3 = 25; 
   var newLeftgrouping3 = getWindowPos3 / 2 + offsetgrouping3; 
   return newLeftgrouping3 
   } 
    
   function grouping4() 
   { 
   var getWindowPos4 = document.body.clientWidth ? document.body.clientWidth : document.body.offsetWidth; 
   var offsetgrouping4 = -79; 
   var newLeftgrouping4 = getWindowPos4 / 2 + offsetgrouping4; 
   return newLeftgrouping4 
   } 
    
   function grouping5() 
   { 
   var getWindowPos5 = document.body.clientWidth ? document.body.clientWidth : document.body.offsetWidth; 
   var offsetgrouping5 = -99; 
   var newLeftgrouping5 = getWindowPos5 / 2 + offsetgrouping5; 
   return newLeftgrouping5 
   } 
    
   function grouping6() 
   { 
   var getWindowPos6 = document.body.clientWidth ? document.body.clientWidth : document.body.offsetWidth; 
   var offsetgrouping6 = -59; 
   var newLeftgrouping6 = getWindowPos6 / 2 + offsetgrouping6; 
   return newLeftgrouping6 
   } 
    
   function grouping7() 
   { 
   var getWindowPos7 = document.body.clientWidth ? document.body.clientWidth : document.body.offsetWidth; 
   var offsetgrouping7 = -109; 
   var newLeftgrouping7 = getWindowPos7 / 2 + offsetgrouping7; 
   return newLeftgrouping7 
   } 
    
   function grouping8() 
   { 
   var getWindowPos8 = document.body.clientWidth ? document.body.clientWidth : document.body.offsetWidth; 
   var offsetgrouping8 = 101; 
   var newLeftgrouping8 = getWindowPos8 / 2 + offsetgrouping8; 
   return newLeftgrouping8 
   } 
    
   //    ("menu_name", "direction", left pos, top pos, width, height) 
    
   var menus = [ 
   new ypSlideOutMenu("menu100", "right", group1, 139, 215,400, null), 
   new ypSlideOutMenu("menu102", "right", group1, 159, 215,400, null), 
   new ypSlideOutMenu("menu103", "right", group1, 177, 215,400, null), 
   new ypSlideOutMenu("menu104", "right", group1, 197, 215,400, null), 
   new ypSlideOutMenu("menu105", "right", group1, 215, 215,400, null), 
   new ypSlideOutMenu("menu106", "right", group1, 234, 215,400, null), 
   new ypSlideOutMenu("menu107", "right", group1, 253, 215,400, null), 
   new ypSlideOutMenu("menu200", "right", group1, 295, 215,400, null), 
   new ypSlideOutMenu("menu202", "right", group1, 314, 215,400, null), 
   new ypSlideOutMenu("menu204", "right", group1, 332, 215,400, null), 
   new ypSlideOutMenu("menu206", "right", group1, 351, 215,400, null), 
   new ypSlideOutMenu("menu208", "right", group1, 370, 215,400, null), 
   new ypSlideOutMenu("menu210", "right", group1, 389, 215,400, null), 
   new ypSlideOutMenu("menu212", "right", group1, 408, 215,400, null),       
   new ypSlideOutMenu("menu214", "right", group1, 427, 215,400, null), 
   new ypSlideOutMenu("menu216", "right", group1, 446, 215,400, null), 
   new ypSlideOutMenu("menu218", "right", group1, 465, 215,400, null), 
   new ypSlideOutMenu("menu220", "right", group1, 484, 215,400, null), 
   new ypSlideOutMenu("menu222", "right", group1, 503, 215,400, null), 
   new ypSlideOutMenu("menu224", "right", group1, 522, 215,400, null), 
   new ypSlideOutMenu("menu226", "right", group1, 541, 215,400, null),       
   new ypSlideOutMenu("menu228", "right", group1, 560, 215,400, null), 
   new ypSlideOutMenu("menu230", "right", group1, 579, 215,400, null), 
   new ypSlideOutMenu("menu232", "right", group1, 598, 215,400, null), 
   new ypSlideOutMenu("menu234", "right", group1, 617, 215,400, null), 
   new ypSlideOutMenu("menu236", "right", group1, 636, 215,400, null), 
   new ypSlideOutMenu("menu238", "right", group1, 655, 215,400, null), 
   new ypSlideOutMenu("menu240", "right", group1, 674, 215,400, null),                   
   new ypSlideOutMenu("menu242", "right", group1, 693, 215,400, null), 
   new ypSlideOutMenu("menu244", "right", group1, 712, 215,400, null), 
   new ypSlideOutMenu("menu3100", "right", group1, 753, 215, 400, null), 
   new ypSlideOutMenu("menu3200", "right", group1, 772, 235, 400, null), 
   new ypSlideOutMenu("menu3300", "right", group1, 791, 235, 400, null), 
   new ypSlideOutMenu("menu3110", "right", group2, 753, 215, 400, 'menu3100'),    
   new ypSlideOutMenu("menu3112", "right", group2, 771, 215, 400, 'menu3100'), 
   new ypSlideOutMenu("menu3114", "right", group2, 789, 215, 400, 'menu3100'), 
   new ypSlideOutMenu("menu3116", "right", group2, 807, 215, 450, 'menu3100'),    
   new ypSlideOutMenu("menu3118", "right", group2, 825, 215, 400, 'menu3100'), 
   new ypSlideOutMenu("menu3120", "right", group2, 843, 215, 400, 'menu3100'), 
   new ypSlideOutMenu("menu3122", "right", group2, 861, 215, 400, 'menu3100'), 
   new ypSlideOutMenu("menu3124", "right", group2, 879, 215, 400, 'menu3100'),       
   new ypSlideOutMenu("menu3126", "right", group2, 897, 215, 400, 'menu3100'),       
   new ypSlideOutMenu("menu3128", "right", group2, 915, 215, 400, 'menu3100'),       
   new ypSlideOutMenu("menu3130", "right", group2, 933, 215, 400, 'menu3100'),    
   new ypSlideOutMenu("menu3132", "right", group2, 951, 215, 400, 'menu3100'), 
   new ypSlideOutMenu("menu3210", "right", group3, 772, 215, 400, 'menu3200'),    
   new ypSlideOutMenu("menu3212", "right", group3, 790, 215, 400, 'menu3200'), 
   new ypSlideOutMenu("menu3214", "right", group3, 808, 215, 400, 'menu3200'), 
   new ypSlideOutMenu("menu3216", "right", group3, 826, 215, 400, 'menu3200'),    
   new ypSlideOutMenu("menu3218", "right", group3, 844, 215, 400, 'menu3200'), 
   new ypSlideOutMenu("menu3220", "right", group3, 862, 215, 400, 'menu3200'), 
   new ypSlideOutMenu("menu3222", "right", group3, 880, 215, 400, 'menu3200'), 
   new ypSlideOutMenu("menu3224", "right", group3, 898, 215, 400, 'menu3200'),       
   new ypSlideOutMenu("menu3226", "right", group3, 916, 215, 400, 'menu3200'),       
   new ypSlideOutMenu("menu3228", "right", group3, 934, 215, 400, 'menu3200'),       
   new ypSlideOutMenu("menu3310", "right", group3, 791, 215, 400, 'menu3300'),    
   new ypSlideOutMenu("menu3312", "right", group3, 809, 215, 400, 'menu3300'), 
   new ypSlideOutMenu("menu3314", "right", group3, 827, 215, 400, 'menu3300'), 
   new ypSlideOutMenu("menu3316", "right", group3, 845, 215, 400, 'menu3300'),    
   new ypSlideOutMenu("menu3318", "right", group3, 863, 215, 400, 'menu3300'), 
   new ypSlideOutMenu("menu3320", "right", group3, 881, 215, 400, 'menu3300'), 
   new ypSlideOutMenu("menu3322", "right", group3, 899, 215, 400, 'menu3300'), 
   new ypSlideOutMenu("menu3324", "right", group3, 917, 215, 400, 'menu3300'),       
   new ypSlideOutMenu("menu3326", "right", group3, 935, 215, 400, 'menu3300'),       
   new ypSlideOutMenu("menu400", "right", group1, 832, 125,400, null), 
   new ypSlideOutMenu("menu402", "right", group1, 851, 125,400, null), 
   new ypSlideOutMenu("menu404", "right", group1, 870, 125,400, null), 
   new ypSlideOutMenu("menu406", "right", group1, 889, 215,400, null), 
   new ypSlideOutMenu("menu408", "right", group1, 908, 215,400, null), 
   new ypSlideOutMenu("menu410", "right", group1, 927, 215,400, null), 
   new ypSlideOutMenu("menu414", "right", group1, 946, 125,400, null), 
   new ypSlideOutMenu("menu416", "right", group1, 965, 150,400, null), 
   new ypSlideOutMenu("menu418", "right", group1, 984, 215,400, null), 
   new ypSlideOutMenu("menu420", "right", group1, 1004, 215,400, null), 
   new ypSlideOutMenu("menu422", "right", group1, 1022, 215,400, null), 
   new ypSlideOutMenu("menu424", "right", group1, 1041, 170,400, null), 
   new ypSlideOutMenu("menu426", "right", group1, 1060, 130,400, null), 
   new ypSlideOutMenu("menu428", "right", group1, 1079, 215,400, null), 
   new ypSlideOutMenu("menu430", "right", group1, 1098, 125,400, null), 
   new ypSlideOutMenu("menu432", "right", group4, 1060, 160,400, "menu426"), 
   new ypSlideOutMenu("menu434", "right", group4, 1078, 160,400, "menu426"), 
   new ypSlideOutMenu("menu500", "right", group1, 1139, 150,400, null), 
   new ypSlideOutMenu("menu502", "right", group1, 1158, 110,400, null), 
   new ypSlideOutMenu("menu504", "right", group1, 1177, 125,400, null), 
   new ypSlideOutMenu("menu506", "right", group1, 1196, 150,400, null), 
   new ypSlideOutMenu("menu508", "right", group1, 1215, 100,400, null), 
   new ypSlideOutMenu("menu510", "right", group5, 1158, 120, 400, "menu502"), 
   new ypSlideOutMenu("menu512", "right", group5, 1176, 120, 400, "menu502"), 
   new ypSlideOutMenu("menu514", "right", group5, 1212, 120,400, "menu502"), 
   new ypSlideOutMenu("menu516", "right", group5, 1230, 120,400, "menu502"), 
   new ypSlideOutMenu("menu518", "right", group6, 1196, 150,400, "menu506"), 
   new ypSlideOutMenu("menu520", "right", group6, 1214, 160,400, "menu506"), 
   new ypSlideOutMenu("menu524", "right", group6, 1232, 100,400, "menu506"), 
   new ypSlideOutMenu("menu526", "right", group7, 1215, 150,400, "menu508"), 
   new ypSlideOutMenu("menu528", "right", group7, 1251, 150,400, "menu508"), 
   new ypSlideOutMenu("menu530", "right", group8, 1214, 215,400, "menu520"), 
   new ypSlideOutMenu("menu532", "right", group8, 1232, 215,400, "menu520") 
   ] 
   document.write('<style type="text/css">' + ypSlideOutMenu.styleMod + '</style>'); 
   for (var i = 0; i < menus.length; i++) { 
      menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active'"); 
      menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';"); 
   } 
   </SCRIPT> 
<script language="javascript" src="menu/ypslideoutmenus/js/LC_menu_room.js"></script> 
<script language="javascript" src="menu/ypslideoutmenus/js/LC_menu_furn.js"></script> 
<script language="javascript" src="menu/ypslideoutmenus/js/LC_menu_brand.js"></script> 
<script language="javascript" src="menu/ypslideoutmenus/js/LC_menu_style.js"></script> 
<script language="javascript" src="menu/ypslideoutmenus/js/LC_menu_decor.js"></script>

BillyRayPreachersSon · Mar 18, 2005

Have you considered using a different menu system, or changing your existing menu / layout?

We have no idea what your menu looks like (a URL would be nice), what is contained in any of the many JS files that you are including, or how your menu works (what are all those parameters for anyway)?

Dan

The answers you get are only as good as the information you give!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dynamic menu position based on window size.

DanOoo

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor