Yazar: Tayfun Erbilen

23. Gün – jQuery Dersi 23

Yirmi üçüncü jQuery dersinde aşağıdakileri öğrendik;
– jQuery has Metodu
– jQuery children Metodu
– jQuery prev Metodu

.has() Metodu
Seçilen nesne içerisinde, has metoduna geçirilmiş nesnenin olup olmadığını bulmamızı sağlar.. Örneğin div içinde strong nesnesi olup olmadığını kontrol edelim;

if ($("div").has("strong").length){
    alert("strong nesnesi bulundu!");
}

.children() Metodu
Seçilen nesne içerisinde ki, çocuk nesneleri seçmemizi ve işlem yapmamızı sağlar. Örneğin div içerisindeki tüm çocuk nesneleri seçip renklerini değiştirelim;

$("div").children().css("color","red");

Ya da sadece strong çocuk nesneleri seçip renk değiştirelim;

$("div").children("strong").css("color","blue");

Ya da kaç tane çocuk seçicisi olduğunu öğrenelim;

alert($("div").children().length);

.prev() Metodu
Seçilen nesneden bir önceki nesneyi seçmemizi sağlar. Örneğin div nesnesinden önce hangi nesne varsa onu seçip arkaplan rengini değiştirelim;

$("div").prev().css("background","yellow");

Ya da şöyle bir koşulumuz olsun.. Div nesnesinden hemen önce eğer a nesnesi varsa onu seçip işlem yapalım, a nesnesi değilde başka bir nesne varsa işlem yapmayalım;

$("div").prev("a").css("background","red");

IE7 Margin Eksi Değer Sorunu

Merhaba arkadaşlar, bu yazıda sizlere ie7’de oluşan bir css hatasını ve çözümünü göstereceğim..

Sorun;
Eksi margin değeri verdiğimiz nesnelerde ie7’de malesef değer işlemiyor.. Örnek verecek olursak;

.box {margin: 0 -10px}

Yukarıdaki kod malesef ie7’de çalışmıyor.. Yani sağdan ve soldan 10px içeriye doğru çekmiyor nesneyi..

Çözümü;
IE7’de düzgün çalışması için overflow: hidden değerini eklememiz yeterli olacaktır. Yani;

.box {margin: 0 -10px; overflow: hidden /* ie7 */}

Başka ipuçlarında görüşmek üzere!

jQuery Mobile Framework Kullanımı

Uzun bir süre önce çektiğim dersleri yeniden yükledim.. Bu dersler ile projelerinizin mobil versiyonlarını hazırlayabilirsiniz.. Bunu jQuery Mobile Framework’ünü kullanarak kolayca yapabiliyorsunuz, zaten dersleri incelediğinizde ne kadar kolay olduğunu anlayacaksınız ???? Yararlı olması dileğiyle.

Giriş Dersi;

Veri alışverişi için kullandığımız data’ların niteliklerini bu bölümde inceleyeceğiz.. Yazı olarak türkçeleştirdiğim dökümanıda sizler için ekliyorum;

Button (data-role=”button”)

data-corners = ovallikleri ayarlamamızı sağlar.. Sabit değeri true’dur.. Ve true | false değerleri alabilir.. False değeri aldığında ovallikler kalkacaktır.
data-icon = Nesneye bazı belli başlı ikonları atamamızı sağlar.. Bu niteliğe değer olarak şunları girebiliriz; (home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search)
data-iconpos = Nesneye uygulanan ikonun pozisyonunu belirler.. Alabileceği değerler (left | right | top | bottom | notext)’dir.. Sabit değeri left’dir.. Ve notext olarak belirlendiğinde nesnede sadece ikon kalacaktır.. Adı üstünde metinsiz = no text ????
data-iconshadow = Nesneye uygulanan ikonun gölgesinin varolup olmayacağını belirliyoruz.. Sabit değeri true’dur. Alabileceği değerler (true | false)’dur. False değerini uyguladığınızda birşey değişmiyormuş gibi gelebilir ilk etapta, o yüzden ikona yakınlaşın ve dikkatlice bakın gölgenin gittiğini göreceksiniz ????
data-inline = Bu nitelikle nesneyi blok seviyesinden satıriçi (inline) seviyesine getiriyoruz.. Yani nesnenin genişliği içerdiği içeriğe bağlı olarak artıp, azalıyor.. Sabit değeri false’dır.. Alabileceği değerler ise (true | false).. True değeri belirlendiğinde nesne satıriçi hale gelir.
data-shadow = Nesnenin gölgesinin varolup olmayacağını belirleriz.. Sabit değeri true’dur. Alabileceği değerler ise (true | false)..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise c’dır.

Checkbox (data-role gerektirmez)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
Not: Tipi checkbox olması yetmiyor inputun.. Ayrıca id’si olmalı ve bu id’ye ait labeli oluşturulmalı.. Örnek verecek olursam;

<input type="checkbox" id="prototurk" />
<label for="prototurk">Kuralları Kabul Et</label>

Collapsible (data-role=”collapsible”)

data-collapsed = Açılır içeriğin otomatik olarak açık gelip gelmeyeceğini bu nitelik ile belirleriz.. Sabit değeri true’dur.. Yani bunun anlamı içerik kapalı gelsin tıklandığında açılsındır kısaca ???? False yaparsak açık gelecektir.. Tıklandığında yine kapanabilme özelliği var. Alabildiği değerler (true | false)
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-content-theme = Nesnenin kapalı olan içeriğinin temasını değiştirmek için kullanılır.. Yani tıkladığımızda açılacak olan nesnenin teması ???? Alabileceği değerler data-theme niteliğindekiler ile aynıdır. (a | b | c | d | e)..

Collapsible set (data-role=”collapsible-set”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-content-theme = Nesnenin kapalı olan içeriğinin temasını değiştirmek için kullanılır.. Yani tıkladığımızda açılacak olan nesnenin teması ???? Alabileceği değerler data-theme niteliğindekiler ile aynıdır. (a | b | c | d | e).. (Ufak bir hatırlatma yapayım bunu ayarladığınızda birşey değişmiyorsa daha önce siz collapsible’da tema atadığınızdan olabilir)

Dialog (data-role=”page” için data-rel=”dialog”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
(Birkaç niteliği daha var.. Ancak çalışmadığı ya da henüz ben çalıştıramadığım için eklemedim.. Bunlara jquerymobile.com’da docs bölümünden bakabilirsiniz.)

Content (data-role=”content”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Field container (data-role=”fieldcontain”)

label ile form elemanlarının yanyana dizilmesini sağlar.

Flip toggle switch (data-role=”slider”)

Bu nitelik select tagına uygulanıyor..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-track-theme = Select’deki değer değiştikten sonraki kısmın rengini belirler.. Alabileceği değerler data-theme ile aynıdır.

Footer (data-role=”footer”)

Adının evrenselliğinden bileceğiniz gibi sayfanın en altını temsil eder ????
data-id = Benzersiz bir kimlik atayıp düzenlemek isterseniz bu niteliği kullanabilirsiniz.
data-position = Footer’ın pozisyonunu belirler.. Tek bir değeri vardır oda fixed’dır.. Yani içerik kaysa bile footerın altta sabit kalmasını sağlar..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Header (data-role=”header”)

Adının evrenselliğinden bileceğiniz gibi sayfanın en üstünü temsil eder ????
data-position = Header’ın pozisyonunu belirler.. Tek bir değeri vardır oda fixed’dır.. Yani içerik kaysa bile headerın üstte sabit kalmasını sağlar..
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Link (data-role=”button”)

data-ajax = Bu değer sabit olarak true’dur.. Eğer false atanırsa ajax etkileşimi duracaktır.. Normal bir link gibi sayfa yenilenerek geçiş yapılacaktır. Alabileceği değerler (true | false)
data-rel = Bu nitelik 3 değer alır.. Bunlar (back | dialog | external).. “back” yazılırsa bir önceki sayfaya geri döndürme linki oluşturmuş oluruz.. “dialog” yazılırsa açılacak linki dialog penceresinde açtırmış oluruz.. “external” yazılırada herhangi bir dış bağlantıya gideceğimizi belirtiriz ????
data-transition = Veri geçişi anlamına gelen bu nitelik ile sayfalar arası nasıl geçiş yapacağımızı belirliyoruz.. Alabileceği değerler (slide | slideup | slidedown | pop | fade | flip).. Sabit değeri slide’dır.

Listview (data-role=”listview”)

Adındanda anlaşılacağı üzere bu nitelik listeler içindir.
data-dividertheme = Listeleri bölen başlık olarak belirlenmiş (data-role=”list-divider”) listelerin temasını değiştirmek için kullanılır. Alabildiği değerler (a | b | c | d | e)..
data-filter = Listelerde filtreleme yapmak istersek bu niteliğe true değerini verebiliriz.. Böylece bir arama kutusu belirir ve burada filtreleyerek listelerde arama yapabiliriz.
data-filter-placeholder = filtrelemek için çıkan arama kutusunun default yazısını değiştirir.. placeholder niteliğini bilenler bilecektir ????
data-filter-theme = filtremele için çıkan arama kutusunun temasını değiştirmek için kullanılır.. Alabileceği değerler tahmin ettiğiniz gibi (a | b | c | d | e)..
data-inset = Türkçe karşılığını ifade ediyormu bilmiyorum ama true değerini verirseniz listenizi adam ediyor diyebiliriz ???? margini ayarlıyor, köşeleri yuvarlıyor, kutunuza gölge veriyor vs…
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Listview

Adındanda anlaşılacağı üzere bu nitelik listeler içindir. Sadece li tagları için daha doğrusu ????
data-role = li taglarında başlık yapmak istediğimize bu niteliği atayıp değer olarakda list-divider yazarız.. 
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Page (data-role=”page”)

data-overlay-theme = sayfa dialog ile açıldığında sayfanın temasını belirleyebiliriz.. Alacağı değerler (a | b | c | d | e)
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-title = Dialog ile sayfa açıldığında title’ı dinamik olarak değiştirmek için kullanılır.. Başlık girilir değer olarak ????

Radio button (type=”radio”)

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Select

data-icon = Select’in ikonunu değiştirmek için bu niteliği kullanırız.. Alabileceği değerler (home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search)
data-iconpos = İkonun pozisyonunu belirlemek için bu niteliği kullanırız.. Alabileceği değerler (left | right | top | bottom | notext).. Sabit değeri right’dır.
data-inline = Select’i blok seviyesinden satıriçi (inline) seviyesine getirmek için bu niteliğe true değerini vermemiz yeterlidir.. Böylece selectin genişliği içerdiği içerik kadar olacaktır. Aldığı değerler (true |false).. Sabit değeri false’dır.
data-native-menu = Select’e bastığımızda açılan kısmı menü şeklinde göstermek istersek bu niteliğe false değerini atamamız gerekir.. Alabileceği değerler (true | false).. Sabit değeri ise true’dur.
data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.

Slider (type=”range”)

Ve işte input slider ???? iPhone’de sıkça kullanılan bir form elemanı bilirsiniz.. İnput’un type niteliği range olmalıdır. Ayrıca value, min ve max nitelikleride belirlenmelidir.. Kod;

<input type="range" name="slider" value="60" min="0" max="100" />

data-theme = Nesneye belirli temaları atamak için kullanılır.. Alabileceği değerler (a | b | c | d | e).. Sabit değeri ise a’dır.
data-track-theme = slider’ın arka kısmının temasını ayarlamak için kullanılır. Alacağı değerler data-theme ile aynıdır.

Tema Yapımı;

jQuery Masonry ile Nesneleri Hizalamak

Çoğumuzun ilk başta facebook timeline’da gördüğü bu olay hepimizi bunun nasıl yapıldığı konusunda meraklandırdı.. Daha sonra elbette kullanımı arttı, artık neredeyse birçok sitede bu kullanım mevcut.. Peki bu nesneleri hizalama nasıl yapılıyor? Biz “masonry” eklentisini kullanarak bu işlemi kolayca yapacağız..

Eklenti Adresi;
http://masonry.desandro.com/index.html

Kaynak Dosyaları İndirin;
http://yadi.sk/d/9yb7Lv400gEul

22. Gün – jQuery Dersi 22

Yirmi İkinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery scroll Metodu
– jQuery scrollTop Metodu
– jQuery scrollLeft Metodu

Scroll Metodu Kullanımı;

$(window).scroll(function(){
	$("body").append("Scroll Hareket Etti!");
});

scrollTop Metodu Kullanımı;

var i = 0;
$("button#asagi").click(function(){
	$(window).scrollTop(i += 50)
;})

scrollLeft Metodu Kullanımı;

var i = 0;
$("button#saga").click(function(){
	$(window).scrollLeft(i += 50);
})

Kaynak Dosyaları İndirin;
http://yadi.sk/d/0fKfC4G30UbPL

Htaccess ile WWW Kaldırma / Ekleme

Merhaba arkadaşlar, benim her zaman problem yaşadığım bir konudur bu.. Her projemde de bunu uygularım.. Örneğin site adresini www ile belirlemişimdir.. Ancak www olmadan girince de site açıldığı için, ajax dosyamın yolu www ile belirlendiği için ajax’lar çalışmaz.. Bazı sunucularda www ile giriş yapıp, www’süz siteyi açtığında sanki giriş yapmamış gibi gözükür vs.. Bu tür sorunların önüne geçmek için ya www ile girmesini sağlayacağız kullanıcının ya da hiç www kullanmadan girmesini.. Nasıl yaparız?

Eğer anadizinde bir htaccess dosyanız varsa onu açın ya da bir tane oluşturun ve şunları ekleyin;

RewriteEngine on
RewriteCond %{HTTP_HOST} ^siteadi\.com [NC]
RewriteRule ^(.*)$ http://www.siteadi.com/$1 [L,R=301]

Yukarıdaki örnekte, nasıl girerse girsin her zaman www olarak yönlenecek.. Örn: ogretiyor.com olarak girin sizi www.ogretiyor.com’a yönlendirdiğini görebilirsiniz..

Bunun tam tersini nasıl yaparız? Yani www ile girse bile www ekini kaldıracak.. O zaman kodu şöyle değiştiririz;

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.siteadi\.com [NC]
RewriteRule ^(.*)$ http://siteadi.com/$1 [L,R=301]

Evet artık böyle bir problemimiz kalmadı, kolay gelsin ????