JavaScript Sayfayı Tam Ekran Yapma

Bu örneğimizde JavaScript ile sayfamıza bir buton ekleyeceğiz. Daha sonra bu butona tıklayarak sayfamızın tam ekran olmasını sağlayacağız.

Kodlar:


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#tamekran:-moz-full-screen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#tamekran:-ms-fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#tamekran:-webkit-full-screen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#tamekran:fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
 
#tamekran:-moz-full-screen > h1 {
color: red;
display: block;
}
#tamekran:-ms-fullscreen > h1 {
color: red;
display: block;
}
#tamekran:-webkit-full-screen > h1 {
color: red;
display: block;
}
 
 
#tamekran:-moz-full-screen > button {
display: none;
}
#tamekran:-ms-fullscreen > button {
display: none;
}
 
#tamekran:-webkit-full-screen > button{
display: none;
}
 
#tamekran:fullscreen > button {
display: none;
}
 
#tamekran:fullscreen > button {
display: none;
}
 
#tamekran:fullscreen > h1 {
color: red;
}
 
#tamekran > h1{
display: none;
}
</style>
 
</head>
<body>
 
<div id="tamekran">
<h1>Tam Ekran Yaptınız</h1>
<button id="tamekran-button">Tam Ekran Yap</button>
</div>
 
 
<script type="text/javascript">
var tamEkranButon = document.getElementById("tamekran-button");
 
function tamEkranYap() {
/*tam ekran yapılacak div*/
var tamEkranDiv = document.getElementById("tamekran");
 
/*tarayıcının tam ekranı destekleyip desteklemediğini kontrol edyiyoruz. Tam ekran yapılacak div ile.*/ 
var tamEkranFonk=tamEkranDiv.requestFullscreen||
tamEkranDiv.mozRequestFullScreen||
tamEkranDiv.msRequestFullscreen||
tamEkranDiv.webkitRequestFullScreen;
 
tamEkranFonk.call(tamEkranDiv); 
}
tamEkranButon.addEventListener('click', tamEkranYap);
</script>
 
</body>
</html>

100

101

102

<!DOCTYPE html>

<html>

<head>

#tamekran:-moz-full-screen {

padding: 42px;

background-color: pink;

border:2px solid #f00;

font-size: 200%;

}

#tamekran:-ms-fullscreen {

padding: 42px;

background-color: pink;

border:2px solid #f00;

font-size: 200%;

}

#tamekran:-webkit-full-screen {

padding: 42px;

background-color: pink;

border:2px solid #f00;

font-size: 200%;

}

#tamekran:fullscreen {

padding: 42px;

background-color: pink;

border:2px solid #f00;

font-size: 200%;

}

#tamekran:-moz-full-screen > h1 {

color: red;

display: block;

}

#tamekran:-ms-fullscreen > h1 {

color: red;

display: block;

}

#tamekran:-webkit-full-screen > h1 {

color: red;

display: block;

}

#tamekran:-moz-full-screen > button {

display: none;

}

#tamekran:-ms-fullscreen > button {

display: none;

}

#tamekran:-webkit-full-screen > button{

display: none;

}

#tamekran:fullscreen > button {

display: none;

}

#tamekran:fullscreen > button {

display: none;

}

#tamekran:fullscreen > h1 {

color: red;

}

#tamekran > h1{

display: none;

}

</style>

</head>

<body>

<h1>Tam Ekran Yaptınız</h1>

<button id="tamekran-button">Tam Ekran Yap</button>

</div>

var tamEkranButon = document.getElementById("tamekran-button");

function tamEkranYap() {

/*tam ekran yapılacak div*/

var tamEkranDiv = document.getElementById("tamekran");

/*tarayıcının tam ekranı destekleyip desteklemediğini kontrol edyiyoruz. Tam ekran yapılacak div ile.*/

var tamEkranFonk=tamEkranDiv.requestFullscreen||

tamEkranDiv.mozRequestFullScreen||

tamEkranDiv.msRequestFullscreen||

tamEkranDiv.webkitRequestFullScreen;

tamEkranFonk.call(tamEkranDiv);

}

tamEkranButon.addEventListener('click', tamEkranYap);

</script>

</body>

</html>

Ekran çıktısı için tıklayın.

JavaScript Sayfayı Tam Ekran Yapma

Diğer Örnekler:

1 Yorum

Yorum yap X

Diğer Örnekler:

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

1 Yorum

Yorum yap X