.html – WPAdamı https://wpadami.com WordPress Uzmanı Thu, 07 May 2020 12:41:26 +0000 tr hourly 1 https://wpadami.com/wp-content/uploads/2015/09/wordpress_logo_-100x100.png .html – WPAdamı https://wpadami.com 32 32 jQuery karakter sayacı https://wpadami.com/kodlama/jquery-kodlama/jquery-karakter-sayaci.html Fri, 14 Mar 2014 10:28:47 +0000 http://wpadami.com/?p=3553 jQuery kullanarak Twitter ve diğer çoğu site gibi metin kutularına bir sayaç ekleyebilirsiniz. Yorum alanları, form alanları gibi alanlarda bu basit kodu kullanabilirsiniz. Maksimum girilebilecek karakter sayısını kodun içindeki ilgili yerde değiştirin ve diğer bütün ayarlamaları kendisi yapsın :) jQuery ile karakter sayacı arayanlar için birebir olduğunu düşündüğüm kodu aşağıda sizinle paylaşıyorum. İstediğiniz yerde kullanabilirsiniz.

Kodun jQuery kütüphanesi gerektirdiğini hatırlatmama gerek olmadığı düşüncesindeyim. Ve düzgün şekilde çalışması için document.ready() fonksiyonu içerisinde kullanılmalı. Öncelikle kodu inceleyelim. Sonrasında size örnek bir kodlama ve örnek bir sayfa aktaracağım.

Kod

var makskarakter = 1500;    //Kişinin girebileceği maksimum karakter limiti        
var count = $('#karaktergirdi').val().length;
var char = makskarakter - count;
$('#kalankarakter').text(char + " karakter kaldı");
 
$('#karaktergirdi').keyup(function () {
   var len = $(this).val().length;
   if (len >= makskarakter) {
     $('#kalankarakter').text("Maksimum girilebilecek karakter sayısına eriştiniz!");
   } else {
     var chardiff = makskarakter - len;
     $('#kalankarakter').text(chardiff + " karakter kaldı");
   }
});

Bu alanda şunu açıklamama izin verin;

#kalankarakter : Kalan karakter sayısını gösterecek span veya div elementinin idsi
#karaktergirdi : Karakterin sayılacağı metin kutusu girdisi

Örnek Kodlama

<!DOCTYPE HTML>
<html lang="tr">
   <head>
      <meta charset="utf-8">
      <title>jQuery Karakter Sayacı (Örnek) - WpAdamı</title>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script>
          $( document ).ready(function() {
              var makskarakter = 1500;    //Kişinin girebileceği maksimum karakter limiti        
              var count = $('#karaktergirdi').val().length;
              var char = makskarakter - count;
              $('#kalankarakter').text(char + " karakter kaldı");
               
              $('#karaktergirdi').keyup(function () {
                 var len = $(this).val().length;
                 if (len >= makskarakter) {
                   $('#kalankarakter').text("Maksimum girilebilecek karakter sayısına eriştiniz!");
                 } else {
                   var chardiff = makskarakter - len;
                   $('#kalankarakter').text(chardiff + " karakter kaldı");
                 }
              });
        });
      </script>
    </head>
    <body>
    <textarea id="karaktergirdi" cols="80" rows="10"></textarea><br />
    <span id="kalankarakter"></span>
    </body>
</html>

Örnek

jQuery Karakter Sayacı Örneği

Selametle

]]> Basit bir Daktilo Efekti https://wpadami.com/kodlama/jquery-kodlama/basit-bir-daktilo-efekti.html Fri, 21 Sep 2012 16:49:44 +0000 http://wpadami.com/?p=2489 Geçenlerde lazım olduğu için araştırma yapıp bulduğum bir jQuery kodu bu. Çok basit şekilde daktilo efekti eklemenizi sağlıyor istediğiniz herhangi bir yere. Aşağıdaki kodun içinde açıkalmalarını yazdım. Bir adette basit demo ekledim ona da link verdim. Koda bakacak olursak.

Aşağıdaki kod kendini tekrarlayabilen, yani listedeki içeriklerin sonuncusuna geldiğinde tekrar başa dönebilen bir kod. li etiketini kullanarak içeriklerimizi belirliyoruz. Öncelikle sayfamızda jquery çağırmamız gerekmete. Yoksa kodumuz çalışmayacaktır. Aşağıdaki satırdan bunu edinebilirsiniz. Ya da en alttaki kodun son halini direkt alabilirsiniz.

jQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.4.2'></script>

Javascript

$(function() {
	var repeat = 1;	//Tekrarlama Ayaro 0 veya 1 olabilir.
    var ch = 0;   	//Karakter sayısı, hangi karaktere gelince diğer satıra geçileceğini belirler. 0-100 gibi rakamsaldır.
	var item = 0; 	//Listenin hangisinden başlanapını belirler 0 ilk <li> den başlar.
	var items = $('#caption li').length;
	var time = 1000;  // Görünecek Süre (milisaniye)
	var delay = 50;   // Gecikme (milisaniye)
	var wait = 4000   // Bekleme Süresi (Başlama için (milisaniye))
	$('#showCaption').css('width', ($('#caption').width() + 20));
	function tickInterval() {
		if(item < items) {
			var text = $('#caption li:eq('+item+')').text();
			type(text);
			text = null;
			var tick = setTimeout(tickInterval, time);
		} else {
			if(repeat == 1) {
                            ch = 0;
                            item = 0;
                            tickInterval();
                        } else {
                            clearTimeout(tick);
                        }
		}
	}
	function type(text) {
		time = delay;
		$('#showCaption').html(text.substr(0, ch++));
		if(ch > text.length) {
			item++;
			ch = 0;
			time = wait;
		}
	}
	var tick = setTimeout(tickInterval, time);
});

Bu kodun aktifleşebilmesi için showCaption idsine sahip bir div ve liste içeriklerini belirleyeceğimiz caption idsine sahip bir <ul> liste başlangıcına ihtiyacımız var. Onlar da aşağıdaki gibi olmalıdır.

HTML İçerik

<ul id="caption">
	<li>Birinci İçerik.</li>
	<li>İkinci İçerik.</li>
	<li>Üçüncü İçerik.</li>
	<li>Dördüncü İçerik.</li>
	<li>Beşinci İçerik.</li>
	<li>Altıncı İçerik.</li>
	<li>Yedinci İçerik.</li>
	<li>Sekizinci İçerik.</li>
	<li>Dokuzuncu İçerik.</li>
	<li>Onuncu İçerik.</li>
</ul>
	<div id="showCaption"></div>

Bunları ekledikten sonra tabii ki CSS öğelerine de ihtiyacımız olacak. Öncelikle caption tagını saklamalıyız. Çünkü jQuery kodu showCaption divi içierisinde bu listedeki öğeleri tek tek gösterecek. Direkt listeyi göstermek istemeyiz.

CSS

#caption {
	display: none;
}
#showCaption{
	font-family:Courier New;
	font-size:20px;
	color:#000;
	font-weight:bold;
	width:350px;
	min-width:350px;
}

/* İhtiyaca göre düzenlenmiş css dosyasıdır. Kendinize göre düzenleyebilirsiniz */

Dosyamızı HTML Formanıta alırsak şöyle görünecektir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr_TR">
	<head profile="http://gmpg.org/xfn/11">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>jQuery Daktilo Efekti ~ KaiseRCrazY.CoM</title>
			<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.4.2'></script>
			<script type='text/javascript'>
			$(function() {
				var repeat = 1;	//Tekrarlama Ayaro 0 veya 1 olabilir.
				var ch = 0;   	//Karakter sayısı, hangi karaktere gelince diğer satıra geçileceğini belirler. 0-100 gibi rakamsaldır.
				var item = 0; 	//Listenin hangisinden başlanapını belirler 0 ilk <li> den başlar.
				var items = $('#caption li').length;
				var time = 1000;
				var delay = 50;
				var wait = 4000
				$('#showCaption').css('width', ($('#caption').width() + 20));
				function tickInterval() {
					if(item < items) {
						var text = $('#caption li:eq('+item+')').text();
						type(text);
						text = null;
						var tick = setTimeout(tickInterval, time);
					} else {
						if(repeat == 1) {
										ch = 0;
										item = 0;
										tickInterval();
									} else {
										clearTimeout(tick);
									}
					}
				}
				function type(text) {
					time = delay;
					$('#showCaption').html(text.substr(0, ch++));
					if(ch > text.length) {
						item++;
						ch = 0;
						time = wait;
					}
				}
				var tick = setTimeout(tickInterval, time);
			});
			</script>
			<style type="text/css">
				#caption {
					display: none;
				}
				#showCaption{
					font-family:Courier New;
					font-size:20px;
					color:#000;
					font-weight:bold;
					width:350px;
					min-width:350px;
				}

				/* İhtiyaca göre düzenlenmiş css dosyasıdır. Kendinize göre düzenleyebilirsiniz */
			</style>
	</head>
	<body>
		<ul id="caption">
			<li>Birinci İçerik.</li>
			<li>İkinci İçerik.</li>
			<li>Üçüncü İçerik.</li>
			<li>Dördüncü İçerik.</li>
			<li>Beşinci İçerik.</li>
			<li>Altıncı İçerik.</li>
			<li>Yedinci İçerik.</li>
			<li>Sekizinci İçerik.</li>
			<li>Dokuzuncu İçerik.</li>
			<li>Onuncu İçerik.</li>
		</ul>
			<div id="showCaption"></div>
	</body>
</html>

Biliyorum çok aşırı tatmin edici bir anlatım olmadı. Bugün biraz yorugun gibiyim. Örnek linkindeki sayfadan tam içeriği alabilirsiniz.
Örnek: Örneği Görebilmek İçin Tıklayın

Selametle

]]> jQuery ile Smooth Scroll https://wpadami.com/kodlama/jquery-kodlama/jquery-ile-smooth-scroll.html Fri, 13 Jan 2012 04:23:05 +0000 http://wpadami.com/?p=1951 Bazen sitenin en altından yukarı ya da belirli bir anchor üzerine link verdiğimde çat diye gitmesine sinir oluyorum. Blog için bununla ilgili bir eklenti buldum ancak kodlarını hiç incelemedim. Neyse diğer projelerimin birinde de böyle bir sorun olunca az birşey araştırdım. Güzel bir kod buldum. Aşağıda sizinle paylaşacağım jQuery kodu ile aşağıya/yukarıya doğru kayma efekti verebilirsiniz bu tip linklere.

Kod

Gerek var mı bilmiyorum ancak ben gene hatırlatayım. Bu javascript kodunu kullanmadan önce jquery eklemelisiniz sisteminize. Kodun içine ekliyorum ben kodu.

jQuery kodunu çağırırken aşağıdaki linkin başına ve sonuna script kodlarını ekleyin. Ben her ihtimale karşı değiştirdim çünkü alan adını.

// HTML Alanı:
<h1 id="yukari">Lorem Ipsum</h1>
<p><a href="#yukari" class="ustlink">Yukarı Dön</a></p>

//Script Alanı
<abc type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></abc> 
//abc yi script ile değiştirin

<abc type="text/javascript"> //abc yi script ile değiştirin
$(document).ready(function() {

	$("a.ustlink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing" //linear veya swing kullanılabilir
		});
		return false;
	});

});
</abc> //abc yi script ile değiştirin

Yukarıdaki kod ile birlikle easing efektinin linear ve swing efektlerini kullanabilirsiniz. Eğer jQuery Easing efektini eklemek isterseniz jQuery Easing sayfasından gerekli bilgiyi alıp kullanabilirsiniz.

Hadi Selametle

]]> VerticalShift jQuery Eklentisi https://wpadami.com/kodlama/jquery-kodlama/verticalshift-jquery-eklentisi.html Tue, 12 Apr 2011 10:07:04 +0000 http://wpadami.com/?p=1679 jQuery sitesinde dolanırken gördüğüm güzel eklentilerden (plugin) biri VerticalShift. Husbandman (Mark Tank) tarafından yapılan bu eklenti size yatay bir alanda birden çok açılan alan kullanarak resim, yazı ve hatta açıklamalarınızı gösterebilmenize yarayan güzel bir eklenti. Kullanımı ve indirme ile ilgili bilgileri aşağıda size belirteceğim. Umarım kullanabileceğiniz güzelliktedir. Çalışmalarınıza renk katması dileğimle başlıyorum…

Yatay Alanda Açılır Resim Kutucukları…

Aşağıda önizleme linki vereceğim scripti kullanmak için öncelikle javascript dosyasını ve dolayısıyla jQuery dosyalarını sitemize entegre etmek zorundayız. Önemli bir Not: jQuery 1.4.4 ve sonraki sürümlerinde çalışır.

İndirme Linki;

VerticalShift jQuery Plugin

Script Kullanımı;

NOT: Ordaki Örneği Kullanarak Kod örneği verdim. Lütfen Detaylar için Önizleme Sayfasını ziyaret ediniz.
Öncelikle jQuery ve VerticalShift i sisteme dahil edelim.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://husbandman.org/javascripts/verticalshift/jquery.verticalShift.js"></script>

Daha sonra kullanmak sistemi aktif hale getirmek için gerekli kodu ekleyelim.

<script type="text/javascript"> 
$(document).ready( function() {
	$(".blind").verticalShift({opacity: .4});
	$("#textBoxes > div").verticalShift();
});
</script>

Ekleyeceğimiz resimleri ya da yazıları girelim

<div id="notes">
	<div>Note One</div>
	<div>Note Two</div>
	<div>Note Three</div>
</div>
	ya da
<div id="photos">
	<div><img src="images/forest.jpg" width="216px" height="216px" /></div>
	<div><img src="images/ocean.jpg" width="216px" height="216px" /></div>
	<div><img src="images/desert.jpg" width="216px" height="216px" /></div>
</div>

Burda işimiz bittiyse tüm kodlama şöyle görünecektir;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://husbandman.org/javascripts/verticalshift/jquery.verticalShift.js"></script>
<script type="text/javascript"> 
$(document).ready( function() {
	$(".blind").verticalShift({opacity: .4});
	$("#textBoxes > div").verticalShift();
});
</script>
<div id="notes">
	<div>Note One</div>
	<div>Note Two</div>
	<div>Note Three</div>
</div>
	ya da
<div id="photos">
	<div><img src="images/forest.jpg" width="216px" height="216px" /></div>
	<div><img src="images/ocean.jpg" width="216px" height="216px" /></div>
	<div><img src="images/desert.jpg" width="216px" height="216px" /></div>
</div>

Aynısını görüyorsunuz sıkıntı yok :) Güle Güle Kullanın.

Örnek görmek isterim diyenlere;

ÖRNEK

Hadi Selametle…

]]> jQuery ile Resim Önizlemesi https://wpadami.com/kodlama/jquery-kodlama/jquery-ile-resim-onizlemesi.html https://wpadami.com/kodlama/jquery-kodlama/jquery-ile-resim-onizlemesi.html#comments Sat, 25 Sep 2010 01:17:48 +0000 http://wpadami.com/?p=1518 jQuery ile yapılmış birçok galeri ve resim özellikleri kodlamalarının yanında sanırım bu biraz ufak tefek ve gösterişsiz kalacak.Ama resimlerin üzerine gelindiğinde ortaya çıkan bir popup ve bunu kullanmak isteyen bazı arkadaşlar olabilir. Keza benim böyle bir ihtiyacım oldu ve oturdum bu kodlarla ilgilendim. Buraya yazma nedenim de isteyen faydalanabilsin diyedir. Zamanında tooltip ile ilgili bir jQuery plugini vardır elimde. Şimdi ise ufak bir galeri scripti var :D Neyse. Bu script size galeri olarak ya da sayfalarınızda kullandığınız thumbnail (ufak resim) resimlerinizin üzerine gelindiğinde büyük hallerinin ortaya çıkmasını ve görünebilir hale gelmesini sağlıyor. Dediğim gibi ufak bir galeri oluşturabilirsiniz bu kodlarla.

Bir diğer özelliği de büyük kodlamalardaki gibi açılan popup alanının fare imlecine olan uzaklığı. Yani siz resmin üzerine gelidğinizde popup direk resmi kapatmıyor, fare imlecinin yanında açılarak her iki resminde görünmesini sağlıyor.Kodlara geçelim isterseniz.

Öncelikle javascript kodlarımızı görelim;

Kodlar;

//Resim üzerine gelince açılan popup
//Kodu düzenleyip geliştiren : Serkan Algur
//Web Sitesi: http://wpadami.com
//Genel amaçla kullanınız. Geliştirmek size kalmış.

this.resimonizleme = function(){
    /* Düzenleme */

        xOffset = 10;
        yOffset = 30;
        // Bu iki ayar görüntülenecek popup alanının  fare imlecine olan uzaklığını değiştirir.
        // İstediğiniz Şekle Getirmek için oynamalar yapaiblirsiniz.

    /* Düzenleme Sonu */
    $("a[rel*=popupacil]").hover(function(e){
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br />" + this.t : "";
        $("body").append("<p id='onizleme'><img src='"+ this.href +"' alt='Önizleme Resmi' />"+ c +"</p>");
        $("#onizleme")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn();
    },
    function(){
        this.title = this.t;
        $("#onizleme").remove();
    });
    $("[rel*=popupacil]").mousemove(function(e){
        $("#onizleme")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};

// Kodları başlangıçta çağıralım
$(document).ready(function(){
    resimonizleme();
});

Yukarıdaki kodlarda görebileceğiniz gibi bir ayar alanı var. Buradan x ve y ofsetlerini ayarlayarak açılacak popup alanının fare imlecine uzaklığını ayarlayabiliyorsunuz. Bunu seçmek size kalmış. Ve diğer ayarlar da görebileceğiniz gibi resmin yolunu belirten a alanına bir rel kod atadım. Bunun adını da popupacil olarak belirledim. buraları dilediğiniz gibi değiştirebilir, benim rel olarak atadığım alanları class olarak da düzenleyebilirsiniz. Bu değişiklği yaptığınızda aşağıdaki HTML kodlarında da gerekli değişiklikleri yapın. Bir de fadeIn değer olarak sabit bir değer bıraktım . Bunun iki opsiyonu var slow ve fast. slow opsiyonu 600ms, fast opsiyonu 200ms, benim bıraktığım gibi kalırsa varsayılan gecikme değeri olarak 400ms belirlenir. Bunu değiştirmek için tırnak işaretlerini kullanarak fadeIn(“slow”) ya da fadeIn(“fast”) olarak belirtebilirsiniz.

Sonra da html dosyamızı oluşturalım ve kodlarımızı çağıralım.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ile resim önizlemesi</title>
<meta name="description" content="jQuery ile resim önizlemesi"/>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script src="onizleme.js" type="text/javascript"></script>

Önce kodlarımızı çağıralım. jQuery kaynağı olarak kendi sitesini kullandım. Siz dilediğiniz bir adresi veya kendi sitenizdeki jQuery dosyasını çağırabilirsniz.

Sonra da araya stil kodlarımızı serpiştirelim. Burada #onizleme alanı bizim popup alanımız için ayarlanmıştır. Siz renkleri ve diğer değişkenleri istediğiniz gibi ayarlayın.

<style>
body{margin:0 auto;padding:0 auto;background:#fff;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;}
h1{font-size:180%;font-weight:normal;color:#333;}
h2{clear:both;font-size:160%;font-weight:normal;color:#666;margin:0;padding:.5em 0;}
a{text-decoration:none;color:#f30;}
p{clear:both;margin:0;padding:.5em 0;}
img{border:none;}
ul,li{margin:0;padding:0;}
li{list-style:none;float:left;display:inline;margin-right:10px;}
#ortala {width:960px;margin:0 auto;padding:0 auto;display:block;}
#onizleme{position:absolute;border:2px solid #333;background:#ccc;padding:5px;display:none;color:#333;-moz-border-radius:5px;border-radius:5px;}
.altlink{clear:both;margin-top:250px;}
</style>
</head>

Stil kodları da bittiğine göre resimlerimizi ekleyelim. Burada unutmamanız gereken link alanındaki rel kodlamasıdır. Bütün resimlerin linklerini atarken rel=”popupacil” kodunu eklemeyi unutmayın.

<body>
<div id="ortala">
    <h1>jQuery ile Resim Önizlemesi</h1>

    <h2>Resim Galerisi (alt başlık olmadan)</h2>

    <ul>
        <li><a href="1.jpg" rel="popupacil"><img src="1s.jpg" alt="önizleme" /></a></li>
        <li><a href="2.jpg" rel="popupacil"><img src="2s.jpg" alt="önizleme" /></a></li>
        <li><a href="3.jpg" rel="popupacil"><img src="3s.jpg" alt="önizleme" /></a></li>
        <li><a href="4.jpg" rel="popupacil"><img src="4s.jpg" alt="önizleme" /></a></li>
    </ul>

    <h2>Resim Galerisi (alt başlıklar ile)</h2>

    <ul>
        <li><a href="1.jpg" rel="popupacil" title="Güzel bir resim"><img src="1s.jpg" alt="önizleme" /></a></li>
        <li><a href="2.jpg" rel="popupacil" title="Daha Güzel bir resim"><img src="2s.jpg" alt="önizleme" /></a></li>
        <li><a href="3.jpg" rel="popupacil" title="Alt başlıklar görünüyor"><img src="3s.jpg" alt="önizleme" /></a></li>
        <li><a href="4.jpg" rel="popupacil" title="Demek ki sorun yok"><img src="4s.jpg" alt="önizleme" /></a></li>
    </ul>
    <div class="altlink"><a href="http://wpadami.com" title="KaiseRCrazY.CoM, Serkan Algur">Anasayfa</a></div>
</div>

</body>
</html>

Bütün işlem bundan ibaret. Canlı örnek için buraya tıklayın. İndirmek için aşağıda kaynak kodlarını ve resimleri size aktarıyorum.

Hadi Selametle.

 

]]> https://wpadami.com/kodlama/jquery-kodlama/jquery-ile-resim-onizlemesi.html/feed 3 jQuery ile Tweet Çubuğu Yapımı https://wpadami.com/kodlama/jquery-kodlama/jquery-ile-tweet-cubugu-yapimi.html https://wpadami.com/kodlama/jquery-kodlama/jquery-ile-tweet-cubugu-yapimi.html#comments Tue, 21 Sep 2010 15:11:51 +0000 http://wpadami.com/?p=1512 jQuery ile yapamayacağımız şey kalmadı neredeyse :D Bunlardan biri de Twitter güncellemelerini gösterebileceğimiz bir çubuk yapımı. Basitleştirilmiş ve sadece sizin tweetlerinizi gösterebilecek bir tweet çubuğu yapımı göstereceğim. Nerede kullanmak istediğiniz size kalmış :) Bu kodu geliştiren kişi birkaç ayar ile tüm etiketlerden, sadece koordinat bazında tweetleri gösterebilen bir kod haline getirmiş. Yazının sonundaki kaynak siteden bu bilgilere de erişebilirsiniz.

Twitter API değiştiği için Tweetleriniz görünmeyebilir

Kodlar…

Her zamanki gibi öncelikle sayfamıza java kodlarımızı ve jQuery kodlarını çağırmamız gerekmekte. Öncelikle bu işlemleri gerçekleştirelim. Örneğini vereceğim çubuk alanı için gerekli olan javascript dosyasını aşağıdan indirebilirsiniz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js"></script>

Sonra bu kodların altına sizin tweetlerini göstermesi için gerekli kodu yerleştiriyoruz.

<script type="text/javascript">
   $(document).ready(function(){
      $('#rrt').relatedTweets({
         debug:true
         ,from_users:'sizin twitter idniz'
         ,status:1
         ,realtime:0
         ,n:20
         ,show_avatar:0
         ,show_author:0
      });
   });
</script>

Bu kodları çağırdıktan sonra çubuğun görüneceği alanı oluşturuyoruz.

<div id="rrt">Yükleniyor..</div>

Hepsi bu kadar. Örneğe aşağıdan erişebilirsiniz.

Örnek Linki

Kaynak Site

Gerekli Javascript Dosyası

[download id=”22″]

Hadi Selametle

]]> https://wpadami.com/kodlama/jquery-kodlama/jquery-ile-tweet-cubugu-yapimi.html/feed 2 Em Hesaplayıcı https://wpadami.com/kodlama/em-hesaplayici.html Wed, 08 Sep 2010 06:13:50 +0000 http://wpadami.com/?p=1494 CSS yazarken px (pixel) kullanıyorum uzunlukları ve yazıtipi boyutlarında. Ama em olarak da yani tipografik uzunluk olarak hem yazıtiplerinde hem de tasarladığınız sitede diğer alanların uzunluklarında kullanabiliyorsunuz. 1 em 16px uzunluğa denk geliyor. Tabii ki bu zamana kadar px kullanmakta olan birinin işine gelebilir de gelmeyebilir de. Ama hem yazacağınız CSS dosyasında kullanabilirsiniz hem de varolan bir CSS uzantısında kullanılmış olan em uzunluklarını anlamanızı da sağlar. Böylece istediğiniz gibi kullanabilirsiniz. Sitenin adresini aşağıya aktarıyorum. Yeni versiyon olarak sanırım Dreamweaver için eklentisi yapılmış ama online bir araç olarak da kullanımda.

Siteye erişmek için tıklayınız.

Selametle.

]]> Siteyle birlikte açılan jQuery Popup https://wpadami.com/kodlama/jquery-kodlama/siteyle-birlikte-acilan-jquery-popup.html https://wpadami.com/kodlama/jquery-kodlama/siteyle-birlikte-acilan-jquery-popup.html#comments Tue, 31 Aug 2010 12:00:10 +0000 http://wpadami.com/?p=1491 Bu kod kadir a ‘nın Friendfeed üzerindeki jQuery popup ile ilgili bir bilgi soran şu yazdığı yardım isteğine (silinmiş bu feed) rastlamamla  ortaya çıkmış oldu. İyi de oldu. Bugün ofiste toplanması gereken iki adet masaüstü bilgisayar vardı. Onları bitirdiğimde biraz ar-ge çalışması :) yaptım. Daha önceden elimde bulunan bir popup scriptini document.ready fonksiyonuyla birleştirme firkriyle bir adım da atmış oldum. Orasıyla burasıyla oynayınca istediğim gibi de ortaya çıktı. Şimdi bunu nasıl yapabileceğinizi anlatmaktan memnuniyet duyacağım. Başlayalım…

Öncelikle açılışta siteyle beraber yüklenen javascript popuplar uzun zamandır bizimle birlikte ama kimi farklı pencerede kimi de rahatsız edici derecede kötü oluyor. jQuery nin hayatımıza girmesiyle birlikte bu işleri yapmak ve insanları rahatsız etmeden site içinde kullanmak daha basit bir hal aldı. İşte aşağıda anlattığım şekilde bunu başarabilrsiniz.

Öncelikle HMTL sayfamızı oluşturalım. Burada yukarıdaki yazıda belirtmiş olduğum document.ready komutu ile çağırma işlemini yapıyoruz. O satırları ayrı bir şekilde işaretledim. Aşağıda javascript dosyasındaki ile karıştırmayın. Burada sitenize eklemeniz gereken alanlar popupContact ve backgroundPopup adlı div alanları. Bunları da işaretledim. Bu kodlar ile açılacaktır Popup. Yapmanız gereken şey işaretli alanlardaki divleri olduğu gibi sitenizde açmak istediğiniz yere eklemek. Tabii css ve javascript dosyalarını da entegre etmeyi unutmadan :D

jQuery popup kodu

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Siteyle birlikte açılan jQuery Popup!</title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
centerPopup();
loadPopup();
});
</script>
</head>
<body>
	<center>
		Açılıyoooor :)
	</center>
	<div id="popupContact">
		<a id="popupContactClose">x</a>
		<h1>Siteyle birlikte açılan jQuery Popup!</h1>
		<p id="contactArea">
			Bu ufak kodlar ve jQuery sayesinde harikalar yaratabiliriz.
			<br /><br />
			Açılışta popup gelmesi için biraz kafa yordum :D ama değdi.
			<br /><br />
			ESC ye popup dışına yada x e basarak kapanabilir.
			<br /><br />
		</p>
	</div>
	<div id="backgroundPopup"></div>
</body>
</html>

Sonra da siteye eklediğimiz popup.js özelliklerine göz atalım. Unutmayın ki javascript dosyasını ben yazmadım. Sadece ona uygun olarak bazı değişiklikler yaptım.

jQuery popup javascript dosyası

Popup sisteminin aktifliğini belirleyelim.

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

Yükleme ve devredışı bırakma komutları

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

Ortalayalım…

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6

	$("#backgroundPopup").css({
		"height": windowHeight
	});

}

E tabii yükleme safhasında olacakları belirleyelim. Buradaki document.ready bir butona tıklama durumunda kullanılabilecek düzeyde hazırlanmıştı. Benim kullandığım fonksiyon HTML dosyasında. Yazdım yukarıda.

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});

	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

Sonrasında CSS dosyasını irdeleyelim. Burada kodlarla ilgili body için de düzenleme yapmıştım. Siz ihtiyacınıza göre cssleri sitenize ekleyebilirsiniz.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

Bir günlük Çerez bırakarak açmak

Aşağıdaki bir ve birden çok yoruma istinaden çok sorulan bir soruyu da yanıtlayayım böylelikle. Popup u çerez kullanarak günde bir kere açmak için aşağıdaki scripti /head alanından önce ekleyin. Bu kodu eklediğinizde lütfen ilk kodda paylaştığım document.ready içeren scripti tamamiyle kaldırın. Çerez kodunun çalışmama ihtimali var kaldırmazsanız. Buna ek olarak ilk verdiğim cookie kodu çalışmamıştı. Bundan dolayı özür dilerim. Ancak çalışan bir tane yazmayı başardım. Kodda çok bir değişiklik göremeyebilirsiniz ancak ek olarak body alanına bir adet onload kodu eklemeniz gerekmekte. Bunu da kodun altına ekledim.

Not: Ekteki dosyada bu verdiğim kodu bulamazsınız. Onun için buradan kopyalayıp yapıştırın lütfen.

<script type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^s+|s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var a=getCookie("popupbirkereacil");
if (a!=null && a!="")
  {

  }
else 
  {
	centerPopup();
    loadPopup();
    setCookie("popupbirkereacil",a,1);
  }
} 
</script>

body alanına onload olarak eklediğinzde şu şekilde görünmesi gerekir.

<body onload="checkCookie()">

Örneğe bakalım :) tıklayın bu yazıya.

Bir kere açılan örneğe bakalım :).

Örneklerde de nasıl çalıştığını görebilrisiniz. Eğer kafanıza yatmayan bir kısım varsa yorum bırakabilirsiniz. En kısa sürede size cevap veririm.Örnekteki Dosyaları indirmek için aşağıdaki indirme linkine tıklayın.

Hadi Selametle…

Dosyayı Ek Alanından İndiriniz

 

]]> https://wpadami.com/kodlama/jquery-kodlama/siteyle-birlikte-acilan-jquery-popup.html/feed 65 HTML Dosyalarınızı Temizleyin… https://wpadami.com/kodlama/html-dosyalarinizi-temizleyin.html Fri, 27 Aug 2010 09:33:24 +0000 http://wpadami.com/?p=1473 HTML bir şablon yazarken veya CSS dosyalarınızın optimizasyonunu yaparken sıkıntı yaşıyorsanız size üç adet araç önereceğim. Bunları kurmanız gerekmiyor çünkü bunlar internet üzerinden hallediliyor :) Çoğumuz minify tarzı eklentilerle javascript ve css dosyalarımızın boyutlarında ve dosya sayısında azaltmaya giderek sitelerimizin kullanıcılar için daha hızlı ve efektif olması için çalışıyoruz. CSS dosyaları çok büyük olabiliyor. HTML kodlarımız da WC3 standardına uymayabiliyor bazen. Bu üç araç bizim için bunları düzenlemek görevini üstleniyor. Aşağıda bunları sıralayacağım.

1. HTML Tidy Online

HTML Dosyalarınızı Temizleyin...

Bu sistem ile internet ortamından belirli bir linkte bulunan html sayfamızı ya da elimizde bulunan dosyayı gerek siteye yüklemek gerekse kodları site içindeki istenen yere kopyala-yapıştır usulüyle kodlarımız içinde yaptığımız hataları bulup bunların temizliğini ve düzeltimlesini sağlayabiliyoruz.  Dosyalarımızı WC3 standartlarına uygun hale getirebildiğini söyleyen bu site bence kullanışlı yaptığım bir iki kodu karşılaştırdım ve bazı eksikleri gösterdi. Denemeye değer.

2. HTML / XHTML Beautifier

HTML Dosyalarınızı Temizleyin...

Webmaster Gate sitesinin bir aracı olan bu sistem de online dosya ekleme ve kodları ekleme yöntemiyle WC3 standartlarına göre kodlarınızı kontrol eden ve gerekirse düzeltmeleri yapan bir özelliğe sahip. HTML Tidy Online tarzında çalışan sistem de denemye değer olarak göze çarpıyor. İkisinin arasında pek fark yok gibi.

3. Code Beautifier

HTML Dosyalarınızı Temizleyin...

Bu site ise tamamiyle CSS bazlı bir temizlik ve kontrol sağlıyor. 23,75Kb gibi büyüklükte olan dosyamı 18Kb gibi bir büyüklüe kadar indirdi. çoğu yapmış olduğum hatayı da neredeyse 0 a indirdi. Oldukça kullanışlı ve Kodlara göstereceği insiyatifi de siz belirleyebiliyorsunuz. Tek satırda okunabilir bir CSS dosyası haline getirebiliyor kodlarınızı. Gördüklerim arasında en kullanışlı ve yazmaya değer site diye düşünüyorum.

]]> AdBlock Plus Eklentisini Engellemek! https://wpadami.com/kodlama/php/adblock-plus-eklentisini-engellemek.html https://wpadami.com/kodlama/php/adblock-plus-eklentisini-engellemek.html#comments Sun, 21 Mar 2010 20:42:27 +0000 http://wpadami.com/?p=1244 AdBlock Plus Eklentisini Engellemek!Çoğunuz Firefox ile eklentiler kullanıyorsunuz. Ben de kullanıyorum. Ama öyle bir eklenti var ki bu tüm dünyadaki insanların istenmeyen reklamları görmemesini sağlıyor ama aynı zamanda Web Yayımcılarının kazançlarını sıfıra çekiyor bir anda. Evet AdBlock Plus‘tan bahsediyorum. Güzel bir eklenti olduğundan hiç mi hiç şüphem yok, hatta ben de kullanıyorum. Ama şöyle birşey var. Google Adsense dahil içinde javascriptlerde olsun kodlarında olsun “ad“, “ad server” gibi cümleler geçen tüm kodları engelliyor. Buda site gelirlerini sıfıra indirgiyor.

Sorun da orda doğuyor zaten. Sitemde bir yada iki alanda reklam ekliyorum. Hatta bazen hiç eklemediğim de oluyor ama bu işten para kazananların tüm kazancı sıfırlanıyor! Tabiiki erotik içerikli sitelerdeki açılan milyonlarca reklamı engelleme güzel birşey internet kullanıcılarının bu kesimi için. Neyse ben bu kodu nasıl aşabilirz ve hatta reklamları yayınlayamasak da serzenişimizi nasıl duyurabileceğimizi göstereceğim.

Öncelikle isterseniz aşağıdaki kodu halihazırda çağırdığınız bir java dosyasının içine entegre edin, isterseniz bundan bir dosya oluşturup geçmesin “advertisement.js” gibi bir isim vererek sitenizde çağırın.

var adblock = false;

Bu dosyayı çağırdığınız vakit adblock bunu engelleyecektir. Böylelikle bizim sistemimiz için gerekli olan değer atanmış olacaktır. Yani değersizlik. Reklamları göstermek için bir div içine almamız gerekmekte. Bunu içeriğini değiştirebilmek için yapıyoruz.

<div class="a">
<!-- Reklam Kodunuz -->
</div>

Sonra o divin bitimine şu kodu ekleyin.

<script type="text/javascript">
<!--
	if(adblock === undefined) {
		var allElements = document.getElementsByTagName('div');
		for (var i = 0; i < allElements.length; i++) {
			if (allElements[i].className == 'a') {
				allElements[i].innerHTML = '<strong>Selam Arkadaşım, Firefox ile Beraber AdBlock Plus Kullandığını görüyorum. Site içerisinde olduğunca az Reklam Kodu eklemeye çalışıyorum ve bu siteyi ayakta tutmak oldukça zor. Google Adsense Kullnıyorsan sen de buna karşısındır. Lütfen AdBlock plusu bu sayfada etkisiz kılabilirmisin?.';
			}
		}
	}
//-->
</script>

Son görünüm böyle olacak;

<div class="a">
<!-- Reklam Kodunuz -->
</div>
<script type="text/javascript">
<!--
	if(adblock === undefined) {
		var allElements = document.getElementsByTagName('div');
		for (var i = 0; i < allElements.length; i++) {
			if (allElements[i].className == 'a') {
				allElements[i].innerHTML = '<strong>Selam Arkadaşım, Firefox ile Beraber AdBlock Plus Kullandığını görüyorum. Site içerisinde olduğunca az Reklam Kodu eklemeye çalışıyorum ve bu siteyi ayakta tutmak oldukça zor. Google Adsense Kullnıyorsan sen de buna karşısındır. Lütfen AdBlock plusu bu sayfada etkisiz kılabilirmisin?.';
			}
		}
	}
//-->
</script>

Resim olarak da AdBlock Plus kodunuzu engelleyince şu yazı ile karşılaşacak okur. İsterseniz yazıyı değiştirebilirsiniz.

AdBlock Plus Eklentisini Engellemek!

]]> https://wpadami.com/kodlama/php/adblock-plus-eklentisini-engellemek.html/feed 1