jQuery arşivleri - vehbiakdogan

Hatalı Resimler İçin Resmin Boyutuna Göre No-Image Resmi Yapmak

Merhaba arkadaşlar bugün düzenlemem için başkasının yapmış olduğu bir siteyi getirdiler sitede farklı boyutlarda birçok resim hatalıydı açılmıyordu müşteri açılmayan resimlerden şikayetçi olduğu için resimlerin kendi boyutlarında no-image tarzında bir resim ekletmem gerekiyordu resimlerin genelinin boyu farklı olduğu için biraz farklı bir yol izledim.

Öncelikle https://placeholdit.imgix.net Sitesinden yararlandım bu sitede bizim isteğimize göre resim oluşturuyor.

Resim Oluşturmak için tabi linke bazı parametreler vermemiz gerekiyor:
1.parametre txt Resimde ne yazısı olmasını istiyorsak onu yazıyoruz.
2.parametre: txtsize Yazı Boyutunu Ayarlıyor.
3. parametre w Resmin Genişliği
4. parametre h Resmin yüksekliği ve bize resim oluşturmuş oluyor.

Örnek Resim

Şimdi Sıra Geldi Sorunu Çözmeye:

$("img").error(function(){
		var genislik = $(this).width(),
			yukseklik = $(this).height();
		$(this).attr("src","https://placeholdit.imgix.net/~text?txtsize=23&txt=No-Image&w="+genislik+"&h="+yukseklik);
	});

Önce resim boyutlarını aldım daha sonra resmin yerine aynı boyutlarda no-image şeklinde yeni resim ekledim ve sorun çözülmüş oldu 🙂

Sağlıcakla kalın..

Javascript-jQuery Sorun Ve Çözümler

Ocak 8, 2016 Vehbi Akdoğan

akdoganTab jQuery Tab Eklentisi

Merhaba arkadaşlar kendim hazırlamış olduğum basit ve kullanımı oldukça kolay olan tab eklentisini sizlerle paylaşmak istiyorum.

Eklentiyi Github üzerinden İnceleyebilirsiniz.
Öncelikle eklentinin kullanımına bir bakalım.

KULLANIMI

Öncelikle jQuery Kütüphanesini Ve Eklenti Kütüphanesini ekleyelim.

 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="akdoganTab.jquery.js"></script>

Daha Sonra Eklentimizi Çalıştıralım.

 

<script type="text/javascript">
		$(function(){
			$("ul.tab").akdoganTab({
				aktifIndis: 0, // default değer 0
				tabDivAktif: "aktif", // default değer aktif 
				tabIcerik :$(".icerik"), // default değer $(".icerik")
				tabEffect: "fade" // default değer null 
			});
			
		});
	</script>

Html Yapısı:

<ul class="tab">
	<li>Tab1</li>
	<li>Tab2</li>
	<li>Tab3</li>
</ul>
<div class="icerik">Tab1 içeriği</div>
<div class="icerik">Tab2 içeriği</div>
<div class="icerik">Tab3 içeriği</div>

Parametreler

aktifIndis : Tab Eklentisinin açılışta hangi Tab içeriğinin görünür olacağını belirler.
Default Değeri 0 dır. Yani 1. Tab Görünür Olacaktır.
tabDivAktif : Aktif Olan Tab ın classıdır. default değeri “aktif” dir.
tabIcerik : Tab İçeriklerine Ait Nesneyi Gösterir. Default Değeri ” $(“.icerik”)” tir.
tabEffect : Tab Geçişi Arasındaki Effekti Gösterir. Default değeri null dur. yani effekt yoktur.
Alabileceği Değerler:
- slide: slideDown effecti ile değişir.
- fade: fadeIn effecti ile değişir.
- slow: slow effecti ile değişir.
- ease: easeIn effecti ile değişir.
- null: effect olmadan değişir.

Demo | Download

Javascript-jQuery

Aralık 31, 2014 Vehbi Akdoğan

jQuery GeriSayım Sayacı Eklentisi CountDown

zamanlı işlemler yaptıran ve ne kadar zaman kaldığını kulanıcıya göstermek isteyenler için basit ve kullanışlı bir geri sayım sayacı hazırladım.
Tabi durduk yere hazırlamadım bana lazım oldu yaptım yapmışken sizlerle de paylaşayım dedim.

Öncelikle Eklentimizi Github üzerinden İndiriyoruz.

akdoganSayac Kullanımı

Eklentimizin 3 parametresi var

Gün: Default Değeri 10
Saat: Default Değeri 24
Dakika: Default Değeri 60
Saniye: Default Değeri 60

Öncelikle jQuery Kütüphanesini Ve Eklenti Dosyamızı Çağırıyoruz.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="akdoganSayac.js"></script>

Daha Sonra Eklentimizi Çalıştırıyoruz.

<script type="text/javascript">
        $(function(){
           	$("#akdoganSayac").akdoganSayac({
		'gun' : 10, 
		'saat' : 3, 
		'dakika' : 2,
		'saniye' : 20
	});
    });
    </script>

Şeklinde Kullanabilirsiniz.

Tasarım Değiştirmek için Css İle Müdahale edebilirsiniz.

Örnek:

       span.gun {
	color:#aaa;
}
span.saat {
	color:#ccc;
}
span.dakika {
	color:#ddd;
}
span.saniye {
	color:#eee;
}
span.min {
	font-size: 20px;
}

Eklentimizi Kullanmka Bu kadar kolay 🙂

Çalışan canlı örneğimiz için Tıklayın

Html-Html5 Javascript-jQuery

Aralık 10, 2014 Vehbi Akdoğan

jQuery imza Eklentisi

Merhaba arkadaşlar kurumsal şirketlerde çalışanlar bilir genelde şirkette yapılan tüm sitelerde sitenin altına yapan şirketin logosu eklenir.

Çalıştığım ajansta bizde yaptığımız her sitenin altına logomuzu ekliyoruz ve her site için aynı kodları yazmak bir zamandan sonra sıkıcı geliyor bende bu yüzden jQuery imza eklentisi adında bir eklenti yazdım.

jQuery imza eklentisi

Öncelikle Eklentimizi Buradan İndiriyoruz.

Daha sonra html sayfamızda jQuery kütüphanesini ve Yazmış olduğum imza.js Dosyasını çağırıyoruz.

Ve eklentimizi çalıştırıyoruz.

 

<!DOCTYPE html>
<html>
<head>
	<title>Vehbi Akdoğan imza.js </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 src="imza.js"></script>
	<script type="text/javascript">
	$(function(){
		$('body').imza({
			metin: 'Design And Code By', // üzerine geldiğinde görünecek metin. varsayılan olarak design And Code By
			url : 'http://vehbiakdogan.com', // Tıklandığında yönlendirilecek adres. varsayılan olarak boş
			logoYol: 'logo.png', // şirket logosunun yolu. varsayılan olarak style/images/logo.png 
			color : '#000' // girilen metnin rengi. varsayılan olarak #000
		});
	});
	</script>
	
	
</head>
<body>

</body>
</html>

Gerekli Açıklamaları Kod İçerisinde Yazdım.

Demo

Eklentim ücretsizdir isteyen herkes github üzerinden indirebilir

Html-Html5 Javascript-jQuery

Kasım 21, 2014 Vehbi Akdoğan