I've been trying to create a popup launcher that fits the screen without overlapping Windows' taskbar, I've done some research, and even created the HTML file, but it doesn't quite work properly, it overlaps the taskbar and even goes beyond it. How can achieve such task, and what am I doing wrong?
Code: ( Run it on your desktop )
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>winds</title>
</head>
<body>
<script>
function fc()
{
window.open('','window','menubar=yes,screenX=0,screenY=0,top=0,left=0,location=no,status=no,toolbar=no,scrollbars=yes,resizable=no,width=' + (screen.width - 10) + ',height=' + screen.availHeight);
}
</script>
<a href="JavaScript:fc()">Chrome</a>
</body>
</html>I've been trying to create a popup launcher that fits the screen without overlapping Windows' taskbar, I've done some research, and even created the HTML file, but it doesn't quite work properly, it overlaps the taskbar and even goes beyond it. How can achieve such task, and what am I doing wrong?
Code: ( Run it on your desktop )
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>winds</title>
</head>
<body>
<script>
function fc()
{
window.open('http://www.google..br','window','menubar=yes,screenX=0,screenY=0,top=0,left=0,location=no,status=no,toolbar=no,scrollbars=yes,resizable=no,width=' + (screen.width - 10) + ',height=' + screen.availHeight);
}
</script>
<a href="JavaScript:fc()">Chrome</a>
</body>
</html>- Which windows task bar do you mean? I do not have any task bar, other systems have a task bar on top, left or right side of the screen. – axel.michel Commented Mar 21, 2016 at 21:23
-
Suggest testing if Chrome supports windows feature
outerHeight.heightis for the client area, doesn't include the window frame and title bar etc., and will cause overflow. You might needouterWidthas well – traktor Commented Mar 21, 2016 at 21:23
1 Answer
Reset to default 5It turns out window.outerWidth and window.outerHeight have been around a while but did not show up in IE until IE9.
The following code example opens a window with maximum size but clear of task bars by first opening it with minimum size and then resizing the opened window to occupy all of the available area.
function splashOpen(url)
{
var winFeatures = 'screenX=0,screenY=0,top=0,left=0,scrollbars,width=100,height=100';
var winName = 'window';
var win = window.open(url,winName, winFeatures);
var extraWidth = win.screen.availWidth - win.outerWidth;
var extraHeight = win.screen.availHeight - win.outerHeight;
win.resizeBy(extraWidth, extraHeight);
return win;
}
// and test
splashOpen("javascript:'hello folks and world'");
Noting:
the MDN wiki example of a window features string appears to be incorrect: include the names of features required and omit those not required.
Users may have selectively disabled suppression of widow.open features. (In Mozilla Firefox see
about:configunderdom.disable_window_open_featureto prevent popups hiding location details or disabling other useful features.)