Scribd
Upload
14 views7 pages

browser

css chapter 4 diploma

Uploaded by

Vaishnavi Survase
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views7 pages

browser

css chapter 4 diploma

Uploaded by

Vaishnavi Survase
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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