Join WhatsApp ChannelJoin Now

How to Window Full Screen In JavaScript

by admin Author

Published - | Updated - May 28, 2021 12:23 am

195 Views

Hello Dev,

Today, i we will show you how to window full screen in javaScript. This article will give you simple example of how to window full screen in javaScript. you will learn how to window full screen in javaScript.

So let’s follow few step to create example of how to window full screen in javaScript.

Window Full Screen In JavaScript

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<title>How to Window Full Screen In JavaScript - codeplaners</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
#fullscreen {
    margin: 40px auto 20px auto;
    height: 200px;
    width: 600px;
    background-color: #3f51b5;
    font-size: 20px;
    padding: 40px 0 0 0;
    text-align: center;
    box-sizing: border-box;
}
#fullscreen span {
    color: #fff;
    font-family: sans-serif;
}
#full-button {
    width: 200px;
    display: block;
    margin: 50px auto 0 auto;
    padding: 10px;
    background: #ffffff;
}
#fullscreen:-webkit-full-screen {
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
    margin: 0;
}
#fullscreen:-moz-full-screen {
    background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
    margin: 0;
}
 
#fullscreen:-ms-fullscreen {
    background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
    margin: 0;
}
#fullscreen:fullscreen {
    background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
    margin: 0;
}
 
</style>
 
</head>
 
<body>
    <div id="fullscreen">
        <span>How to Window Full Screen In JavaScript - codeplaners</span>
        <button id="full-button">Enable Full Screen</button>
    </div>
</body>
 
<script>
 
/* Get into full screen */
function GoInFullscreen(fullscreen) {
    if(fullscreen.requestFullscreen)
        fullscreen.requestFullscreen();
    else if(fullscreen.mozRequestFullScreen)
        fullscreen.mozRequestFullScreen();
    else if(fullscreen.webkitRequestFullscreen)
        fullscreen.webkitRequestFullscreen();
    else if(fullscreen.msRequestFullscreen)
        fullscreen.msRequestFullscreen();
}
 
/* Get out of full screen */
function GoOutFullscreen() {
    if(document.exitFullscreen)
        document.exitFullscreen();
    else if(document.mozCancelFullScreen)
        document.mozCancelFullScreen();
    else if(document.webkitExitFullscreen)
        document.webkitExitFullscreen();
    else if(document.msExitFullscreen)
        document.msExitFullscreen();
}
 
/* Is currently in full screen or not */
function IsFullScreenCurrently() {
    var full_screen_fullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
     
    // If no fullscreen is in full-screen
    if(full_screen_fullscreen === null)
        return false;
    else
        return true;
}
 
$("#full-button").on('click', function() {
    if(IsFullScreenCurrently())
        GoOutFullscreen();
    else
        GoInFullscreen($("#fullscreen").get(0));
});
 
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
    if(IsFullScreenCurrently()) {
        $("#fullscreen span").text('How to Window Full Screen In JavaScript - codeplaners');
        $("#full-button").text('Disable Full Screen');
    }
    else {
        $("#fullscreen span").text('How to Window Full Screen In JavaScript - codeplaners');
        $("#full-button").text('Enable Full Screen');
    }
});
 
</script>
</html>

Recommended Posts

Random Post

Trending Post