Siteye Yandex Harita Ekleme

Google son zamanlarda api servisinin ücretsiz kullanımını daha da kısıtladı. Yeni map api key aldığınızda 100 saniyede bir gösterime izin vermektedir. 100 saniye içinde harita gösterimde oluyor ama harita üzerinde for development purposes only uyarı geliyor. Bu şekilde ziyaretçinin gözüne pek hoş gelmiyor tabi. Ancak imdadımıza yandex map yetişiyor. Şuanlık ücretsiz ve herhangi bir api key almanızda gerekmiyor. Direk kodları yapıştırıp haritayı kullanabilirsiniz.  Kodlar zaten çok basit ve açıklayıcı.

 

 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Quick start. Showing an interactive map on a page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://api-maps.yandex.ru/2.1/?lang=tr_TR" type="text/javascript"></script>
    <script type="text/javascript">
        ymaps.ready(init);
        var myMap, 
            myPlacemark;

        function init(){ 
            myMap = new ymaps.Map("map", {
                center: [55.76, 37.64],
                zoom: 7
        });

        myPlacemark = new ymaps.Placemark([55.76, 37.64], { hintContent: 'İcon başlığı', balloonContent: 'Kutu içeriği'
            });
            
            myMap.geoObjects.add(myPlacemark);
        }
    </script>
</head>

<body>
    <div id="map" style="width: 600px; height: 400px"></div>
</body>

</html>

Daha fazla örnek uygulamaya bu linkten erişebilirsiniz.

Bad value *** for attribute rel on element a: The string *** is not a registered keyword hatasının çözümü

Lightbox galeri için rel etiketinde galerinin grubunu tanımladım. Ancak w3c validator kontrolünde aşağıdaki hatayı aldım. Normalde rel etiketinde kullanılabilecek tag bellidir. Bunlardan farklı bir tag kullanırsak hata alabiliriz. Önemli bir hata olmasa da çözülemeyecek bir hata değil.

Hata: Bad value productgallery for attribute rel on element a: The string productgallery is not a registered keyword.

Rel etiketinde kullanılabilecek taglar için tıklayınız.

Çözüm olarak rel etiketini tanımladığım yere data-rel=”productgallery” şeklinde bir tanımlama yaptım. Data etiketi jquery ile çekip işlem yapacağız.

Farklı etikete sahip birde fazla tag tanımlayabilirsiniz. Örneğin: data-rel=”_blank nofollow” burada_blank tagı target=”” etiketi içine, nofollow ise rel etiketi içine yazılacak.

Html kodu:

 <a href="#" data-rel="_blank nofollow"> ... </a> 

Aşağıdaki kodu lightbox fonksiyonundan önce yazınız.

Js kodu:

(function($){ 

    $("a[data-rel]").each(function() { // a[data-rel] tanımlı etiketleri çekiyoruz
        var rel_data = $(this).attr("data-rel").split(' '); // birden fazla tag eklenmiş ise Örnek: _blank nofollow
        var attr_length = rel_data.length; // tanımlanan tag sayısı

        for(i = 0; i < attr_length; i++){ // tanımlanan tag sayısı kadar işlem yapıyoruz

            if(rel_data[i] == "_blank"){ // eğer _blank ise target etiketini ekle
                $(this).attr("target",rel_data[i]);
            }else{ // eğer değil ise rel etiketini ekle
                $(this).attr("rel",rel_data[i]);
            }

        }
    });
	                
})(jQuery);

Sorularınızı yorumda belirtebilirsiniz.

Herkese iyi çalışmalar

Jquery ile sırayla veri gönderip almak

Bazı javascript işlemlerinde elimizdeki veriyi sırayla işleme sokup sonuç almamız gerekebiliyor. Bu durumda verileri düzenli olarak göndermek için en basit ve en iyi yollardan biri verileri array nesnesine atayıp sırayla göndermek. Kısaca mantığı şöyledir; ilk işlem tetiklendikten sonra sonuç geldiğinde array nesnesindeki sonraki veriyi çekip tekrar işlemi başlatmak. Bu şekilde ard arda istek gönderilmediği için tarayıcı tarafında önbellek problemini de en aza indirmiş olacağız.

Jquery kütüphanesi, css ve html kodlarını sayfamıza ekledikten sonra işlemi yapacak kodlarımıza geçelim.

Kullanacağımız parametreleri tanımlıyoruz. Array nesnesine ister id değerlerini isterseniz string ifade ekleyebilirsiniz. Buraya ekleyeceğimiz değerleri sırayla işleme sokacağız.


    // Başlama sayısı
    var baslama = 0;
    
    // Sırası ile işlem yapılacak değerleri array'a atıyoruz.
    var array = [2,4,6,8,10,12,14,16,17,18,20]; // String ifade için örnek: ["Değer 1","Değer 2" ...]

    // Array'daki eleman sayısını bir değikene atayalım.
    var arraytoplam = array.length;

İşlem yapacak fonksiyonu hazırlayalım. Ben array’daki sayıları ajax.php sayfasına gönderiyorum. Siz istediğiniz sayfaya gönderebilirsiniz.


   // Ajax istediğinde çalışacak fonksiyonumuz
    function ajax(gelendeger,islemgenisligi){

         $.ajax({
	       type: 'GET',
	       url: 'ajax.php',
	       cache: false,
	       data: 'value=' + array[baslama],
	       error: '',
	       success: function (cevap){
				
			   // Gelen yanıtı sonuclar divinin sonuna ekliyoruz.
               $("#sonuclar").append(cevap);
               
               // Başlama değerini bir arttırıyoruz böylece array'daki sonraki elemanı buluyoruz.
               baslama++;

               // Barın genişliğini arttırıyoruz.
               $("#bar span").css("width",(islemgenisligi*baslama));
               
               // Başlama değeri array'daki eleman sayısına küçük yada eşit ise istek göndermeye devam et.
               if(baslama <= arraytoplam - 1){
                
                 // Ajax istediğini gönderiyoruz.
                 ajax(array[baslama],islemgenisligi); 
                
               }else{ // Değilse işlemin bittiğini bildir.
                  $("#sonuclar").append('<span style="color:green;font-weight:bold;">Tüm sayılar çarpıldı.</span>');
               }
			}
	    });	

    }
    

Burada önemli olan baslama değerini sonuç geldiğinde 1 arttırıyoruz ve eğer array’daki toplam eleman sayısından büyük değilse tekrar fonksiyonu çağırıyoruz.

İlk işlemi tetiklemek için sayfa yüklendiğinde fonksiyonu çağırıyoruz.


    $(document).ready(function(){

         // Barın genişliğini alıyoruz.
        var bargenislik = $("#bar").css("width").replace("px","");

        // Her işlem yapıldığında barın genişliğini ne kadar arttıracağımızı buluyoruz.
        var islemgenisligi = (bargenislik/arraytoplam).toFixed(2);

        // Kaç işlemin yapılacağını gösteriyoruz.
        $("#islemsayisi").html("Yapılacak işlem sayısı: " + arraytoplam);
        
        // Ajax isteklerinin başlaması için sayfa yüklendiğinde ilk istediği gönderiyoruz.
        ajax(array[baslama],islemgenisligi);

    });

Kısaca bu tarz işlemlerin mantığını anlatmak istedim. Kodları kendinize göre düzenleyebilirsiniz.

Önizleme

İndir

Sorularınızı yorumda belirtebilirsiniz.

Herkese iyi çalışmalar

Js ile aktif/pasif sekme kontrolü

Bitly tarzı sitelerin linkine tıkladığınızda sayfadaki reklamla birlikte sağ üst bölümünde bir sayaç vardır. Eğer sayfada aktif değilseniz sayaç devam etmez. İlerlemesi için sayfada aktif olmanız gerekir.

Yada bazı sitelerde sekme değiştirdiğinizde “Bizi Unutma”, “Niye Bekleriz” şeklinde title kısmında bildirim çıkar.

Aslında sürekli kullandığımız iki basit fonksiyon ile bu işlemi kolayca yapabilirsiniz.

İlk olarak sayfamıza jquery kütüphanesi aktif ediyoruz.

Bu örnekte sadece title kısmını değiştirdim. Siz istediğiniz işlemi yapabilirsiniz. Ancak alert ifadesini kullanırsanız uyarıya tamam dedikten sonra sayfadan ayrılınca tekrar uyarı vereceği için sonsuz döngüye girecektir. 🙂

$(window).blur(function() { // Sayfadan ayrılınca
    $("title").html("Seni Bekliyoruz :)");
});

$(window).focus(function() { // Sayfaya geri gelince
    $("title").html("JS ile Aktif/Pasif Sayfa Kontrolü");
});

Önizleme

Basit ve kullanışlı tab yapımı

Bir projemde aynı sayfada birden fazla tab kullanmak gerekti. Bunun için çok güzel jquery eklentileri bulunmaktadır. Ama daha az kod kullanarakta bu iş yapılabilir. Üstelik aynı sayfada başka bir tab kullanmak için ekstra fonksiyon çağırmanızda gerekmiyor.

Css kodları

.tab-container {width:600px;margin:10px;background-color:#f3f3f3;overflow:hidden;padding:2px;border:1px solid #CCC;position:relative;}
.tab-container .tab-header{overflow:hidden;}
.tab-container .tab-header a {display:inline-block;font-size:12px;padding:5px;background-color:#2c3e50;color:#ffffff;margin-bottom:3px;}
.tab-container .tab-header a.active, .tab-container .tab-header a:hover {background-color:#e3e3e3;color:#2c3e50;}

.tab-content {display:none;padding:5px;background-color:#e3e3e3;overflow:hidden;}
.tab-content.active{display:block;}
 

Html kodları

<div class="tab-container" id="tab1">
	<div class="tab-header">
		<a href="javascript:;" class="active" data-tab="tab1">Tab Başlık 1</a>
		<a href="javascript:;" data-tab="tab1">Tab Başlık 2</a>
		<a href="javascript:;" data-tab="tab1">Tab Başlık 3</a>
		<a href="javascript:;" data-tab="tab1">Tab Başlık 4</a>
	</div>
	
	<div class="tab-content active">Tab İçerik 1</div>
	<div class="tab-content">Tab İçerik 2</div>
	<div class="tab-content">Tab İçerik 3</div>
	<div class="tab-content">Tab İçerik 4</div>
</div>


<div class="tab-container" id="tab2">
	<div class="tab-header">
		<a href="javascript:;" class="active" data-tab="tab2">Tab Başlık 1</a>
		<a href="javascript:;" data-tab="tab2">Tab Başlık 2</a>
		<a href="javascript:;" data-tab="tab2">Tab Başlık 3</a>
		<a href="javascript:;" data-tab="tab2">Tab Başlık 4</a>
	</div>
	
	<div class="tab-content active">Tab İçerik 1</div>
	<div class="tab-content">Tab İçerik 2</div>
	<div class="tab-content">Tab İçerik 3</div>
	<div class="tab-content">Tab İçerik 4</div>
</div>

Yeni bir tab oluştururken sadece tab id değerlerini değiştirmeniz yeterli olacaktır.

Javascript kodları

Burada dikkat etmeniz gereken yer javascript kodlarını sayfanın sonuna eklemeniz gerekmektedir. </body> tagının üstüne. Eğer tabların tıklayınca çalışmasını istiyorsanız hover yerine click yazmanız yeterlidir.

$(".tab-container .tab-header > a").hover(function(){ // eğer tıklayınca çalışsın istiyorsanız hover yerine click yazınız
	var tabID=$(this).data("tab"); // data-tab değerini alıyoruz. Bu şekilde hangi tabın üzerine geldiğimizi buluyoruz
	var kacincieleman = $(this).index(); // a elemanın kaçıncı sırada olduğunu buluyoruz
	
	$("#"+tabID+" .tab-header > a").removeClass("active"); // active class'ını kaldırıyoruz
	$(this).addClass("active"); // üzerine gelinen a elemanına active class'ını ekliyoruz
	
	$("#"+tabID+" .tab-content").hide(); // tab içeriklerini gizliyoruz
	$("#"+tabID+" .tab-content:eq("+kacincieleman+")").show(); // a elemanının bulunduğu sıraya denk gelen tab içeriğini aktif ediyoruz
});

 

Önizleme

İndir