Kod Parçacıkları – Sayfa 2 – aycan.net

jQuery Rating Uygulaması

Merhaba arkadaşlar, her projede farklım farklı yazmaktan yoruldum ve burada paylaşıyorum.

Html Kodları

<div class="rating">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
</div><!-- /. rating -->

</div>

Css Kodları

.rating{padding: 10px;}
    .rating a{width: 60px; height: 60px; background: url('stars.png') left top no-repeat; display: inline-block;  text-indent: -9999px; margin: 0 0;}
    .rating a.selected,
    .rating a.hover{background-position: right top; transform: scale(1.1); transition: transform ease-in-out .2s;}

.rating{padding: 10px;}

.rating a{width: 60px; height: 60px; background: url('stars.png') left top no-repeat; display: inline-block; text-indent: -9999px; margin: 0 0;}

.rating a.selected,

.rating a.hover{background-position: right top; transform: scale(1.1); transition: transform ease-in-out .2s;}

Js Kodları

rating(function (e)
{
    $('.callback').html('Selected : 1-' + e);
});

function rating(callback)
{
    $('.rating a').on(
    {
        mouseover : function () {
            $(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('hover');
        },
        mouseout : function () {
            $('.rating  a').removeClass('hover');
        },
        click : function ()
        {
            if($('.rating a').hasClass('selected'))
            {
                // Alert
                $('.rating a').removeClass('selected');
            } 

                $(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('selected').removeClass('hover');
            typeof callback === 'function' && callback.call( this, ($(this).index() + 1) );
        }
    });
}

rating(function (e)

{

$('.callback').html('Selected : 1-' + e);

});

function rating(callback)

{

$('.rating a').on(

{

mouseover : function () {

$(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('hover');

mouseout : function () {

$('.rating a').removeClass('hover');

click : function ()

{

if($('.rating a').hasClass('selected'))

{

// Alert

$('.rating a').removeClass('selected');

}

$(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('selected').removeClass('hover');

typeof callback === 'function' && callback.call( this, ($(this).index() + 1) );

}

});

}

Codepen:

See the Pen jQuery Rating Uygulaması by Aycan BÜLBÜL (@AycanB) on CodePen.

Aycan.net demo -> http://calismalar.aycan.net/rating/

$.trim() nedir ? nasıl kullanılır ?

$.trim() hemen hemen form işlemlerinin vazgeçilmezidir, var olan string ifadenin başında ve sonundaki boşlukları silmemize yardımcı olur.

$(document).ready(function(){

  $('button').on('click',function(){
    $('textarea').val
    (
      $.trim( $('textarea').val())
    )
  });
});

$(document).ready(function(){

$('button').on('click',function(){

$('textarea').val

(

$.trim( $('textarea').val())

)

});

Button tıklanıldığomda

textarea’nın içine, textareanın temizlenmiş valuesi’ni at.

See the Pen $.trim by Aycan BÜLBÜL (@AycanB) on CodePen.

jQuery Hash Change jQHashChange.js

Merhaba arkadaşlar,

Kısaca js hayatımıza çok girdi, artık sayfalar fiziksel olarak değilde bir internet sayfası içinde js işlemleri içinde bir kaç işlemi yaptırmaya başladık ancak bu yapıda geri ileri olmuyordu o yüzden bu yapıya 2. aşama olarak hash’lerle gitmeyi tercih ettik.

Hash konusunda “Ben Alman“ın yaptığı bir yapı var ancak ie7 ve alt sürüm tarayıcılar desteklemiyor o yüzden zamanında böyle birşey yazmıştım, paylaşmak istedim.

previousHash = '';

function jQHashChange( callback )
{
    
    var newHash = '';
    var url = window.location.href.split('#')[1];

    zaman = setInterval
    (
        function ()
        {
            newHash = (window.location.href.split('#')[1] || '');

            if( (previousHash !== newHash) && (newHash.length > 1) )
            {
                clearInterval(zaman);
                previousHash = newHash;
                
                if( callback )
                    callback(newHash);
                
                jQHashChange( callback );
            } 
        },100
    );
}

previousHash = '';

function jQHashChange( callback )

{

var newHash = '';

var url = window.location.href.split('#')[1];

zaman = setInterval

(

function ()

{

newHash = (window.location.href.split('#')[1] || '');

if( (previousHash !== newHash) && (newHash.length > 1) )

{

clearInterval(zaman);

previousHash = newHash;

if( callback )

callback(newHash);

jQHashChange( callback );

}

},100

);

}

Çalıştırma

jQHashChange( function (newHash){
    jQuery( '.newHashContent' ).append( '<div>New hash : ' + newHash + '</div>' );
});

jQHashChange( function (newHash){

jQuery( '.newHashContent' ).append( '<div>New hash : ' + newHash + '</div>' );

});

Çalışmayı buradan indirebilir ve buradan da ön izleme yapabilirsiniz.

Feedback için teşekkürler İbrahim (ibrahimd.com ) @DoktorCeykil 🙂

textarea karakter ve kelime sayımı

Ufak kod parçacıklarına devam ediyoruz. Bu aralar chat sistemleri ile çok haşir neşirim o yüzden tekrar yazmışken paylaşmak istedim.

Karakter Sayımı

// calistirma
textareaMaxCharacters( $('textarea.maxCharacters'),200, $('span.maxCharacters'));

function textareaMaxCharacters(obj, maxCharacters, countText)
{
    obj.on('keydown keyup keypress change',function ()
    {
        if( $( this ).val().length &gt;= maxCharacters )
        {
            $( this ).val( $( this ).val().substr(0,maxCharacters));
        } 
        countText.html( $( this ).val().length + ' Characters');
    });
}

// calistirma

textareaMaxCharacters( $('textarea.maxCharacters'),200, $('span.maxCharacters'));

function textareaMaxCharacters(obj, maxCharacters, countText)

{

obj.on('keydown keyup keypress change',function ()

{

if( $( this ).val().length >= maxCharacters )

{

$( this ).val( $( this ).val().substr(0,maxCharacters));

}

countText.html( $( this ).val().length + ' Characters');

});

}

Kelime Sayımı

Okumaya devam et textarea karakter ve kelime sayımı

Responsive çalışma yapan arkadaşların işini hızlandırmak için…

Merhaba arkadaşlar,

Twitter’da paylaştım ilgi gördü o yüzden sizleride bu konudan mahrum etmek istemedim.

Responsive psd to css işlemi yaparken tarayıcının genişliği çok önemli oluyor, her seferinde bunu ölçmek için ya measureit eklentisiyada firebug console‘u açıyorum jQuery ile dökümanın genişliğini alıyorum vs vs.

Yukarıdaki yöntemler zaman aldığı için bir kaç satırdan oluşan jquery yazdım, Tarayıcı resize olduğunda sitenin sağ alt köşesine bir span atıp, içine ekran genişliğini yazıyor. Okumaya devam et Responsive çalışma yapan arkadaşların işini hızlandırmak için…