Bu işlemi yapmak için aşağıda vereceğim kodları sırasıyla uygulayın. Kodlar ile ilgili gerekli açıklamaları da yeri geldiğince yapacağım. Amacımız butona tıkladığımızda sayfamızın tam ekran açılmasını sağlamak. Yani F11’e benzer bir özellik.
Bu arada yeri gelmişken hemen belirteyim. Kodlar Safari, Chrome ve Firefox‘ta çalışmaktadır. Şu anda Linux kullandığım için Safari ve IE kullanma imkanım olmadı. Opera‘da bu özellik çalışmıyor. Chrome ve Firefox’ta istediğim sonucu aldım.
İlk önce sitenizin <head></head> etiketleri arasına aşağıdaki kodu girin. Bu kod sayesinde sitenizde jquery çalışacak.
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
Ardından aşağıdaki kodu </body> etiketinin üstüne ekleyin. Yani body etiketinin arasında ve sonunda olacak.
<script>
(function() {
var fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '',
prefix: ''
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
if (typeof document.cancelFullScreen != 'undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullScreenApi.prefix = browserPrefixes[i];
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
fullScreenApi.supportsFullScreen = true;
break;
}
}
}
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
fullScreenApi.isFullScreen = function() {
switch (this.prefix) {
case '':
return document.fullScreen;
case 'webkit':
return document.webkitIsFullScreen;
default:
return document[this.prefix + 'FullScreen'];
}
};
fullScreenApi.requestFullScreen = function(el) {
return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
};
fullScreenApi.cancelFullScreen = function(el) {
return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
};
}
if (typeof jQuery != 'undefined') {
jQuery.fn.requestFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(el);
}
});
};
}
window.fullScreenApi = fullScreenApi;
})();
</script>
<script>
var fsButton = document.getElementById('fsbutton'),
fsElement = document.getElementById('specialstuff'),
fsStatus = document.getElementById('fsstatus');
if (window.fullScreenApi.supportsFullScreen) {
fsStatus.innerHTML = 'EVET: Tarayiciniz Tam Ekran Modu destekliyor';
fsStatus.className = 'fullScreenSupported';
// handle button click
fsButton.addEventListener('click', function() {
window.fullScreenApi.requestFullScreen(fsElement);
}, true);
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
fsStatus.innerHTML = 'Tam ekran moduna gectiniz';
} else {
fsStatus.innerHTML = 'Normale don';
}
}, true);
} else {
fsStatus.innerHTML = 'Maalesef, kullandiginiz tarayici Tam Ekran ozelligini desteklemiyor';
}
</script>
Yukarıda verdiğim kod içerisindeki Türkçe yazılmış yazıları kendi isteğinize göre değiştirebilirsiniz. Bu yazılar, tam ekran butonunu kullanmak isteyen kişilere uyarı olarak çıkacak. Biraz kurcalarsanız ne olduğunu anlarsınız.
Şimdi de son olarak butonumuzu ve yazımızın olduğu kodu ekleyelim.
<div id="specialstuff">
<p>
specialstuff isimli id icinde yazilacak olan yazilar tam ekran gorunecek
</p>
<p>Bu ozellik Safari, Chrome ve Firefox'ta calisir.</p>
<p>Durum: <span id="fsstatus"></span></p>
</div>
<input id="fsbutton" type="button" value="Tam Ekran" />
Hepsi bu kadar.
Kodlar John Dyer's Code sitesinden alınmıştır.
Yorum Gönder