Scribd
Upload
5 views

browser

css chapter 4 diploma

Uploaded by

Vaishnavi Survase
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

browser

css chapter 4 diploma

Uploaded by

Vaishnavi Survase
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Creating new window

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function createnewwindow(){
window.open("https://www.youtube.com/", "my google page",
"height=100,width=100"); // url - name - style
}
</script>

</head>
<body>
<button onclick="createnewwindow()">Click to open new window</button>
</body>
</html>
Closing created window

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var a; // Declare the variable globally

function createnewwindow() {
// Open a new window with a small height and width
a = window.open("https://www.youtube.com/", "myGooglePage",
"height=300,width=300");
}

function closenewwindow() {
// Check if the window is open and not already closed
if (a && !a.closed) {
a.close();
}
}
</script>
</head>
<body>
<button onclick="createnewwindow()">Click to open new window</button>
<button onclick="closenewwindow()">Click to close new window</button>
</body>
</html>
Opening multiple windows

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function createnewwindow() {
// Open multiple windows with slightly modified URLs to prevent
reusing the same window
window.open("https://www.youtube.com/?window=1", "_blank",
"height=100,width=100");
window.open("https://www.youtube.com/?window=2", "_blank",
"height=100,width=100");
window.open("https://www.youtube.com/?window=3", "_blank",
"height=100,width=100");
}
</script>
</head>
<body>
<button onclick="createnewwindow()">Click to open new windows</button>
</body>
</html>

Output

It creates only one new window


Scroll window –using scrollto

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function scrollwindow() {
// Corrected function name
window.scrollTo(100, 200);
}
</script>
</head>
<body>
<button onclick="scrollwindow()">Click to scroll window</button>
<br>
<p>hi</p>
<br>
<p>hi</p>
<br>
<!-- More repeated content -->
<p>hi</p>
<br>
<!-- (Repeated many more times...) -->
</body>
</html>

Working properly ….:)


Using scrollby

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function scrollwindow() {
// Using scrollBy to scroll by 100 pixels horizontally and 200
pixels vertically
window.scrollBy(100, 200);
}
</script>
</head>
<body>
<button onclick="scrollwindow()">Click to scroll window</button>
<br>
<p>hi</p>
<br>
<p>hi</p>
<br>
<!-- More repeated content -->
<p>hi</p>
<br>
<!-- (Repeated many more times...) -->
</body>
</html>
Working..
Timers - Using setTimeout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function timers(){
setTimeout(display,5000)
}
function display(){
document.write("hello prathmesh")
}
</script>

</head>
<body>
<button onclick="timers()">Click here to start time</button>

</body>
</html>

Output

When you click this ,after the time interval you specified in the function ,the hello prathmesh text
will be displayed

This is displayed after 5 seconds


- Using setInterval

Same will be displayed ,but same function will trigger multiples

You might also like