Başlık Değiştirme

Merhaba !

Twitter'da gezerken Emir Karşıyakalı'nın bir tweet'ine denk geldim. enuygun.com sitesinde işlem yaparken farklı bir tab'a geçtiğinizde title'da kalan işlem süresini gösteriyormuş. Bunu gördüğümde ilgimi çekti ve bu işlemlerin kodunu oluşturmak istedim.

Başlarken

Öncelikle title'ın farklı sekmeye geçtiğimizde değişmesini sağlayalım. Gerekli kod oldukça basit;

var title = document.title;
var alttitle = "Başlık değişti!";
 
window.onblur = function () {
	document.title = alttitle;
};
 
window.onfocus = function () {
	document.title = title;
};

İlk olarak sayfa başlığını title'a atayıp, sayfa değiştiğinde görünecek yazıyı alttitle adında bir string değişkeninde tutuyoruz. window.onblur sayfa değiştiğinde, window.onfocus ise sayfa aktifleştiğinde yapılacak işlemleri belirtiyor. Yukarıdaki kod, siteyi açtığımızda normal title'ı gösterecekken, başka sekmeye geçtiğimizde title'da "Başlık değişti!" yazacak.

Bu işlemden sonra, bir sayaç oluşturup alttitle değişkeninde süreyi göstereceğiz.

Sayaç Kodları

Sayaç fonksiyonu için öncelikle setInterval() fonksiyonuyla her saniyede bir fonksiyonu çağırarak işe başlıyoruz.

setInterval(sayac, 1000);

Saniye, dakika, saat değişkenlerini oluşturup, bu değişkenlerin artması için aşağıdaki kodlar yeterli.

function sayac() {
	if (saniye < 59) {
		saniye = saniye + 1;
	} else {
		saniye = 0;
		if (dakika < 59) {
			dakika = dakika + 1;
		} else {
			dakika = 0;
			saat = saat + 1;
		}
	}
}

Bu fonksiyonun ardından alttitle değişkenimize bu süreyi aktaralım.

alttitle = saat + ":" + dakika + ":" + saniye;

Hane Kodları

Kodu sonlandırmadan önce sürenin kaç hane olduğunu kontrol ettirsek iyi olacak. 0:0:8 yerine 00:00:08 formatında yazması için basit bir fonksiyon oluşturalım.

function hane(x) {
	if (x < 10) {
		return "0" + String(x);
	} else return x;
}

Hane fonksiyonumuz; saniye, dakika ve saat değişkenleri eğer 10'dan küçükse başına 0 rakamını ekliyor.

Alttitle değişkenimizi değiştirmeden öncede değerleri hane fonksiyonuna gönderelim.

alttitle = hane(saat) + ":" + hane(dakika) + ":" + hane(saniye);

Ve son olarak tüm kodlarımızı bir araya getirerek kodumuzu sonlandıralım.

Sayfaya focus olunduğunda başlığı varsayılan başlık yapıp; saniye, dakika ve saat değişkenlerimizi sıfırlıyoruz.

Farklı sekmeye geçtiğimizde ise alttitle değişkenin aktif olmasını sağlıyoruz. Her saniye başlığın değiştirilmesi içinde bir kontrol değişkeni oluşturdum.

Kodları github profilimde tutuyorum. Herhangi bir kod güncellemesi yaptığımda github üzerinden en güncel halini inceleyebilir, kullanabilirsiniz.

github.com/omergulcicek/change-title

Ayrıca dont-go ve i miss you projelerini inceleyebilirsiniz.

Codepen Canlı Önizleme

Codepen sitesi, başlık değiştirmeye izin vermediği için kodları sitenizin konsolunda ( F12 ) deneyebilirsiniz.