Easy Code Stuff: JavaScript Window Events

Java Script Provides Many Functions Related To Browser Window Such As Getting The Width and Height Of The Browser.

Following Java Script Functions Help Us To Get Many Things Related Browser Window.

Window Width
Following Script Will Returns The Browser Windows Width.

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

Window Height
Following Script Will Returns The Browser Windows Height.

var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Open A New Window
Following Java Script Function Will Open A New Browser. You Can Give The Parameters For The New Window Size.

function openWindow() {
myWindow = window.open('', '', 'width=400, height=200');
}

Closing A Window
Following Java Script Function Will Close The Existing Opened Browser.

function closeWindow() {
myWindow.close();
}

Re-sizing The Window To A Given Width and Height
Following Java Script Function Will Re size The Existing Opened Browser To The Given Width and Height.

function resizeWindowTo() {
myWindow.resizeTo(400, 400);
myWindow.focus();
}

Re-sizing The Window By A Given Width and Height
Following Java Script Function Will Re size The Existing Opened Browser By The Given Width and Height.

function resizeWindowBy() {
myWindow.resizeBy(-100, -100);
myWindow.focus();
}

Moving The Window To A Given X and Y Position In The Browser
Following Java Script Function Will Move The Existing Opened Browser To The Given X and Y Position.

function moveWindowTo() {
myWindow.moveTo(300, 100);
myWindow.focus();
}

You Can Use Many Functions Such As You Want To Re-size The Window and Place In A New Position.Following Example Contains All The Above Window Events In A Page.

JavaScript Window Events.html
<html>
<head>
<title>JavaScript Window Events</title>
<script>
var myWindow;

function getWindowSize(){
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
alert("Window Size : " + windowWidth + "px," + windowHeight + "px");
}

function openWindow() {
myWindow = window.open('', '', 'width=400, height=200');
}

function resizeWindowTo() {
myWindow.resizeTo(400, 400);
myWindow.focus();
}

function resizeWindowBy() {
myWindow.resizeBy(-100, -100);
myWindow.focus();
}

function moveWindowTo() {
myWindow.moveTo(300, 100);
myWindow.focus();
}

function closeWin() {
myWindow.close();
}
</script>
</head>
<body>
<button onclick="getWindowSize()">Get Window Size</button><br/>
<button onclick="openWindow()">Open A New Window</button><br/>
<button onclick="resizeWindowTo()">Re size The Window To 400px, 400px</button><br/>
<button onclick="resizeWindowBy()">Re size The Window By 100px, 100px</button><br/>
<button onclick="moveWindowTo()">Change Window Position</button><br/>
<button onclick="closeWin()">Close The Window</button><br/>
</body>
</html>

Easy Code Stuff

Nov 15, 2014

JavaScript Window Events

No comments:

JWT Token Decode Using Jquery