Javascript ve Jquery Kullanarak Sitenize Tam Ekran ( F11 ) Butonu Ekleyin

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 etiketleri arasına aşağıdaki kodu girin. Bu kod sayesinde sitenizde jquery çalışacak.

<script></script>

Ardından aşağıdaki kodu 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;

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.

specialstuff isimli id icinde yazilacak olan yazilar tam ekran gorunecek

Bu ozellik Safari, Chrome ve Firefox'ta calisir.

Durum:

[I]Kaynak: Javascript ve Jquery Kullanarak Sitenize Tam Ekran ( F11 ) Butonu Ekleyin

Teşekkürler...

Rica ederim. :)