Javascript İle URL Yönlendirme Nasıl Yapılır?

Javascript ile bir web sayfasını başka bir sayfaya yönlendirmek son derecede kolaydır.  Aşağıdaki basit kodu kullanarak istediğiniz yönlendirmeyi yapabilirsiniz

<script>
window.location.replace("https://arslanturgut.blogspot.com");
</script>

builtin@search_engine_record.com Nedir? Kimdir?

nopCommerce sistemi kullanan herkes Activity Log(Aktivite Günlüğü) kısmında tüm siteyi  büyük bir hızla dolaşan, builtin@search_engine_record.com mail adresiyle kayıtlı bir müşteriye rastlamıştır. Normal bir müşteri bu kadar hızlı bir şekilde site içinde dolaşamaz. Tahmin ettiğiniz gibi builtin@search_engine_record.com gerçek bir müşteri değil, bir bilgisayar programı. nopEcommerce'nin dahili kayıt yazılımı. Bu program siteyi ziyarete gelen arama motoru botlarının tek bir guest müşteri hesabında kayıt altına alınmasını sağlıyor. Böylelikle arama motorları tarafından siteniz her tarandığında ayrı bir konuk oturumu açmak zorunda kalmıyorsunuz.

Mozilla Firefox Çoklu Pencere Kapatma Uyarısı

Mozilla Firefox Çoklu Pencere Kapatma Uyarısı Nasıl Açılır?

Firefox web gezginlerinin en çok tercih ettikleri, internet dünyasının popüler tarayıcılarından biridir. Kolay kullanımı, pek çok fonksiyonu desteklemesi ve sayısız eğlenceli eklentisi ile kullanıcılarına son derecede kaliteli ve hızlı bir hizmet sunmaktadır.

Firefox'un kullanıcılarına sunduğu güzel özelliklerden biri girdiğiniz siteleri ayrı birer sekmede(Tab) görüntülemesi. Bu sayede her site için ayrı bir pencere açıp, pencereler arasında kaybolmaktan kurtuluyorsunuz.

Ancak bu sekmeli gösterimin bir dezavantajı var. Sağ üstteki çarpı şeklindeki kapatma tuşuna bastığınızda  tüm sekmelerin birden kapanması. Firefox bunu önlemek için, kapatma butonuna bastığınızda bir uyarı kutucuğu görüntülemektedir. Bu sayede tüm pencereleri birden kapatmadan önce son bir kez düşünme  şansınız olur. şansınız oluyor.

Eğer kullandığınız tarayıcıda "Kapatma Onayı" kutucuğu görüntülenemiyorsa, birden fazla sekme kapatma uyarısını şu yolu takip ederek aktive edebilirsiniz. Üst menüde Araçlar butonuna basın açılan menüden Seçeneklere girin bunu klavyeden ALT+A+S tuşlarına basarak da yapabilirsiniz. Resimdeki Seçenekler menüsü açılacaktır. sol menüden Genele tıklayın ve sağda açılan menüden Sekmeler bölümüne gelin. Burada "Birden fazla sekmeyi kapatırken beni uyar" seçeneğinin solundaki kutucuğa tıklayarak işaretleyin. Artık uyarı butonunuz aktif hale gelecektir. Eğer tekrar kapatmak isterseniz "Kapatma Onayı" kutucuğu belirdiği zaman "Çok sayıda sekmeyi kapatmaya çalıştığımda beni uyar" tikini kaldırmanız yeterli.

Saygılarımla...
Turgut Arslan

Basit JQuery Slider (Responsive)

JQuery ile basit bir slider çalışması yaptım. Bu çalışmamda birbiri üstüne absolute konumlu dizilen a ve img elemanları sırayla kullanıcılara gösteriliyor. Geçiş efekti olarak JQuery'nin fadeIn ve fadeOut fonksiyonlarını kullandım. 

Sayfanın yüklenme anında resimKut id'li div elemanının içindeki a elemanlarını saydırıyor ve sırasıyla fadeIn-fadeOut efektlerini elemanlara uygulatarak slaytlar arasında geçişi sağlıyorum. a ve img elemanlarına sahip oldukları CSS'ler yine sayfanın yüklenme anında JQuery'nin css() fonksiyonuyla veriliyor. Böylece sliderı düzenlerken stil kodlarıyla uğraşmak zorunda kalmıyorsunuz.

Slider'ı responsive olacak şekilde kodladım. Slider görselleri içinde bulundukları elemanın genişliğine göre otomatik olarak boyutlandırılıyor. Yine çalışma anında slider'da bulunan a'ların yükseklik değerini alıyor ve bunu resimKut id'li elemana atıyorum. Bunu yapma sebebim resimKut elamanını position değerinin relative, içindeki a ve img elemanlarının absolute olmasıdır. Bu durumda içteki elemanları resimKutid'li elemanlardan boyutça bağımsız olacağından sayfa içine doğru yerleşemez, sayfada içeriğinin üstünde çıkar ve sayfa içeriğinin bir kısmının görünmesine engel olur. resimKut id'li dive yüksekli değeri vererek içerikteki diğer elemanları yükseklik kadar kaydırmış oluyorum.

Yükseklik hesaplaması sayfa boyutundaki değişmelere duyarlıdır ve sayfa genişliği değiştikçe otomatik olarak yeniden ayarlanır. Bu özellikle kullanıcılar tablet, telefon gibi cihazları dikey - yatay döndürdükçe sliderın konumlandırma ve boyutlandırma işlemlerinin doğru bir şekilde yapılması için gereklidir. 

Son olarak bu kadar zahmete neden katlandım diye sorarsanız sırf standart ul-li yapısını kullanmamak için. Bu yapıyı tinyMCE editör gibi kodlama kısıtlaması olan editörler kullanırken site içeriğine rahatça slider eklenebilmesi için tasarladım

<div id="resimKut" style="position: relative; display: block; width: 100%; height: 400px;">
  <a href="#1"><img src="tugla-duvar.jpg"/></a>
  <a href="#2"><img src="bugday-tarlasi.jpg" /></a>
  <a href="#3"><img src="flamanli-ampul.jpg" /></a>
  <a href="#4"><img src="soru-isaretleri.jpg" /></a>
  <a href="#5"><img src="baykus-resmi.jpg"  /></a>
</div>
<script>
  // <![CDATA[
  var i = 1;
  var baslatici;
  var ici = $('#resimKut a');
  var k = 0;
  window.onload = function() {
    $('#resimKut').height(ici.height());
    baslat();
  }

  function baslat() {
    for (j = ici.length; j >= 0; j--) {
      $('#resimKut a:nth-child(' + j + ')').css({
        'z-index': k,
        'display': 'block',
        'width': '100%',
        'height': 'auto',
        'position': 'absolute',
        'top': '0px'
      });
      $('#resimKut img:nth-child(' + j + ')').css({
        'z-index': k,
        'display': 'block',
        'width': '100%',
        'height': 'auto',
        'position': 'absolute',
        'top': '0px'
      });
      k++;
    }
    setInterval(cevir, 3000);
  }
  $(window).on('resize', function() {
    $('#resimKut').height(ici.height());
  });

  function cevir() {
    $('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
    i < ici.length ? i++ : i = 1;
    $('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
  }
  // ]]>
</script>
  // <![CDATA[
  var i = 1;
  var baslatici;
  var ici = $('#resimKut a');
  var k = 0;
  window.onload = function() {
    $('#resimKut').height(ici.height());
    baslat();
  }

  function baslat() {
    for (j = ici.length; j >= 0; j--) {
      $('#resimKut a:nth-child(' + j + ')').css({
        'z-index': k,
        'display': 'block',
        'width': '100%',
        'height': 'auto',
        'position': 'absolute',
        'top': '0px'
      });
      $('#resimKut img:nth-child(' + j + ')').css({
        'z-index': k,
        'display': 'block',
        'width': '100%',
        'height': 'auto',
        'position': 'absolute',
        'top': '0px'
      });
      k++;
    }
    setInterval(cevir, 3000);
  }
  $(window).on('resize', function() {
    $('#resimKut').height(ici.height());
  });

  function cevir() {
    $('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
    i < ici.length ? i++ : i = 1;
    $('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
  }
  // ]]>
</script>

Responsive JQuery Sliderımızın kodlarının canlı hali,

See the Pen Basit Responsive JQuery Slider Örneği by Turgut Arslan (@draguth) on CodePen.

Turgut Arslan

Javascript JSON Parsing Örnek 1

Javascript ile JSON formatında gelen verileri kolaylıkla parse edip bir tabloda okunaklı veriler haline getirebilirsiniz..

Örnek Kod

<!DOCTYPE html>
<html>
<body>
    <style>
        .musteriTablo th, .musteriTablo tr, .musteriTablo td
        {
            padding: 5px;
            border: solid 1px #f00;
            color: #717171;
            text-align: center;
        }
    </style>
    <table id="tabloIcerik" class="musteriTablo" style="max-width: 800px; height: auto;
        border: solid 1px #f00;" cellspacing="0" cellpadding="0">
        <tr>
            <th>
                Sipariş No
            </th>
            <th>
                Müşteri Adı Soyadı
            </th>
            <th>
                Sipariş Toplamı
            </th>
        </tr>
    </table>
    <script>
        var musteriler = '[{"no":"125212", "musteriAd":"Selami Parmak", "toplam":"1700 TL"},{"no":"125234", "musteriAd":"Fatih Sila", "toplam":"1800 TL"},{"no":"125365", "musteriAd":"Fethi Arsen", "toplam":"1700 TL"},{"no":"125324", "musteriAd":"Turgut Arslan", "toplam":"1900 TL"}]';
        var obj = JSON.parse(musteriler);
        var icerik = "";
        for (i = 0; i < obj.length; i++) {
            icerik += "<tr><td> " + obj[i].no + " </td><td> " + obj[i].musteriAd + " </td><td> " + obj[i].toplam + " </td></tr>";
        }
        document.getElementById("tabloIcerik").innerHTML += icerik;

    </script>
</body>
</html>

Kodları Çalıştırdığınız Zaman;

See the Pen Basit Bir JSON Parsing Örneği by Turgut Arslan (@draguth) on CodePen.

Saygılarımla... Turgut Arslan

Javascript Büyüteç Uygulaması

Saf Javascript ve CSS kullanarak basit bir büyüteç programı yazdım.

Javascript Büyüteç Kodları:

HTML Kodu;

<div id="resimKabi">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg" />
  <div id="buyutec"></div>
</div>

CSS Kodu;

#resimKabi {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  overflow: hidden;
}
#resimKabi img {
  display: block;
  width: 100%;
  height: auto;
}
#buyutec {
  width: 100px;
  height: 100px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg);
  background-repeat: no-repeat;
  border-radius: 50%;
  border: solid 2px #fff;
  position: absolute;
}

Javascript Kodu 

window.onload = function () {

        boyutla();

        takipEt();

        var eni, boyu, kutuEn, kutuBoy, hesEn, hesBoy;

        var buyutec = document.getElementById('buyutec');

        var rsmKap = document.getElementById('resimKabi');

        window.addEventListener("resize", boyutla);

        buyutec.style.backgroundSize = '3000% 3000%';

        function boyutla() {

            var kutum = document.getElementById('resimKabi');

            var urlAdr = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg';

            var resm = new Image();

            resm.src = urlAdr;

            eni = resm.width;

            boyu = resm.height;

            kutuEn = kutum.offsetWidth;

            kutuBoy = kutum.offsetHeight;

            hesEn = (eni / kutuEn) * 2.2;

            hesBoy = (boyu / kutuBoy) * 3.5;

        }

        function takipEt() {

            var x = null;

            var y = null;

            document.getElementById('resimKabi').addEventListener('mousemove', onMouseUpdate, false);

            document.getElementById('resimKabi').addEventListener('mouseenter', onMouseUpdate, false);

            function onMouseUpdate(e) {

                var konumu = rsmKap.getBoundingClientRect();

                x = e.clientX - konumu.left;

                y = e.clientY - konumu.top;

                buyutec.style.left = (x - 55) + 'px';

                buyutec.style.top = (y - 55) + 'px';

                buyutec.style.backgroundPosition = (-x * hesEn) + 'px ' + (-y * hesBoy) + 'px';

            }

        }

    }

Bu kodların sonucu;

Kodlar Üzerinde Oynama Yapmak İsterseniz Buraya Bakabilirsiniz

See the Pen Javascript Büyüteç Uygulaması (JS Magnifier) by Turgut Arslan (@draguth) on CodePen.

Saygılarımla...
Turgut Arslan

Google 20 Yaşında

Google 20 Yaşında

Bu gün Google'ın 20. Yaş Günü. Firma yirminci yaşına özel bir video hazırladı. Videoda kurulduğu zamandan bu yana dünyada olan önemli gelişmeleri kendine özgü güzel anlatımıyla özetlemiş. İyi seyirler.

Saygılarımla... Turgut Arslan