aycan.net | aycan bülbül – Sayfa 6

Seçiciler ~ Selectors

Merhaba Arkadaşlar
Bugün üzerinde duracağım konu sitemizde bulunan nesnelerin özelliklerini bir seçici tarafından nasıl değiştirebileceğimiz olacak.

Her zaman ki örnekler göstererek daha iyi anlamanızı istiyorum ve html kodlarımı yazıyorum.

HTML

<body>
    <p id="Meyve">Meyve Türleri aşağıdaki gibidir.</p>
    <div>
        Meyveler
        <ul id="liste">
            <li class="e1">Erik</li>
            <li class="e2">Elma</li>
            <li class="e3">Çilek</li>
            <li class="e4">Kavun</li>
            <li class="e5">Portakal</li>
        </ul>
    </div>
    <p class="p1">Sebze Türleri Aşağıdaki Gibidir.</p>
    <p class="p2">Tahıl Ürünleri Aşağıdaki Gibidir.</p>
</body>

<body>

<p id="Meyve">Meyve Türleri aşağıdaki gibidir.</p>

<div>

Meyveler

<li class="e3">Çilek</li>

<li class="e4">Kavun</li>

<li class="e5">Portakal</li>

</ul>

</div>

<p class="p1">Sebze Türleri Aşağıdaki Gibidir.</p>

<p class="p2">Tahıl Ürünleri Aşağıdaki Gibidir.</p>

</body>

TAG SEÇİCİLER

Okumaya devam et Seçiciler ~ Selectors

Google Inbox davetiyesi nasıl alınır

Merhaba arkadaşlar,

Google Inbox davetiyesi almak için “inbox@google.com” mail adresine

Merhaba,

Inbox davetiye alabilir miyim acaba ?

Merhaba,

Inbox davetiye alabilir miyim acaba ?

yazdıp gönderdiğinizde bir kaç gün içinde davetiye geliyor.

jQuery .attr() nedir? nasıl kullanılır?

jQuery .attr() = attribute’larla işlem yapmamızı sağlıyor. // attiribute’nin TR’ye geçmiş tam karşılığı nedir bilmiyorum ama şöyle açıklayacak olursak

<input name="adınız" value="aycan" />

1	<input name="adınız" value="aycan" />

Burada name ve value bir attribute’dur. jQuery .attr() ile bu attribute’ler üzerinde değişiklik yapıyoruz.

$('.button1').click(function(){
    $('input').attr('value','.attr() ile içerik değiştirdik');
});

$('.button1').click(function(){

$('input').attr('value','.attr() ile içerik değiştirdik');

});

Yukarıda .attr() ile seçtiğimiz value attribute’sine yeni değer atadık.

Çoklu attribute eklemek

$('.button2').click(function(){
    $('input').attr({
      value :'çoklu attr ekliyoruz',
      disabled : 'disabled'
    });
});

$('.button2').click(function(){

$('input').attr({

value :'çoklu attr ekliyoruz',

disabled : 'disabled'

});

Burada ise obje şeklinde çoklu attribute ekledik / güncelledik.

.attr() ile değer almak

Değer atayabildiğimiz gibi var olan attribute değerlerinede .attr() yardımı ile okuyabiliyoruz.

$('.button3').click(function(){
    alert($('input').attr('value') )
});

$('.button3').click(function(){

alert($('input').attr('value') )

});

Ön izleme

See the Pen jQuery .attr() nedir? nasıl kullanılır? by Aycan BÜLBÜL (@AycanB) on CodePen.

Yedek olsun diye kodları burada da tutalım 🙂

<input type="text" value="deneme"/>
<button class="button1">attr ekle</button>
<button class="button2">çoklu attr ekle</button>
<button class="button3">attr ile değer almak</button>

<button class="button2">çoklu attr ekle</button>

<button class="button3">attr ile değer almak</button>

$('.button1').click(function(){
    $('input').attr('value','.attr() ile içerik değiştirdik');
});

$('.button2').click(function(){
    $('input').attr({
      value :'çoklu attr ekliyoruz',
      readonly : 'readonly'
    });
});

$('.button3').click(function(){
    alert($('input').attr('value') )
});

$('.button1').click(function(){

$('input').attr('value','.attr() ile içerik değiştirdik');

});

$('.button2').click(function(){

$('input').attr({

value :'çoklu attr ekliyoruz',

readonly : 'readonly'

});

$('.button3').click(function(){

alert($('input').attr('value') )

});

CV HTML paylaşımı

aycanbulbul.com.tr ‘deki cv’yi bir kaç kişi istedi ve bende paylaşmak istedim.

Ön izleme : www.aycanbulbul.com.tr

İndirmek için -> İndir

Bu tasarım özgürüm.net tarafından çizilmiştir.

HTML5 placeholder renk değiştirme

Ne güzel hayatımıza placeholder(bu bir attribute’dir.) girdi ve aşağıdaki aptal kodu yazmıyoruz.

<input type="text" onfocus="if(this.value == 'anahtar kelime giriniz') { this.value=''; }" onblur="if(this.value=='') { this.value='anahtar kelime giriniz'; }" value="anahtar kelime giriniz" >

1	<input type="text" onfocus="if(this.value == 'anahtar kelime giriniz') { this.value=''; }" onblur="if(this.value=='') { this.value='anahtar kelime giriniz'; }" value="anahtar kelime giriniz" >

Placeholder attribute kullanımı

<input type="text" placeholder="Adınız ve Soyadınız" />
<textarea placeholder="Kısa bir açıklama yazınız"></textarea>

1 2	<input type="text" placeholder="Adınız ve Soyadınız" /> <textarea placeholder="Kısa bir açıklama yazınız"></textarea>

Bu attr’yi kullandığımızda verdiğimiz, renk değerini ne verirsel verelim opacity değerini düşürüyor bunu engellemek için aşağıdaki tanımlamayı yapmamız gerekiyor.

:-moz-placeholder { /* Firefox 4 - 18 arası */
   opacity:1;
}

::-moz-placeholder { /* Firefox 19+ */
   opacity:1;

}

:-ms-input-placeholder { /* Internet Explorer 10+ */
   opacity:1;
}

::-webkit-input-placeholder { /* WebKit browsers */
    opacity:1;
    color: #000;
}

:-moz-placeholder { /* Firefox 4 - 18 arası */

opacity:1;

}

::-moz-placeholder { /* Firefox 19+ */

opacity:1;

}

:-ms-input-placeholder { /* Internet Explorer 10+ */

opacity:1;

}

::-webkit-input-placeholder { /* WebKit browsers */

opacity:1;

color: #000;

}

Burada gördüğünüz gibi placeholder attribute içine yazılan değere opacity değeri veriyor.

Firefox ve IE ailesinde (sadece IE10) opacity ile düzeltebiliyoruz ama Chrome koduna renk kodunu yazmadan düzeltme yapmıyor. // Sebebini anlamadım

[blockquote source=”Ufak bir not”]Placeholder Internet Explorer10 ve altında çalışmıyor,r bunun için internetten placeholder.js araması yapıp çalışır vaziyete getirebilirsiniz. [/blockquote]

Kaynaklar

http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
http://www.paulund.co.uk/html5-placeholder

Tüm kodlar :

<!DOCTYPE html>
<html lang="tr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>HTML5 Placeholder</title>
        <style>
            input[type=text]{width: 450px; height: 40px; font-size: 30px; color: #000; display: block; margin: 20px 0; font-family: 'Arial'; font-weight: bold;}
            textarea{width: 450px; height: 140px; font-size: 30px; color: #000; font-family: 'Arial'; font-weight: bold;}
            
.siyahYazi:-moz-placeholder { /* Firefox 4 - 18 arası */
   opacity:1;
}

.siyahYazi::-moz-placeholder { /* Firefox 19+ */
   opacity:1;

}

.siyahYazi:-ms-input-placeholder { /* Internet Explorer 10+ */
   opacity:1;
}

.siyahYazi::-webkit-input-placeholder { /* WebKit browsers */
    opacity:1;
    color: #000;
}
        </style>
    </head>
    <body>
        <div style='float:left;'>
            <h1>Placeholder işlem yapılmamış</h1>
            <input type="text" placeholder="Adınız ve Soyadınız" />
            <textarea placeholder="Kısa bir açıklama yazınız"></textarea>
        </div>
        <div style='float:left; margin-left: 50px;'>
            <h1>Placeholder işlem yapılmış</h1>
            <input type="text" placeholder="Adınız ve Soyadınız" class='siyahYazi'/>
            <textarea placeholder="Kısa bir açıklama yazınız" class='siyahYazi'></textarea>
        </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>HTML5 Placeholder</title>

<style>

input[type=text]{width: 450px; height: 40px; font-size: 30px; color: #000; display: block; margin: 20px 0; font-family: 'Arial'; font-weight: bold;}

textarea{width: 450px; height: 140px; font-size: 30px; color: #000; font-family: 'Arial'; font-weight: bold;}

.siyahYazi:-moz-placeholder { /* Firefox 4 - 18 arası */

opacity:1;

}

.siyahYazi::-moz-placeholder { /* Firefox 19+ */

opacity:1;

}

.siyahYazi:-ms-input-placeholder { /* Internet Explorer 10+ */

opacity:1;

}

.siyahYazi::-webkit-input-placeholder { /* WebKit browsers */

opacity:1;

color: #000;

}

</style>

</head>

<body>

<h1>Placeholder işlem yapılmamış</h1>

</div>

<h1>Placeholder işlem yapılmış</h1>

</div>

</body>

</html>

Demo / Ön izleme -> http://calismalar.aycan.net/placeHolder/