Creating an "onresize" event. 1

DanOoo · Mar 16, 2005

Hi everyone. I am not good at manipulating javascript and I would appreciate some guidance. Below is some code that I am using to display and position menus and submenus. This works fine when the page is loaded. However, the submenu positioning displays out of place if the user resizes the screen. I need help or guidance with the necessary code to adjust the offset through an onresize event. Thank you for your help.

DanOoo

*** Please forgive the long array below.

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>

spewn · Mar 16, 2005

how about just refreshing the current location of the page once resized?

wrap this around your code:

Code:

<script>
x=0;
url=location.href;
function pageRefresh() {
if (x==1) {location.href=url;}
}
</script>
<body onresize="x++;pageRefresh();">

enter your code here

</body>

if the page refreshes before the resize finishes, change this line:

Code:

if (x==1) {location.href=url;}

to

Code:

if (x==2) {location.href=url;}

hope that helps.

- g

DanOoo · Mar 16, 2005

spewn -
Thank you for the code. I tried it and it works great. Will the refresh interfer with the info a user has entered into a form before they submit it? An example would be if a user decides to resize the window to see more of the form. Will the refresh drop their entered info if they have not submitted it?
Thanks again,
DanOoo

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!

Creating an "onresize" event. 1

DanOoo

Programmer

spewn

Programmer

DanOoo

Programmer

Similar threads

Part and Inventory Search

Sponsor

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!

Creating an &quot;onresize&quot; event. 1

DanOoo

Programmer

spewn

Programmer

DanOoo

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor

Creating an "onresize" event. 1