Javascript Turkish Title Case

Kelimelerin İlk Harflerini Türkçe Uyumlu Büyük Harf Yapma

Eğer Javascript veya Jquery kullanarak kelimelerin ilk harflerini büyük harfe çevirmek ve bunu Türkçe harfler için de sorunsuz çalıştırmak istiyorsanız aşağıdaki fonksiyonu kullanabilirsiniz.

Turkish TitleCase:
/**
 * Kelimelerin sadece ilk harfini buyuk hale cevirip yollar (Title Case)
 * Turkce karakterleri dogru cevirir.
 * . , ; ! : - ? ve bosluk karakterlerini kelime ayirici olarak sayar. 
 */
function toTitleCaseTR(str) {
    return str.toLocaleLowerCase('tr-TR').replace(/(?:^|\s|,|;|!|:|-|\.|\?)[a-z0-9ğçşüöı]/g, function(match) {
        return match.toLocaleUpperCase('tr-TR');
    });
}

Eğer metnin hepsini büyük veya küçük yapacaksanız aşağıdaki şekilde kullanabilirsiniz.

Turkish UpperCase:
str.toLocaleUpperCase('tr-TR');

Turkish LowerCase:
str.toLocaleLowerCase('tr-TR');

reveal.js Maximum call stack size exceeded error

Maximum call stack size exceeded error

I added width and height value in settings. And I get some error:

reveal.js:1980 Uncaught RangeError: Maximum call stack size exceeded.
    at dispatchEvent (reveal.js:1980)
    at layout (reveal.js:2296)
    at onWindowResize (reveal.js:5527)
    at dispatchEvent (reveal.js:1980)
    at layout (reveal.js:2296)
    at onWindowResize (reveal.js:5527)
    at dispatchEvent (reveal.js:1980)
    at layout (reveal.js:2296)
    at onWindowResize (reveal.js:5527)
    at dispatchEvent (reveal.js:1980)

In order to fix it, go to line 2295 in reveal.js file. And replace if condition like this:

if( oldScale !== scale && typeof event == 'undefined' ) {
    dispatchEvent( 'resize', {
        'oldScale': oldScale,
        'scale': scale,
        'size': size
    } );
}

Best Jquery Range Sliders

En İyi Jquery Aralık Seçiciler - Best Jquery Range Sliders

Bana göre en kullanılışlı jquery slider örneklerini listelemeye çalıştım.
Güncel: 18 Eylül 2019

1. Ion.RangeSlider
http://ionden.com/a/plugins/ion.rangeSlider/

2. Slider Pips
https://simeydotme.github.io/jQuery-ui-Slider-Pips/

3. Slider for Bootstrap
https://seiyria.com/bootstrap-slider/

4. jQuery rangeRover
https://www.jqueryscript.net/form/Dynamic-Range-Slider-Plugin-jQuery-rangeRover.html

jquery document ready | $(document).ready()


jquery document ready | $(document).ready()

Sayfa tamamen yüklendikten sonra çalışmasını istediğiniz jquery kodları için aşağıdaki kodlardan istediğinizi kullanabilirsiniz.

1. kullanım:
$(document).ready(function() {
    console.log("Tüm sayfa yüklendi");
});


2. kullanım:
$(function() {
    console.log("Tüm sayfa yüklendi");
});

Wordpress'e Jquery Kodu Ekleme (functions.php)

Wordpress'e Jquery Kodu Ekleme (functions.php) | Add Additional Jquery Code into Wordpress

- Ftp'den, cpanel dosya yöneticisinden veya wordpress theme editor içinden functions.php dosyasını açın. Konumu: / httpdocs / wp-includes / functions.php
- En alta bu kodları ekleyin ve örnekteki gibi jquery kodlarınızı düzenleyin. Hepsi bu kadar. Böylece bu kodlar bütün sayfalarda çalışmış olacaktır.
function wpb_hook_javascript() {
    ?>
    <script>
    var $j = jQuery.noConflict();
    $j(function(){

        $j('.baslik').text('Deneme');
        $j('.metin').hide();

    });
    </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

jquery-formatCurrency TL Uyumlu Yapma


Rakamları para formatına çevirmek için jquery-formatCurrency eklentisini kullanıyor iseniz (ki tavsiye ederim) ve TL uyumlu çevirmesini istiyorsanız basitçe başarabilirsiniz:

1. https://code.google.com/archive/p/jquery-formatcurrency/ adresinden son versiyonu indirin.
2. jquery.formatCurrency.js dosyasını açın ve aşağıdaki değişikliği yapın:

    Gördüğünüz gibi EN için yazılmış kısmı TR haline çevirdik.
4. Sonra kaydedip bu dosyayı ftp den yükleyin.
5. Sayfanızda head etiketleri arasında bu js dosyasını çağırın:
<script src="jquery.formatCurrency.js"></script>
6. Sonrasında kullanımı basit. Diyelim rakamınız, id'si #ucret olan input giriş kutusunda yazıyor. Bu şekilde input kutusu içindeki rakamın formatını değiştirmiş olursunuz:
$('#ucret').formatCurrency();

Not: Dilerseniz regions['tr-TR'] şeklinde her dil için ayrı formatlar tanımlayabilirsiniz. O zaman aşağıdaki gibi kullanmanız gerekecektir:
$('#ucret').formatCurrency({roundToDecimalPlace: 2, region: 'tr-TR' }); //₺1.000,00


bootstrapValidator Tab Validation


bootstrapValidator İle Tab Kontrolü | bootstrapValidator Tab Validation

bootstrapValidator kullanıyorsanız ve formunuz yukarıdaki resimde olduğu gibi tablardan oluşuyor ise validation işlemi sağlıklı çalışmayacaktır. Çünkü diğer tab'a geçtiğinizde önceki tab'larda oluşan hatalar görülmediği için sanki formda hata yokmuş gibi işleme devam etmektedir. Aşağıda verdiğim js kodlarını eklediğinizde tab'ların hepsi hatasız olana kadar submit butonu disable olacaktır. Fakat öncelikli olarak şu kontrolü yapın: formda hata oluşunca ilgili tab kırmızı olmalıdır yani hata oluşan tab .bv-tab-error class'ına sahip olmalıdır. Böyle olduğunu kabul ederek devam ediyorum.

$(document).ready(function() {
    $('#ayarlarForm').bootstrapValidator({
        excluded: [':disabled'],
        ...
    }).on('success.field.bv', function(e, data) {
        //Tabs control
        if ( $('#tabs').find('.bv-tab-error').length ) {
            $("#btn-save-form").attr("disabled", true);
        }
    }).on('error.field.bv', function(e, data) {
        //Tabs control
        if ( $('#tabs').find('.bv-tab-error').length ) {
            $("#btn-save-form").attr("disabled", true);
        }
    });
});

Bu kadar. Artık hatalar kalkana kadar yani tablardan herhangi biri .bv-tab-error class'ına sahip değil ise submit butonu aktif olacak ve devam edilebilecektir.

Jquery İle Oluşturulan Button'un Click Fonksiyonu

Jquery İle Oluşturulan Button'un Click Fonksiyonu | Click Function of Button That Created with Jquery

1. İlk olarak jquery ile sayfamıza bir button ekleyelim.

$( document ).ready(function() {
    $("body").append("<input type="button" id="foo">");
});

2. Sonra bu butonun tıklanması fonksiyonunda bir uyarı mesajı çıkmasını sağlayalım.

✓  Doğru yöntem:
$(document).on("click","#foo",function() {
    alert("Merhaba");
});

✕  Yanlış yöntem:
$("#foo").on("click",function() {
    alert("Merhaba");
});

Not: Unutmayın buradaki fark; foo id'li butonun sayfanın ilk oluşturulması sırasında olmayıp sonradan sayfaya eklenmesidir. Bu nedenle ilk yöntemi kullanmalısınız. Eğer bu buton sayfa oluşturulurken zaten mevcut olarak geliyorsa o zaman her iki yöntem de kullanılabilir.

JQuery İle Yapılmış Seçme Örnekler

Resim Kaydırma (Manşet, Banner, İçerik...):


JQuery Dünyasına Hoşgeldiniz

Artık sitelerde sık sık görmeye başladığınız JQuery bence web sayfalarının görselliğinde yeni bir sayfa açtı. Size burda JQuery nedir diye anlatmayacağım. İnternette bu konu genişçe anlatılmış zaten. Fakat yararlandığım güzel ve seçme JQuery kaynak sitelerini ve yine seçme uygulamaları burada paylaşacağım.

JQuery Kaynak Siteler:
  1. http://tutorialzine.com/ 
  2. http://tympanus.net/codrops/ 
  3. http://zingocan.com/etiketler/jquery 
  4. http://plugins.jquery.com/ 
  5. http://www.bildirgec.org/etiket/jquery 
  6. http://css-tricks.com/downloads/
  7. http://flowplayer.org/tools/demos/index.html