Kategori: JavasScript / JQuery / Ajax

Yayım tarihi

Javascript / JQuery Input Virgül Yerine Nokta

JQuery kullanarak geliştirdiğimiz arayüz çalışmasında matematiksel işlemler yapan ufak bir sayfamız vardı. Fakat Klavyenin sağ tarafındaki Number Pad kullanılığında el alışkanlığı olaraktan ondalıklı sayılar için Virgül kullanıldığında Javascript hataları alıyorduk. Bize gerekli olan ise Virgül tuşuna basıldığında Nokta’ya çevirmesiydi.

Bununla ilgili olaraktan Javascript / JQuery kod parçasını paylaşıyorum. Aynı zamanda ondalıklı sayılar için tek bir ondalık parçası yani tek bir Nokta işareti almalıydı. Kod parçasında nokta yani ondalık var ise tekrardan Nokta basmayacak şekilde düzenleme yaptık.

$( document ).on( 'keypress', '.input_calc', function( e )
{
if( e.keyCode == 46 && $( this ).val().indexOf( '.' ) != -1 )
e.preventDefault();

var tmp = $( this ).val();
if( e.keyCode == 44 )
{
setTimeout(function()
{
if( tmp.indexOf( '.' ) == -1 )
e.target.value += '.';
}, 4 );
e.preventDefault();
}
});

Bu olay / hata / problem artık ne demek isterseniz sadece javascript / web ortamında değil aynı zamanda hemen hemen bütün programlama dilleri ve veritabanı kayıt işlemlerinde ondalıklı sayıların nokta ile gelmesi durumlarını kapsayabilir. Geliştirmekte olduğunuz projede sayısal işlemleriniz mevcut ise dikkat etmenizi öneririm. 🙂

Yayım tarihi

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”

Yayım tarihi

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.

Yayım tarihi

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;
    }
}
Yayım tarihi

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.

Yayım tarihi

Sublime Text 3 Üzerinde PHP İle PHP Build Etme

Bir önceki yazımda ( Sublime Text 3 Üzerinde Node İle Javascript Build Etme ) Javascript için ufak bir geliştirme yapmıştık. Şimdi ise PHP için yapalım.

Yine Javascript’te olduğu  gibi PHP’de de  CTRL+B komutu ile işlemler yürüyor. Tek fark olarak dosya bazlı Build işlemi gerçekleştiği için tüm script çalışmayabilir.  Framework kullanıyorsanız bahsettiğim gibi sadece o sayfa derlenir Syntax hatası olup olmadığını görebilir.

Fakat PHP öğrenmeye yeni başlayanlar veya ufak tefek kod parçalarını test etmek için gerçekten güzel bir uygulama. Denemenizi tavsiye ederim..

Okumaya devam et “Sublime Text 3 Üzerinde PHP İle PHP Build Etme”

Yayım tarihi

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.

Yayım tarihi

Jquery DataTable Dropdown Problemi

Projelerinizde Jquery DataTable kullanıyorsanız ve datatable içerisinde de dropdown menüler kullanıyorsanız problemler yaşayabilirsiniz.
Problem; mobil olarak web sayfanızı açtığınızda dropdown menülerin açık ve kapatılamaz olmasıdır.
Aşağıdaki kod satıları ile bu problemin üstesinden geldik fakat mantık hatasından dolayı çift tıklayıp ( iki kere ekrana bastıktan sonra ) etkileşime geçmektedir. Düzeltip kullanabilirsiniz .

<script type="text/javascript">
$( document ).ready( function()
{
if ( $(window).width() <= 768 )
{
var open_drop_menu = '<style id="wi_style_id">@media (max-width: 768px) { .dropdown-menu,.table.dataTable>tbody>tr.child ul.dropdown-menu{display: none !important;} }</style>';

$( 'head' ).append( open_drop_menu );

setTimeout( function()
{
$( document ).delegate( '.dropdown-toggle', 'click', function()
{
if( $( 'style#wi_style_id' ).length > 0 )
$( 'style#wi_style_id' ).remove();
else
$( 'head' ).append( open_drop_menu );
} );

}, 2557 );
}
});
</script>