Practical No. 11. Develop a webpage for placing the window on screen
and working with child window.
Minimum Theoretical Background
A. Window
● Here we can control the status bar, tool bar and resize the child window from the main
window.
● By changing the value of status to 1 from 0 (status=1;) we can display the status bar for
the
● child window. Same way by making the toolbar=1; we can display the tool bars for the
small window.
B. Opening a Window
To open a new windows we use open() method of window object.
Syntax: window.open(url, name, style);
url: An URL to load into the new window.
Name: A name of the new window. Each window has a window.name, and here we can
specify which window to use for the popup. If there’s already a window with such name
the given URL opens in it, otherwise a new window is opened.
style: The style of window includes various parameters such as menubar, toolbar,
location, status, resizable, scrollbars, height & width of window
C. The Arguments:
● Height: Defines the height of the window in pixels. Percentage values don't work.
● Width: Defines the width. Again, you'll have no joy with percentages.
● Left: Supported by version 4 browsers and above, this sets how far removed
the window appears from the left of the screen. In pixels.
● Top: Partner to left, this pushes the window off the top of the screen.
● Resizable:Set to true or false, this may allow the user to resize the window.
● Scrollbars: Another Boolean value, this adds scrollbars to the new window.
If your content may be longer then the dimensions you've specified, make
sure this is set to yes.
● Toolbar: Specifies whether the basic back/forward toolbar should be visible.
If there are links to follow in your new page, set this to yes
● Menubar: Specifies whether the main toolbar (File, Edit, ...) is shown.
● Location: Specifies whether the location toolbar (address bar) is shown.
● Status: Specifies whether the new window can have a status bar. Best set to
yes. For security reasons, Mozilla-based browsers always show the status bar.
● Directories: Specifies whether the directories toolbar is shown (Links toolbar in IE).
Questions:1. Explain any 4 methods used with window object along with their syntax.
1.resizeby(): Resizes the window by the specified pixels
2.resizeTo(): Resizes the window to the specified width and height
3.scrollBy(): Scrolls the document by the specified number of pixels
4. ScrollTo(): Scrolls the document to the specified coordinates
5.setInterval(): Calls a function or evaluates an expression at specified intervals (in
milliseconds)
6.setTimeOut(): Calls a function or evaluates an expression after a specified number of
milliseconds
7.clearInterval(): Clears a timer set with setInterval()
8.clearTimeOut(): Clears a timer set with setTimeout()
Exercise:1. Write a program to design a form to accept height and width and 3 buttons as “Create
Window”, “Move Window” and “Resize window”
<!DOCTYPE html>
<html>
<head>
<title>Practical 11 : Window</title>
</head>
<body>
<div id="any">
<button onclick="cr_win()">Create new Window</button>
<button onclick="moby_win()">Move By</button>
<button onclick="moto_win()">Move to</button>
<button onclick="reto_win()">Re size To</button>
<button onclick="reby_win()">Re Size By</button>
</div>
<script
type="text/javascript">
function cr_win()
{
new_w = window.open('','abcd','width=100 , height=100');
}
function moby_win()
{
new_w.moveBy(200,200;
new_w.focus();
}
function moto_win()
{
new_w.moveTo(200,500)
; new_w.focus();
}
function reto_win()
{
new_w.resizeTo(300,300
); new_w.focus();
}
function reby_win()
{
new_w.resizeBy(100,100);
new_w.focus();
}
</script>
</body>
</html>
Output:
Creating Window :
MoveBy:
MoveTo:
Resize To:
Resize by:
