Butona tıklayarak sayfayı tam ekran yapmak için gerekli javascript kodları.
HTML
div id="tamekran"> <h1>Tam Ekran Yaptınız</h1> <button id="tamekran-button">Tam Ekran Yap</button> </div>
JavaScript
<script type="text/javascript">
/*tıklama işlemi yapılacak buton*/
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);
}
/*tıklandığında çalıştırılacak fonksiyonu bağlama*/
tamEkranButon.addEventListener('click', tamEkranYap);
</script>
CSS
Tıklama işlemi yapıldığında sayfanın daha düzgün görünmesi için Sözde seçiciler ile tasarımın düzenlenmesi
<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>
KODLARIN SON HALİ
<!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>
1 Yorum