10,120 yorum yapıldı
RSS Aboneliği
Friendfeed
Youtube
E-posta
Düğünde tekno dans

javascript

CSS ve jQuery ile dropdown select

Yazar: | 15 Mart 2012 Perşembe 22:53
Kategori: CSS, Jquery & Ajax, Web Tasarım
16 Yorum


Standart HTML select öğesine alternatif, daha şekilli, daha hoş bir dropdowndur kendileri. Ben yaptım, çok iyi oldu çok da güzel oldu tamam mı.

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function(){  
 
// dropdown menu
$(".ddown").live("click", function() {
  if($("#ddown").is(":hidden")) {
    $("#ddown").slideDown('fast');
    $(".ddown").addClass("ddownact");
  }
  else {
    $("#ddown").slideUp('fast');
    $(".ddown").removeClass("ddownact");
   }
});  

$("#ddown a").live("click", function() {
  var deger = $(this).attr("data-id");
  var fiyat = $(this).find("strong").html();
 
  $(".ddown").html("<strong>"+fiyat+"</strong>");
  $("#deger").val(deger);  
 
  $("#ddown").slideUp('fast');    
  $(".ddown").removeClass("ddownact");  

});  

}); //doc ready end
kod

Yazinin devamini okuyun »

Arama Terimleri: 399 piksel genişliğinde şaşırtıcı fotoğraflar (9), jquery multiple select option çoklu seçim (6), google arama scripti (6), müzik scripti (5), jquery dropdown menu (4), site solunda açılan java (4), html select tag css (4), html select css (4), asp jquery kayan script (4), kutuphane scripti (3)

jQuery ile inputa girilen değerleri eş zamanlı temizlemek

Yazar: | 24 Şubat 2012 Cuma 23:50
Kategori: Jquery & Ajax, Web Tasarım
5 Yorum


Senaryomuz şöyle: Sadece harf ve rakam girişine izin vermek istediğimiz bir inputumuz var, Türkçe karakter, boşluk, büyük harf ve sembol girilmesini istemiyoruz. Bu ve benzeri olaylar için üretilen onlarca plug-in olmasına rağmen sayfamıza ekstra yük bindirip şişirmek istemiyor, bu işi sadece birkaç satırlık kodla halletmek istiyoruz.

İşte sayfamızın </head> tagından önce eklememiz gereken ilaç gibi kodlarımız:

1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){    
 $("#pislik").live("keyup", function() {
  var ohmis = $(this).val().replace(/[^a-z0-9]/gi,"").toLowerCase();  
  $(this).val(ohmis);
 });    
});
</script>
kod

Bu da işlem yaptırmak istediğimiz, pislik id’sine sahip olan inputumuz (<body> tagından sonra, herhangi bir formun içerisine ekliyoruz):

1
<input type="text" id="pislik" />
kod

Yazinin devamini okuyun »

Arama Terimleri: vektörel step (5), müzik ile ilgili en az 399 piksel genişliğinde bir görüntü (5), jquery regex (4), afiş yapma sitesi (4), 4 sınıf değişik oyuncak tasarımı (4), 1 büyük karakter içeren şifreler (4), photoshop clear background plugins (3), vektörel baykuş (3), dünyanın en ilginc tasarımları (3), pis su vector (3)

Jquery ile background animate (kayan arkaplan efekti)

Yazar: | 12 Kasım 2011 Cumartesi 4:47
Kategori: CSS, Jquery & Ajax, Web Tasarım
8 Yorum


Uzun süredir sitede web tasarım ile ilgili içerikler yayınlamıyordum. Bunun temel sebebi zamanımın çoğunu zaten bu tür şeylerin alıyor olması, yani burda biraz daha farklı şeylerden bahsetmek, kendime zaman ayırmak istiyordum. Öte yandan bu siteyi açarken aklımdan geçenlerden biri de severek kullandığım / ürettiğim tasarım içeriklerini depolamak, lazım oldukça alıp kullanmaktı. Şimdi bu olaya devam etmeye karar verdim, farkettim ki Google’da ne zaman ihtiyaç duyduğım bir içeriği arasam karşıma yine kendi sitem çıkıyor.

Scriptimize gelecek olursak: Tasarım elemanlarınızın arkaplan pozisyonlarını animasyon efektleriyle değiştirebileceğiniz, içerisine bir tutam hayal gücü katarak ziyaretçilerinize şaşırtıcı deneyimler yaşatabileceğiniz kullanımı oldukça kolay bir jquery plugini.

Kullanım

Jquery kütüphanesini ve plugini (paketin içerisinde mevcut) </head> tagından önce çağırın

1
2
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
kod

Tasarım elemanlarızın üzerine gelindiğinde arkaplan pozisyonlarının değişmesi için .hover() eventini kullanabilirsiniz. Bunun için yine </head> tagından önce aşağıdaki kodları yerleştirin (veya scripts.js gibi bir isimle kaydedip yukarıdaki biçimde çağırın)

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(document).ready(function(){  
$(".bgme").hover(
   function () {
    $(this).animate({backgroundPosition: '-100px 0'}); // Arkaplan pozisyonunu değiştir
   },function(){
    $(this).animate({backgroundPosition: '0 0'}); // Önceki pozisyona dön
 });
}); //doc ready end
</script>
kod

Buna göre .bgme class’ı atadığınız elemanların üzerlerine mouse ile gelindiğinde arkaplan pozisyonları belirttiğiniz değerlere göre (-100px 0) animasyonlu olarak değişecek. Yazinin devamini okuyun »

Arama Terimleri: jquery background slider (164), jquery (97), background slider (49), jquery background (34), jquery script (34), background slider jquery (30), jquery slider (24), jquery background image (24), jquery background position (19), jquery arkaplan (16)

Jquery ile formdaki tüm chexboxları seçmek (check all / uncheck all)

Yazar: | 28 Mart 2011 Pazartesi 15:54
Kategori: Jquery & Ajax, Web Tasarım
5 Yorum


Eğer formunuzda milyonlarca checkbox inputu varsa ve hepsini tek tek seçili hale getirmek cehennem azabı gibi gelebilir. Bu işi salt javascript ile halledebileceğiniz gibi eğer sayfanızda zaten jquery kütüphanesi yükleniyorsa ufacık bir fonksiyon ile de kolaylıkla üstesinden gelebilirsiniz.

Jquery fonksiyonu

1
2
3
4
5
6
7
8
<script type="text/javascript">
  // Tüm checkboxları seç    
  function tumunuSec(status) {
    $("#kutucuklar input").each( function() {
      $(this).attr("checked",status);
     });
    }
</script>
kod

Öncelikle sayfanın tepesine (veya harici .js dosyanıza) tüm işi halledecek olan fonksiyonu tanımlayın.

“kutucuklar” id’sine sahip kapsayıcı div

1
2
3
4
5
<div id="kutucuklar">
<input name="kutu1" value="1" type="checkbox">Kutu 1
<input name="kutu2" value="1" type="checkbox">Kutu 2
<input name="kutu3" value="1" type="checkbox">Kutu 3
</div>
kod

Tüm checkbox elemanlarınızı “kutucuklar” id’sine sahip kapsayıcı bir divin içerisine yerleştirin. Dilerseniz bu div’i tüm formunuzu kapsayacak şekilde ayarlayabilir veya direkt formunuza bu id’yi tanımlayabilirsiniz.

Seçme / seçim kaldırma işlemini yapacak olan eleman

1
<input type="checkbox" onclick="tumunuSec(this.checked)">Tümünü Seç / Seçimi Kaldır
kod

Son elemanı da yerleştirdikten sorna işiniz tamam, bu eleman sayesinde artık formunuzda yer alan tüm checkbox’ları seçili hale getirebilir veya tümünün seçimini aynı anda kaldırabilirsiniz.

Arama Terimleri: mısır piramitlerinin içinin videosu (4), çok güzel duvar yazıları (3), jquery kategori check (3), jquery checkbox seçme (3), tümünü seç egonomik (2), jquery check all (2), tüm checkbox ları seçmek (2), jquery checkbox select (2), jquery checked kaldırma (1), jquery select all checkbox (1)

Google Code Search ile aradığınız koda ulaşın

Yazar: | 20 Mayıs 2010 Perşembe 10:10
Kategori: İnternet, Makaleler, Site Tanıtım, Web Tasarım
5 Yorum

Bu konu güncelliğini yitirmiştir. İçerdiği bilgi ve adresler geçersizdir.

Google Code Search, internet alemini ofisinin arka bahçesi olarak gören Google’ın pek bilinmeyen hizmetlerinden bir tanesi. Aslında Google laboratuarlarının su yüzüne çıkmamış o kadar çok hizmeti var ki, eğer “kullanıcı dostu olma” ilkelerine böyle hasta bir mantıkla bağlı olmasalardı, Options sayfası yerine şöyle adam akıllı bir “Hizmetlerimiz” sayfası yaparlardı ve insanlar böyle arkaplanda kalmış servisleri elalemden duymak zorunda kalmazdı.

Neyse Google’ı kendi hizmetlerini tanıtma konusundaki takıntılı politikası ile başbaşa bırakarak konumuza dönelim ve biraz Code Search‘den bahsedelim.

Mantık aslında oldukça basit, olay yine bildiğimiz Google’ın her zaman yaptığı arama eyleminden ibaret. Google, internet üzerinde insanların kendi sitelerinde kullandıkları betikleri yine kendi geliştirdiği bir teknoloji ile analiz ediyor, hangi dilde yazıldıklarını ve hangi lisansa tabi olduklarını öğrenip programcıya sunuyor. Örneklendirecek olursak; javascript ile yazılmış bir show/hide özelliği arıyorsunuz, Code Search’de size X kişi ile Y kişinin javascript ile bu işi kendi sitelerinde nasıl hallettiklerini gösteren bir sonuç çıkarıyor. Netice olarak dönen kodlardan en hoşunuza gideni kopyalayıp ilgili lisansın gereklerini yerine getirerek kullanıyorsunuz. Yazinin devamini okuyun »

Arama Terimleri: google code nedir (19), search nedir (7), google search nedir (5), facebook kapak fotoğrafları 399 piksel büyüklüğünde (5), googlecode nedir (3), iki bin dört yüz elli karakalem (3), aptal manyaklar (2), google code ne işe yarar (2), 399 piksel genişliğinde fotoğraflar anti fener (2), search nedemek (2)

PHP: Türkçe » UTF çevirici script (ASCII to UTF Converter)

Yazar: | 25 Nisan 2010 Pazar 12:48
Kategori: PHP, Web Tasarım, Wordpress
7 Yorum


Türkçe karakterleri UTF formatına çevirmek; özellikle WordPress temalarında (eğer charset varsayılan olarak utf8 kullanılıyorsa) Türkçe karakter kullanılamaması neticesinde oluşan bir ihtiyaç. Bu problemin üstesinden gelmek üzere daha önce ufak bir programcıktan bahsetmiştim.

Aslında konuyu sadece WordPress ile sınırlandırmak doğru değil, karakter dönüştürme ihtiyacı tasarım olayının hemen her kademesinde karşınıza çıkabiliyor bu açıdan elinizin altında böyle bir online bir araç bulunması işinizi kolaylaştırabilir.

Scriptimizin esasında bir kaç satırlık bir fonksiyona dayanıyor:

1
2
3
4
5
6
7
function tr_to_utf($text) {  
    $text = trim($text);    
    $search = array('Ü','Ş','Ğ','Ç','İ','Ö','ü','ş','ğ','ç','ı','ö');  
    $replace = array('Ãœ','Ş','&#286;ž','Ç','Ä°','Ö','ü','ÅŸ','ÄŸ','ç','ı','ö');
    $new_text = str_replace($search,$replace,$text);    
    return $new_text;  
}
kod

bu fonksiyon girilen metindeki Türkçe karakterleri utf karşılıklarıyla eşleştirip değiştiriyor, geri kalan kodlar standart tasarım elemanlarından ibaret, bu açıdan fonksiyonu kendi projelerinize kolaylıkla adapte edebilirsiniz. Yazinin devamini okuyun »

Arama Terimleri: türkçe karakter çevirici (27), php türkçe karakter replace (25), türkçe karakter ascii çevirici (10), php ascii to utf-8 (9), karakter çevirici (6), php karakter çevirme (5), türkçe karakter cevirme (4), utf-8 türkçe karakter çevirici (4), ascii converter (4), utf-8 converter (4)

Egonomik’in sosyal paylaşım özelliği

Yazar: | 10 Nisan 2010 Cumartesi 15:09
Kategori: Jquery & Ajax, PHP, Web Tasarım, Wordpress
23 Yorum


Egonomik’im şu soldaki açılır-kapanır sosyal paylaşım özelliği oldukça beğenilmiş olacak ki son zamanlarda hakkında çok fazla mesaj almaya başladım. Herkese teker teker cevap vermektense buraya ekleyeyim de dileyenler faydalansın dedim.

Özellik genelde kapsamlı bir WordPress eklentisi zannediliyor ancak kendi hazırladığım bir kaç satır koddan başka bir şey değil.

Kullanmak için öncelikle temanızın header.php dosyasının içindeki </head> satırından önce ufak bir javascript kodu eklemeniz gerekiyor. Bu kod simgelerin bağlı bulunduğu taşıyıcının görünüp gizlenmesini sağlıyor (show/hide), ayrıca kodu ekledikten sonra sitenizdeki başka elemanlara da görünüp gizlenme özelliği kazandırabilirsiniz:

1
2
3
4
5
6
7
8
<script type="text/javascript">
function showMe(blockId) {
     if ( document.getElementById(blockId).style.display == 'none' ) {
          document.getElementById(blockId).style.display = ''; }
else if ( document.getElementById(blockId).style.display == '' ) {
          document.getElementById(blockId).style.display = 'none'; }
}
</script>
kod

Özelliği kullanmak istediğiniz sayfalara (index.php, archive.php, single.php) eklemeniz gereken kodlar aşağıdaki gibi, <div class="entry"> veya duruma göre <div class="content"> satırlarının altına eklenecekler (tam yerini kendi temanızın özelliklerine göre ayarlamalısınız):

Yazinin devamini okuyun »

Arama Terimleri: share script (11), social share script (9), script paylaş (3), php kişisel site scripti (3), özgün scriptler (3), script share (2), 399 piksel genişliğinde arzum yazısı fotoları (2), php göster gizle (2), php gizle göster (2), geometrik şekiller karakalem (2)

Javascript ile Sahibinden.com benzeri resim galerisi

Yazar: | 25 Mart 2010 Perşembe 18:05
Kategori: Jquery & Ajax, Web Tasarım
11 Yorum


Sahibinden.com gibi otomobil, emlak satışı yapılan sitelerde ürünün farklı resimlerini görüntülemek üzere sıkça kullanılan (örnek) ve tasarımcılar tarafından şiddetle aranılan scriptlerden biri. Aslında benim tasarladığım bu örnek tam olarak mevzubahis sitelerdeki gibi çalışmıyor, ben olayı biraz daha basit tekniklerle halletmeye çalıştım.

Script, iki farklı metod ile küçük resimlere tıklandığında büyük resmin değişmesini sağlıyor; birincisi büyük resmin javascript ile direkt olarak değiştirilmesi, ikincisi ise büyük resmi taşıyan div’in içerisine innerHTML vesilesiyle html import edilmesi. Her iki metodun da kendine göre avantaj ve dezavantajları var, mesela büyük resim yüklenirken resmi taşıyan div’e arkaplan olarak atanan loading ikonunun görüntülenmesi için innerHTML kullanmak daha mantıklı.

Dışarıdan herhangi bir kütüphane/dosya import edilmesine gerek bırakmayan, tüm işi gören javascript kodlarımız şu şekilde:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function myResim(aydi){
    // Yöntem 1: Resmi değiştirme
    // document.myresim.src =  ""+ aydi +"";
   
    // Yöntem 2: Taşıyıcı div'e html import etme
    document.getElementById("resimdiv").innerHTML = "<img name=\"myresim\" src=\""+ aydi +"\" />";
}
</script>
kod

Bu fonksiyona göre;
yöntem 1′de küçük resim linkimiz <a href="javascript:;" onclick="myResim(‘resim-1.jpg’);">resim 1</a> şeklinde olacak ve bu linke tıklandığında myresim id’li büyük resim resim-1.jpg olarak değişecek.

yöntem 2′de resim linkimiz yine <a href="javascript:;" onclick="myResim(‘resim-1.jpg’);">resim 1</a> şeklinde olacak ve bu linke tıklandığında resimdiv id’li taşıyıcı içinde resim-1.jpg dosyası görüntülenecek. Yazinin devamini okuyun »

Arama Terimleri: javascript resim galerisi (167), java resim galerisi (77), resim scripti (76), resim galerisi javascript (22), sahibinden script (13), javascript fotoğraf galerisi (12), sahibinden com tarzı script (9), sahibinden tarzı script (6), sahibinden com benzeri script (6), sahibinden com (6)

Mootools ile hareketli sidebar scripti

Yazar: | 9 Mart 2010 Salı 22:40
Kategori: Jquery & Ajax, Web Tasarım
10 Yorum


Sitenin sağ veya isteğe göre sol tarafında sabit durup üzerine tıklandığında açılan, Mootools ile hazırlanmış kullanışlı ve bir o kadar basit bir sidebar uygulaması. Diler linklerinizi, dilerseniz sosyal network bağlantılarınızı site alanından tasarruf ederek bu sidebar içerisinde görüntüleyebilirsiniz. Hatta çeşitli reklam uygulamaları için bile kullanılabilir. Yazinin devamini okuyun »

Arama Terimleri: sabit menü (12), 399 piksel genişliğinde bahce fotoğrafları (6), jquery sabit menü (6), css sabit menü (5), javascript ile sabit menü (4), kayan resim yapma (4), hareketli javascript menü kodları (3), flash kayan görüntülü menü yapmak (3), ışık efekt (3), rap efektleri (2)

Jquery – Uniform ile göz alıcı form öğeleri

Yazar: | 21 Şubat 2010 Pazar 15:51
Kategori: Jquery & Ajax, Web Tasarım
2 Yorum


Yapımcılarının ifadesiyle “Jquery ile seksi formlar“. Tasarımlarınızda alışılmışın dışında form öğeleri kullanımak istiyorsanız Uniform tam size göre bir jquery uygulaması. Script sayesinde form elemanlarınızı (select- drop down, checkbox, radio ve dosya yükleme) daha “seksi” kılabilmeniz mümkün. Hatta yapımcılar “form elemanları için tema desteği” gibi bir olaya bile girişmişler. Yazinin devamini okuyun »

Arama Terimleri: jquery uniform (24), jquery form (6), uniform jquery (4), murat boz şarkıları (3), komik business karikatürleri (2), php inşaat scripti (2), flash resım yukleme scripti (2), drop downs theme (2), dosya yükleme formu tasarımı (2), adım adım kayıt formu jquery (1)
12345