Getelementbyid | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar getelementbyid

HTML5 sayfasında canvas ve javascript kullanarak çizim alanı oluşturma

08 May 2016 Yorum yapılmamış

Bir html sayfasında canvas elementi ve javascript kullanarak, mouse ile çizim yapabileceğimiz bir alan oluşturabiliriz. Örneğin, web sayfası üzerinde kullanıcının imzasını atabileceği bir alan oluşturabilmek mümkün.

Hemen yeni bir html dosyası oluşturalım ve aşağıdaki kodları yazalım;

Böylece sayfa üzerinde 400px x 400px alanında oluşturduğumuz canvas elementi üzerine mouse kullanarak çizim yapabileceğiz.

HTML5 video element ile cihazın Camera görüntüsünü göstermek

20 April 2016 1 yorum

HTML5 ile birlikte gelen video element içerisinde navigator.getUserMedia API method’u sayesinde Javascript aracılığı ile cihazın Camera görüntüsünü gösterebiliyoruz.

Bu makale ile adım adım ilerleyerek, cihazın Camera gösüntüsünü video element içerisinde gösteren bir sayfa oluşturacağız, hemen yeni bir html dosyası oluşturalım ve içine aşağıdaki kodları yazalım;

Sayfaya bir video element ekleyeceğiz, Javascript aracılığı ile cihazın Camera görüntüsünü alacak, video element içerisinde göstereceğiz. Bunun için aşağıdaki kodları <body></body> element içerisine ekleyelim;

Böylece, sayfa açıldığında navigator nesnesinin getUserMedia method’unu kullanarak cihazın Camera görüntüsüne ulaşmayı deniyoruz.

Not : Eğer audio filtresine false değeri yerine true değeri verirsek sesleri de almaya başlarız.

Eğer camera‘ya başarılı bir şekilde erişebilirsek, window.URL.createObjectURL() methodu ile Camera‘nın görüntüsünü istediğimiz video element içerisinde oynatmaya başlayabiliyoruz.

Sayfa ilk açıldığında kullanıcıdan Camera‘ya erişmek için izin istenir.

Gerekli izin verildikten sonra Camera görüntüsü, ilgili video element içerisinde oynatılmaya başlanır.

Eğer Camera görüntüsünü durdurmak istiyorsak, stream‘in stop() methodunu çağırmamız yeterli.

Ayrıca, CSS3 stillerini kullanarak Camera görüntüsü üzerine efekt‘ler de uygulayabiliriz. Bakınız, HTML5 video element CSS3 ile efekt uygulamak

Eğer Camera görüntüsünün çözünürlüğünü değiştirmek istersek, navigator.getUserMedia() methodunun ilk parametresinde basitçe video: true yazmak yerine, istediğimiz çözünürlüğü aşağıdaki gibi belirtiyoruz;

HTML TextArea elemanına girilebilecek karakter sayısını sınırlamak

17 September 2010 7 yorum

HTML‘de metin kutularına (<input type=”text” />) girilebilecek karakter sayısını maxlength özelliği ile kısıtlayabiliyoruz;

<input type="text" id="AdSoyad" maxlength="75" />

Fakat TextArea elemanı için maxlength özelliği yer almamaktadır.

Eğer TextArea elemanı için maxlength özelliğini sağlamak istersek, sayfamıza javascript kodu eklememiz gerekir.

Örneğin, ilgili TextArea elemanına 100 karakterlik bir sınır koymak istiyorsak, aşağıdaki javascript kodunu sayfamıza ekleyebiliriz;

<script type="text/javascript">
	function TextAreaKarakterSayisiDogrula()
	{
		var sonSayi = 100 - document.getElementById("Adres").value.length;
		if (sonSayi >= 0)
		{
			document.getElementById("KalanKarakterSayac").innerHTML = sonSayi;
		}
		else
		{
			document.getElementById("Adres").value = document.getElementById("Adres").value.substring(0, 100);
			document.getElementById("KalanKarakterSayac").innerHTML = 0;
		}
	}
</script>

<textarea id="Adres" onkeyup="TextAreaKarakterSayisiDogrula()" cols="20" rows="5"></textarea>

Kalan karakter sayısı : <span id="KalanKarakterSayac">100</span>

Örnek kodu herhangi bir html sayfasına koyarsanız, farklı tarayıcılarda sorun çıkartmadan çalışacaktır.