Menu
Hello Everyone,
I am currently developing a small script that will open a “Help Dialog”. The “Help Dialog” is created using the handy ‘window.open()’ function.
Simply opening a window which has been provided with concrete attribute values is easy, e.g.: window.open(‘helpdialog.htm’,’Help’,’height=200, width=200′);
However I am interested in setting the height, width, screenX and screenY information dynamically based upon the users screen resolution (and ultimately the available screen area).
I have written (and included below) code to this end. My challenge lies in setting attribute values dynamically within the code.
e.g.:
var boxHeight = getScreenHeight() / 2;
window.open(‘helpdialog.htm’,’Help’,’height=boxHeight’….)
Simply including the “boxHeight” variable in the window.open() method does not work. I have considered adding height, width, screenX and screenY values to the function call (listed below) which is responsible for opening the new window. However I do not think that this approach will be a fundamental improvement.
Any help with working out how to include dynamic values in my script will be greatly appreciated.
<html>
<head>
<title> Help Pop-Up box spawning page </title>
<script type=”text/javascript”>
//<!–
/***** Determine the available screen area for content display.
var screenHeight = getScreenHeight();
var screenWidth = getScreenWidth();
var boxHeight = screenHeight / 2;
var boxWidth = screenWidth / 2;
function getScreenHeight()
{
if(window.innerHeight) // For NN4 & W3C
{
return window.innerHeight;
}
else
if(document.documentElement) // For IE6+
{
return document.documentElement.offsetHeight;
}
else
if(document.body.clientHeight) // For IE4 & IE5
{
return document.body.clientHeight;
}
}
function getScreenWidth()
{
if(window.innerWidth) // For NN4 & W3C
{
return window.innerWidth;
}
else
if(document.documentElement) // For IE6+
{
return document.documentElement.offsetWidth;
}
else
if(document.body.clientWidth) // For IE4 & IE5
{
return document.body.clientWidth;
}
}
function openWindow(pageAddress, pageName)
{
window.open(pageAddress, pageName, ‘height=boxHeight,width=boxWidth,left=10,top=10,screenX=10,screenY=10’);
}
//–>
</script>
</head>
<body>
<a href=”#” onclick=”openWindow(‘helpbox.htm’,’help’)”>Click for Help Dialog</a>
</body>
</html>
Thanks for your help.
Regards
Davo