Positioning window in the center of viewport..

[emphramParticipant]

Hello I’m working on a modal window that contains nothing but a progressbar, I want it to always be centered regardless of where the user is or scrolls to on the page. Currently the default behaviour centers the window at the top, but if I scroll down or open it from below I dont see it until I scroll up, can some one orient me on this?

Note: The previous thread on positioning a window is not related to this problem.

Thanks in advance.

[emphramParticipant]

Hello everyone, just wanted to mention that I found the solution to my problem. Thanks anyways.

[emphramParticipant]

Here is the solution if anyone needs it:

function showProgressBar() {
	//GET WINDOW HEIGHT AND WIDTH
	var winHeight = $(window).height();
	var winWidth = $(window).width();
	
	//KEEP CENTERED
	var posX = (winWidth/2) - ($('#progressBarWindow').width()/2) + $(window).scrollLeft();
	var posY = (winHeight/2) - ($('#progressBarWindow').height()/2) + $(window).scrollTop();
	$('#progressBarWindow').jqxWindow({position: {x: posX, y: posY}});
	
	//KEEP CENTERED WHEN SCROLLING
	$(window).scroll(function() {
		winHeight = $(window).height();
		winWidth = $(window).width();
		posX = (winWidth/2) - ($('#progressBarWindow').width()/2) + $(window).scrollLeft();
		posY = (winHeight/2) - ($('#progressBarWindow').height()/2) + $(window).scrollTop();
		$('#progressBarWindow').jqxWindow({position: {x: posX, y: posY}});
	});
	
	//KEEP CENTERED EVEN WHEN RESIZING
	$(window).resize(function() {
		winHeight = $(window).height();
		winWidth = $(window).width();
		posX = (winWidth/2) - ($('#progressBarWindow').width()/2) + $(window).scrollLeft();
		posY = (winHeight/2) - ($('#progressBarWindow').height()/2) + $(window).scrollTop();
		$('#progressBarWindow').jqxWindow({position: {x: posX, y: posY}});
	});
	
	//UPDATE PROGRESSBAR
	progressBarInterval = setInterval(function() {
		var val = $('#progressBar').jqxProgressBar('val');
		$('#progressBar').jqxProgressBar('actualValue',val+10);
	},100)
	
	//OPEN WINDOW
	$('#progressBarWindow').jqxWindow('open');
}

After this you should have a close window function, and get rid of the event handlers and timer interval (store handle in global variable).

[youngbloodParticipant]

thanks, you save my life!!

very good working

[sjkcwatsonParticipant]

Thank you! This helped me as well!

[IvaldeParticipant]

For the window always to be positioned in screen center, when scrolled or not ecrolled, set the window div style to the following:

style=”position: fixed; left: 50%; top: 50%;”

Here is a complete example in which the winMsgTxt is set in runtime:

<div id=”winMsg” style=”position: fixed; left: 50%; top: 50%;”>
<div>
<div id=”winMsgTxt”></div>
<div>
<div style=”position: absolute; bottom: 10px; right: 10px; margin-top: 10px;”>
<input type=”button” id=”btnMsgOk” value=”OK” /><input type=”button” id=”btnMsgCancel” value=”Cancel” />
</div>
</div>
</div>
</div>

[Author]

Posts