No scrollbar on HTML web pages - JavaScript code

In the preceding article we saw how a scrollbar can be hidden from view or be made transparent by putting the same color value as the web page background color (HTML color name or color code) to all scrollbar css properties. This is fine for web pages whose content fits in the browser display area because Netscape and Mozilla display no scrollbars for such pages and for Internet Explorer the scrollbar can be made transparent or hidden because it recognizes the CSS scrollbar properties. Also, if the web page content is more than the browser display area, Internet Explorer would show no scrollbar because it understands the scrollbar css properties but Netscape and Mozilla will display a scrollbar.

In this article we will learn how to create cross-browser compatible web page windows with no scrollbars and we will utilize a little JavaScript code to achieve the desired result.

Note: This will not work on browsers that do not understand JavaScript or have JavaScript turned off.

What is JavaScript?

JavaScript is a client-side language that runs on all common browsers and is typically employed to develop interactive web pages.

Let us now discuss how to use JavaScript to display browser windows with no scrollbars. The JavaScript method that we employ is window.open() which, as you would have guessed, opens new browser windows. This is different from the target="_blank" HTML anchor attribute because with JavaScript you are able to control several aspects of the new window. This is what the method looks like:

<a href="javascript:void(0)"
onclick="window.open('web_page_name.html')">
Open a new window</a>

As you can see, the JavaScript open() method is of the window object and is placed as a value for the onclick attribute of the anchor tag. The method takes a variable name or a web page filename as the argument that is placed inside the parenthesis. To open a new window using this JavaScript method, click here.

onclick is a JavaScript event handler - you can read more about this in the JavaScript tutorial. However, to quickly brief you on this, onclick, typically, takes in some JavaScript code as its value. This code is executed whenever the surfer clicks on the HTML element that is associated with this event handler such as form submit buttons, anchored text etc.

The JavaScript window.open() method takes in four arguments.

window.open('URL', 'NAME', 'FEATURES', 'REPLACE')

We have already seen that if we provide the filename of a web page through the first argument, it will be loaded in the new window.

NAME: specifies a name for the new window that can then be used as value for the target attribute of <a> tags.

FEATURES: let you define properties of the window such as width, height, presence or absence of scrollbars, location bar, status bar etc.

REPLACE: takes a boolean value... we won't bother ourselves with this argument!

<a href="javascript:void(0)"
onclick="window.open('js_new_window.html','welcome')">
Open a new window</a>

List of important FEATURES

• height: Specifies height of the new window in pixels.
• width: width of the new window in pixels
• location: determines the presence of the location bar
• menubar: menubar
• scrollbars: scrollbars
• status: status bar
• toolbar: toolbar
• directories: specifies the display of link buttons
• resizable: determines whether the window can be resized. If it's absent or its value is set 'no', the window does not have resize handles around its border.
• fullscreen: Specific to the Internet Explorer, it determines whether the window is displayed in the full screen mode.

<a href="javascript:void(0)"
onclick="window.open('js_new_window.html',
'welcome','width=300,height=200')">
Open a new window</a>

Open a new window

The above opens a new window 300 pixels in width and 200 pixels in height. Pay close attention to how the features are written. The two features (width and height) are enclosed by a pair of quotes without any spaces and there are no quotes surrounding the values.

Did you notice something in the new window?
It didn't have any scrollbars, location bar, status bar, menubar, toolbar or buttons!
We've already seen that the features argument is optional and consists of a comma separated list of features. If this argument is omitted, the new window has all features present in it. However, if at least one feature is present, the JavaScript interpreter will consider only the ones that appear ignoring the features that are absent.

The width and the height take a number (pixels) as value, for other features the value is either a yes or no.

<a href="javascript:void(0)"
onclick="window.open('js_new_window.html',
'welcome','width=300,height=200,menubar=yes,status=yes')">
Open a new window</a>

This window has the menu and the status bars. The others are absent since we didn't specify them.

<a href="javascript:void(0)"
onclick="window.open('js_new_window.html',
'welcome','width=300,height=200,menubar=yes,status=yes,
location=yes,toolbar=yes,scrollbars=yes')">
Open a new window</a>

The value of the onclick event handler is becoming long and unmanageable in the example above. A smarter way to do this is by packing all the code into a JavaScript function that can be used again and again. For the details, refer JavaScript Functions - Creating and Using - 1. This is especially helpful for web pages that contain many links with the onclick event handler such as those having image thumbnail which when clicked display the larger version in a new browser window.

But before that, here is a small novelty for Internet Explorer users.
The fullscreen feature is specific to this browser and displays the document on the entire screen. A neat effect... sort of! Click on the F11 to remove the full screen display.

<a href="javascript:void(0)"
onclick="window.open('js_new_window2.html.html',
'welcome','fullscreen=yes,scrollbars=yes')">
Open a full screen window</a>

Open a full screen window

Note: Firefox and Netscape also open a full sized window but show the title bar at top.

1 | 2 | 3 | 4 | 5 | 6 |