Butona tıklayarak sayfayı tam ekran yapmak için gerekli javascript kodları.
HTML
|
1 2 3 4 5 6 |
div id="tamekran"> <h1>Tam Ekran Yaptınız</h1> <button id="tamekran-button">Tam Ekran Yap</button> </div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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
|
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 |
<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İ
|
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 |
<!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