Karakter Sayma, Keyup Fonksiyonu

İletişim formlarında falan görmüşüzdür illaki mesaj kısmında Mesaj metni:5 karakter şeklinde.
Şimdi bizde aynı şekilde jQuery ile textarea içine girdiğimiz karakter sayısını gösterecek bir uygulama yapalım.

Öncelikle Html Kodlarımızı Yazalım

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title></title>  
      <meta charset="utf-8">  
      <meta name="description" content="" />  
      <meta name="keyword" content="" />  
      <meta name="author" content="Vehbi Akdogan" />
 </head>  
 <body>  
 <p>Karakter Sayısı: <span id="karakter">0</span></p>  
 <textarea></textarea>  
 </body>  
 </html>

Evet Şimdi Jquery kodlarımızı yazmaya başlayalım.

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title></title>  
      <meta charset="utf-8">  
      <meta name="description" content="" />  
      <meta name="keyword" content="" />  
      <meta name="author" content="Vehbi Akdogan" />  
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
      <script type="text/javascript">  
           $(function(){  
                $("textarea").keyup(function(){  
                     var karakterSayisi = $(this).val().length; // textarea içine girilen karakter sayısı  
                     $("#karakter").html(karakterSayisi); // uzunluğu spanımızın içine attık  
                });  
           });  
      </script>  
 </head>  
 <body>  
 <p>Karakter Sayısı: <span id="karakter">0</span></p>  
 <textarea></textarea>  
 </body>  
 </html>

İşlemleri Yaptığımızda karakter sayımızın sayıldığınız göreceğiz.

Html-Html5 Javascript-jQuery

Temmuz 25, 2014 Vehbi Akdoğan

HTML5 ve jQuery ile sürükle bırak yaparak silme işlemi

Html5 ile sürükle bırak işlemi

İyi günler arkadaşlar internet kullanımının mobilde kullanımının gittikçe arttığı günümüzde mobilde daha kullanışlı siteler yapmamızı sağlayan bir html5 özelliğini sizlere anlatmak istiyorum.

Html 5 ile gelen sürükle bırak işlemimiz için aşağıdaki kodları bilmemizde fayda var

draggable: Kodumuz nesnenin sürüklenebilme özelliğini belirler. resimlerde default olarak true yani sürüklenebilir olarak belirlenmiştir. kullanımı draggable=”true” yani sürüklenebilir veya draggable=”false” sürüklenemez şeklindedir.
ondragover: Resmin Sürükleneceği alandır kullanımı ondragover=”return false;”
ondragenter: Yine resmin Sürükleneceği alandır kullanımı ondragenter=”return false;”
ondrop: Bu fonksiyonumuzda Resim Sürüklendikten sonra yapılacak işlemdir.

Evet Açıklamalarımızıda yaptığımıza göre Artık kodlara geçebiliriz

Kodlarımız

 <!doctype html>  
 <html>  
 <head>  
 <meta charset="utf-8" />  
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
 <script type="text/javascript">  
 $(function(){  
      $("#resim").hover( // resme tıklandığında body ile ilgili birkaç tasarım yaptık   
      function(){  
           $("body").css({  
                "border":"4px dashed #ddd",  
                "border-radius":"5px"  
           });  
           $("#cop").css({"border":"3px solid red"});  
      },  
      function(){  
                $("body,#cop").css({"border":"none"});  
      });  
 });  
 // asıl işlem gören fonksiyonumuz burdadır.  
 function resimSil() {  
      $("#resim").hide(); // resmi gizledik   
      $(".metin").html("Resim Başarıyla silindi"); // metnimizi değiştirdik   
 }  
 </script>  
 </head>  
 <body>  
 <div style="width:700px;margin:0 auto;">  
      <img src="images/ben.png" width="300" id="resim" style="float:left;cursor:move;" /><br>  
      <img style="float:right" id="cop" src="images/cop.png" draggable="false" ondragover="return false" ondragenter="return false" ondrop="resimSil()" />  
      <p class="metin" style="clear: both;"> Resmi Silmek için Çöp Kutusuna sürükleyiniz </p>  
 </div>       
 </body>  
 </html>

Çalışma kodlarını Buradan İndirebilirsiniz.

Html-Html5 Javascript-jQuery

Nisan 23, 2014 Vehbi Akdoğan

jQuery de inputtan alınan değer ile işlem yapma sorunu ve çözümü

jQuery ile uğraşıyorsak eğer hepimiz görmüşüzdürki inputtan aldığımız veriler ile işlem yaparken terslik olabiliyor. örneğin inputtan aldığımız iki sayıyı toplamak istediğimizde 5+5=10 olması gerekirken 5+5=55 şekline toplama operatörünü ters bir şekilde kullanıp birinci değeri ikinci değerin yanına kaynak yapıyor.
Bunun nedeni nedir diye sorarsanız herhangi bir veri tipi belirtmediğimiz için inputtan aldığımız verileri jQuery kütüphanesi string olarak kabul ediyor bizde strniglerle işlem yaptığımız için toplama işlemindede doğalen yanyana eklemesi gerekiyor.
şimdi sorunumuzun çözümüne gelelim çözümümüz şöyleki inputtan aldığımız verinin veri tipini değiştireceğiz artık kodlarımıza geçebiliriz
öncelikle veri tipini değiştirmek için jQuery in parseInt() fonksiyonunu kullanacağız.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 <html>  
 <head>  
 <title>Vehbi AKDOĞAN - jQuery parseInt</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
 <script type="text/javascript">  
           function hesapla(){  
                var s1 = $("#sayi1").val();  
                var s2 = $("#sayi2").val();  
                var hatali_toplam = s1+s2;  
                var gercek_toplam = parseInt(s1)+parseInt(s2);  
                $(".aaa").html("Hatalı toplam: "+hatali_toplam+"<br> Gerçek Toplam: "+gercek_toplam);  
           }  
 </script>  
 <style type="text/css">  
      body{  
           width:700px;  
           margin:0 auto;  
           background:#e2e2e2;  
           color:#583afe;  
      }  
 </style>  
 </head>  
 <body>  
 sayi1: <input type="text" name="sayi1" id="sayi1" /><br>  
 sayi2: <input type="text" name="sai2" id="sayi2" />  
  </br>  
  <button id="button" onClick="hesapla();"> Hesapla </button>  
      <div class="aaa" style="border:1px dashed #eee;"></div>  
 </table>  
 </body>  
 </html>

Hem hatlı toplama işlemi hemde normal bir toplama işlemini gösterdim. aldığınız değerler integer değillerse parseInt yerine parseFloat ta kullanabilirsiniz.

Javascript-jQuery

Mart 1, 2014 Vehbi Akdoğan

Javascript ile sayfa genişliğini ve yüksekliğini alma

javascript ile ekran enişliğini ve yüksekliğini almayı göstereceğim. kodlarımız çok basit ama bilmeyenler vardır diye paylaşmak istedim

kodlarımız :

 <script type="text/javascript">  
           $(function(){  
                     var ekranGenisligi = screen.width;  
                 var ekranYuksekligi = screen.height;  
                 document.write('Ekran Genişliği:'+ekranGenisligi+' Ekran Yüksekliği:'+ekranYuksekligi);  
           });

kodlarımızı standart html sayfamızda <head> …. </head> tagları arasına yazdığımızda ekranda tarayıcınızın ekran genişliği ve yüksekliği yazacaktır.

Javascript-jQuery

Şubat 17, 2014 Vehbi Akdoğan

Ajax ile anlık veri gönderme

jQuery ile ajax post işlemi yapmayı göstereceğim arkadaşlar jQuery ajax ile anlık veri gönderip alabilirsiniz.
Öncelikle kodları verip ardından açıklamak istiyorum arkadaşlar

Önce jQuery Kütüphanesini Sayfamıza Dahil edelim <

 <!DOCTYPE html>  
 <html lang="tr-TR">  
 <head>  
 <meta charset="UTF-8" />  
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>  
 </head>  
 <body>  
 </body>  
 </html>

Ardından bir form oluşturalım Ve jQuery kodlarınmızı yazıp açıklayalım

 <!DOCTYPE html>  
 <html lang="tr-TR">  
 <head>  
 <meta charset="UTF-8" />  
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>  
 <script type="text/javascript">  
 function posted(){  
 $.ajax({  
 type:'POST',  
 url:'ajax.php',  
 data:$('#vehbiakdogan').serialize(),  
 success:function(sonuc){  
   $(".yazdir").html(sonuc);  
 }  
 })  
 }  
 </script>  
 </head>  
 <body>  
 <form id="vehbiakdogan" method="post">  
 <div class="yazdir"></div>  
 <input type="text" name="isim" />   
 <input type="submit" onclick="posted(); return false;" name="gonder" />  
 </body>  
 </html>

Şimdi Kodlarımızı açıklayalım

Öncelikle $.ajax() şeklinde bir fonksiyon oluşturduk ve parametre olarakta verilerimizi göndrme şeklimizi falan girdik şimdi parametrelerimizi açıklayalım.

type : type parmatremiz verielri gönderme tipimizi tanımlar örn: post,get

url : url parametremiz verilerimizi göndereceğimiz sayfamızdır.

data : data parametremizde göndereceğimiz verilerimizi gösteriyor serialize() fonksiyonu ise bizim formdaki tüm name i dolu olan formları almamızı sağlıyor.

success : success parametremiz ise ajax işlemimiz başarılı ise ne yapacağını gösterir biz eğer başarılıysa id si yazı olan divimize ajax.php den gelen yanıtı yazdırdık

ajax.php sayfamız

 <?php  
 if(isset($_POST)){  
 echo $_POST['ad'];  
 }

Eğer ajax işlemimiz başarılıysa classı yazdir olan divimize textboxa yazdığımız veri yazacaktır.

Javascript-jQuery PHP

Şubat 13, 2014 Vehbi Akdoğan