No scrollbar on HTML web pages - JavaScript code

No scrollbar on HTML web pages - JavaScript code

In my previous article I described how we can hide a scrollbar from user's view by putting the same color value as the web page.

What I have described in that article is absolutly fine for those web pages whose content fits in the browser display area because Netscape and Mozilla display no scrollbars for such pages and as far as IE is concern the scrollbar can be made transparent or hidden as it recognizes the CSS scrollbar properties. Even, if the page content is more than the browser display area, IE would show transparent or hidden scrollbar as it understands the css properties of the scrollbar but in case of Netscape and Mozilla they will display a scrollbar.



So the need arises to create cross-browser compatible web page windows with no scrollbars to accomplish this purpose we have to take help of little JavaScript code.



Note: But again a drawback is that it will not work on browsers that do not supports JavaScript or have JavaScript turned off.



We will use the window.open method of the javascript which will help us to open a new window with controlled funcationalty.



a small snipet of code will look like

[code]

< a href="javascript:void(0)"onclick="window.open('http://www.msdotnetmentor.com')" >Open a new window < /a>[/code] The open method is of the window object and in the above code it is taking an argument i.e. the ame of the webpage to be opened. and the onclick is a JavaScript event handler which is used to invoke the function in our case.

Bacically the JavaScript window.open() method takes in four arguments.

window.open('URL', 'NAME', 'FEATURES', 'REPLACE')By default, 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 which can 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!

[code]< a href="javascript:void(0)"onclick="window.open('http://msdotnetheaven.com','welcome')">Open a new window </a>< a href="javascript:void(0)"onclick="window.open('http://www.msdotnetmentor.com','welcome','width=300,height=200')">Open a new window </a>[/code]List of important FEATURESheight: 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. In the new window please notice that It is not having any scrollbars, location bar, status bar, menubar, toolbar or buttons!
The width and the height take a number (pixels) as value, for other features the value is either a yes or no.

[code]< a href="javascript:void(0)"onclick="window.open('http://msdotnetheaven.com','welcome','width=300,height=200,menubar=yes,status=yes')">Open a new window </a>[/code]


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

[code]

< a href="javascript:void(0)"onclick="window.open('http://www.msdotnetmentor.com','welcome','width=300,height=200,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes')">Open a new window </a>
[/code]

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.

[code]
< a href="javascript:void(0)"onclick="window.open('http://www.msdotnetmentor.com','welcome','fullscreen=yes,scrollbars=yes')">Open a full screen window </a>
[/code]

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