Remove the Scrollbar in Fullscreen Mode when Using JavaScript

October 26th, 2010 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

By using the window.open() function of JavaScript we can popup a new browser window/tab, specify the height and width of the window to be opened, and even set whether to hide or show certain elements such as toolbars, the address bar and more.

One of the other attributes we can specify is whether or not the window opens in fullscreen mode. An example of this would be like so:

window.open('popup_url.html', 'newWindow', 'fullscreen=yes, scrollbars=no');

Simple enough really. We’ve set the URL of the window to be opened, the name of the new window, along with any attributes; in this case to open the window full screen and with no scrollbars.

I know what you’re saying: “But my popup still has scrollbars”

You’re absolutely right. When opening a new window in fullscreen the ‘scrollbars’ parameter is not taken into account and therefore we need to adjust the file contained within our popup (in the above case popup_url.html). Simply add the following to the opening <body> tag:

<body style="overflow:auto">

Or:

<body style="overflow:hidden">

In doing the above the scrollbars should be now gone (or at least only shown if required).

This entry was posted on Tuesday, October 26th, 2010 at 8:40 pm by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first