JQuery İle Sanal Klavye

Ödeme sistemlerinde genellikle kullanılan sanal klavyeleri görmüşsünüzdür. Merakımızın sonucu olarak aşağıdaki gibir bir yapı oluştu. Merak edenler için ödeme sistemlerinde kullanılan sanal klavyenin yapım aşamaları aşağıdadır. Sanal klavyenin çözümünü, tasarımını ve sanal klavye üzerinde tuş basım yani keypress olayının tetiklenmesi aşağıdaki gibidir. Bu arada farklı yöntemlerde mevcuttur.

Şimdi olayın yapım aşamasında aşağıdaki gibi bir yapı kullandık.

Okumaya devam et “JQuery İle Sanal Klavye”

JQuery Ajax Error Handling / Hataları Toplamak

Jquery Ajax kullandığımız birçok projenin backend tarafında oluşan hataları AJAX tarafında genellikle yakalamak oldukça zordur. Hele birde dataType’ınız JSON gibi farklı formatlar da ise zorluk dereceniz bir tık daha artacaktır.

Fakat her AJAX işleminde success, error işlemlerini yakalamak oldukça zahmetli bir iş. Ekstra fazladan kodlar, bulunamayan satırlar bunlar hep dert.

Aşağıdaki kod parçacağımız sayesinde sistemimizdeki AJAX işlemlerine ekstra olarak error event vermek yerine tüm sisteminizdeki error eventları tek bir yerde topluyoruz ve isterseniz de tekrar başka bir yöntem veya yine AJAX ile herhangi bir yere LOG olarak yazabilirsiniz.

AJAX Error Handling

$( document ).ajaxError( function( event, jqxhr, settings, thrownError )
{
	console.log( jqxhr.responseText.trim() );
});

 

Ben kısaca özetleyip, kullanımını belirttim. Console.log ile ekranda görünmesini sağladım.  Gerisi sizde. 🙂 Bu hareketi gördükten sonra bir çok hatayı hızlıca çözmeye başladım / başladık.

Css keyframes ile animasyon yapımı

Merhaba arkadaşlar, internet sitelerinde gezerken sağdan soldan akan yazıları veya görsellerin animasyon efeklerini merak etmişsinizdir. Bugün sizlere css keyframeslerden bahsetmek istiyorum.   Class (.) ya da İd (#) lerde kullanılır. Css ‘animation’    içerisinde kullanım gerçekleştirilmektedir. Keyframesizin işlem sıralamasıda önemlidir. %0 %25 %50 % 75 %100 şeklinde hareket pozisyonları belirleyebilir bu % leri çoğaltabilir ya da arttıradabilirsiniz.

.logo img
{
    max-width: 200px;
    max-height: 100px;
    animation: buyume 1s ease-in-out;
}


Yazmış olduğumuz keyframesimizi bu şekilde kullanabiliriz. Size küçük bir bilgi vermek istiyorum yapmak istediğiniz işlemi sonsuz bir döngüye sokmak isterseniz keyframesimizin hareket pozisyonlarından sonra sonuna ‘infinite’ vererek sonsuz animasyon yapabilmenizi sağlar. 

Örnk

.logo img
{
    max-width: 200px;
    max-height: 100px;
    animation: buyume 1s ease-in-out infinite;
}

Hadi başlayalım

1-) Keyframes’e bir isim vererek animasyonumuzun hareket pozisyonlarınızı verebilirsiniz.


@keyframes buyume 
{
    0%
    {
        max-width: 200px; 
        opacity: 0;
    }
   50% 
    {
        max-width: 80px;  
        opacity: 1;
    }
    100% 
    {
        max-width: 200px;  
        opacity: 0;
    }
}

JQuery ile Nesnenin Show / Hide Event Yakalama

Javascript tarafında oldukça fazla event ( olay ) var. JQuery ile birleştiğinde daha da fazla eventlara hatta özelleştirilmişlere dahi sahip olabiliyorsunuz. Bir projede form hazırlarken div nesnesinin show / hide durumuna göre başka bir nesnenin işlenmesi gerekiyordu. Ufak bir araştırma sonucu herhangi bir nesnenin – sadece div değil – show / hide durumlarına göre event atayabileceğimi buldum.

Aşağıdaki kod ile bu event ın tanımlamasını yapıyoruz

	( function( $ )
	{
	  	$.each(['show', 'hide'], function (i, ev)
	  	{
			var el = $.fn[ ev ];
			$.fn[ ev ] = function()
			{
		  		this.trigger( ev );
		  		return el.apply( this, arguments );
			};
	  	});
	})(jQuery);

Örnek kullanım;

	$( 'div' ).on( 'show', function()
	{
		$( 'span' ).html( 'div gösterim durumu açık' );
	});
	$( 'div' ).on( 'hide', function()
	{
		$( 'span' ).html( 'div gösterim durumu kapalı' );
	});

Siz div veya kendi class / id her neyse artık $( ‘div’ ).show(); veya $( ‘div’ ).hide(); yaptığınızda span nesnesi içerisinde durumunu açıklayan yazıyı yazacak. Bu ihtiyaç bizim için sekmeli form işlemi yaparken verilen cevaplara göre bir sonraki sorunun ( her bir soru bir div içerisinde yapı olarak yer alıyor )  hangisi olacağını belirliyordu. Basit bir işlem için bu şekilde bir kullanıma gerek kalmayabilir fakat hareket güzel. 🙂

Denemedim fakat event ataması yapılırken each ile birlikte show / hide belirteci yapılırken farklı eventlar üzerinden event türetimi yapılabilir sanırım.

Centos Linux MYSQL ve Web Dosyaları Yedekleme

VPS ( Virtual Private Server | Özel Sanal Sunucu ) kullanıyorsanız üzerinde de Cpanel, WHM, Vesta, Plesk vb. bir yönetim paneli bulunmuyor ise yedekleme işlemleri biraz zor olabilir. Yedekleme yapabilmek için genellikle manuel işlemler mevcut. MYSQL kullandığımızı düşünürsek PHPMyAdmin üzerinden tüm veritabanını indirmek, PHP kullandığımızı da düşünürsek FTP vb. bir bağlantı ile bağlanıp dosyaları maneul olarak yedeklemek uzun bir senaryo.

Peki biz her gece uyurken yedekler otomatik olarak alınsa ? Daha rahat ve güzel olmaz mı ? 🙂 Okumaya devam et “Centos Linux MYSQL ve Web Dosyaları Yedekleme”

Chrome Javascript ile Barkod / QR Okuyucu Problemi

Standart el terminalleri ve barkod okuyucular ile stok / depo takibi yaptığımız bir sistem üzerinde yeni nesil teknoloji olan QR ( kare kod ) okutma sırasında problemler yaşadık.
Problem el terminalinin QR KOD u okuması sonrasında Chrome üzerinde CTRL+J yapması. Chrome üzerinde indirilenler sayfası açılmakta ve aynı zamanda QR içerisinde New Line yani enter ( \n ) özelliğini pas geçiyordu.

Aşağıdaki Javascript Kod parçacığı ile birlikte bu problemin üstesinden geldik. Bizim canımız yandı sizinkiler yanmasın;


window.document.getElementById( 'collect_seri' ).addEventListener('keydown', function(event)
    {
    	console.log( event );
    	if( event.keyCode == 13 || event.keyCode == 17 ||  event.keyCode == 74 )
		{
			if( event.keyCode == 13 || event.keyCode == 17 )
				$( '#collect_seri' ).val( $( '#collect_seri' ).val()+"\n" );
			if( event.ctrlKey != false )
				event.preventDefault();
			return;
		}
    });

“collect_seri” ID li nesne textarea nesnesidir. Siz problem yaşadığınız nesne veya nesnelere işlem yapabilirsiniz.