Gönderen: cssarsiv | Ağustos 12, 2008

jQuery ile “çek-bırak” özellikli nesneler oluşturmak

2. Yıl teması‘nda küçük bir atraksiyon olsun diye, sol üst köşedeki rozet resmini jQuery kullanarak hareketlendirmiştim. İşleyişi gayet basit. Mouse (fare) ile nesneyi tutup çekiyorsunuz ve bıraktığınız zaman eski yerine geri dönüyor. Basit birşey olmasına rağmen nedense çok ilgi gördü ve bunun nasıl yapıldığını anlatmamı isteyenler oldu. Bu yazıyı da onlar için özel hazırladım ;)

Ben bu atraksiyonu ilk defa moo.fx sayfasında görmüştüm. Siz de bu sayfaya girerek sağ-üst köşedeki 3 KB yazan nesneyi inceleyebilirsiniz. Bu sayfadaki kodlara gözgezdirmiştim ve aynı şeyi jQuery kullanarak yapmayı denemiştim. Aslında 3 basit adımda siz de buna benzer atraksiyonlar yapabilirsiniz ve ziyaretçilerinizi ufak da olsa etkileyebilirsiniz. Şimdi aşağıdaki adımları takip ederek bu işlemi yapmaya başlayalım:

  1. Html kodlaması
  2. Css ile biçimlendirme ve konumlandırma
  3. jQuery ile nesneye hareket kazandırma

1. Html kodlaması

İlk adımda bir içerik nesnesi belirteceğiz. Daha sonra da bu içerik nesnesinin içerisine, hareketlendirmek istediğimiz rozet nesnesini yerleştireceğiz. Şimdilik “rozet” nesnesinin içerisinde yalnızca v2 yazısı görünüyor ama daha sonra bunun arkaplanına css yardımıyla bir rozet resmi atayacağız.

  1. div id=“icerik”>
  2. <div id=“rozet”>v2</div>
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  4. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  5. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  6. nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  7. reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  8. pariatur. Excepteur sint occaecat cupidatat non proident…
  9. </div>

Bu adımda yaptığımız işlemlerin sonucunu Adım 1 sayfasında veya alttaki ekran görüntüsünde görebilirsiniz.

adım 1

2. Css ile biçimlendirme ve konumlandırma

İlk adımda, hareketlendirmek istediğimiz “rozet” nesnesini ve bunu içerisinde tutan “içerik” nesnesini oluşturmuştuk. İkinci adımda bu nesneleri css kullanarak biçimlendireceğiz. Ayrıca “rozet” nesnesinin yerini css ile konumlandırma (positioning) konusundan faydalanarak “içerik” nesnesinin sol-üst köşesine taşıyacağız. Şimdi bu işlemleri yapan css kodlarına gözatalım:

  1. <style type=“text/css”>
  2. div#icerik {
  3. position: relative;
  4. margin: 0 auto;
  5. width: 450px;
  6. padding: 5px 10px;
  7. border: 5px solid #444;
  8. background-color: #7f8183;
  9. color: #fff;
  10. font: normal 12px/18px “Trebuchet MS”;
  11. }
  12. div#rozet {
  13. position: absolute;
  14. width: 77px;
  15. height: 77px;
  16. top: -40px;
  17. left: -40px;
  18. text-indent: -9999px;
  19. background: url(rozet.png) 0 0 no-repeat;
  20. /* IE 6 için saydamlık probleminin çözümü */
  21. _background: transparent;
  22. _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘rozet.png’, sizingMethod=‘scale’);
  23. }
  24. </style>
  • Bu kodlar yardımıyla “icerik” nesnesini relative olarak, “rozet” nesnesini ise absolute olarak konumlandırdık. Daha sonra “rozet” nesnesinin genişlik ve yükseklik değerlerini, arkaplan olarak olarak kullandığımız “rozet.png” dosyasının genişlik ve yükseklik değerlerine eşitledik (77px). Hemen ardından top ve left değerleri ile “rozet” nesnesinin, “icerik” nesnesinin sol-üst köşesine yerleşmesini sağladık (-40px). Son iki satırda ise IE 6’nın png dosyalarıyla yaşadığı saydamlık problemine çözüm getirmiş olduk. Bu problem ile ilgili ayrıntılı bilgi edinmek isterseniz Internet Explorer 6 için saydam PNG desteği sayfasını okumalısınız.

    Bu adımda yaptığımız işlemlerin sonucunu Adım 2 sayfasında veya alttaki ekran görüntüsünde görebilirsiniz.

    adım 2

    3. jQuery ile nesneye hareket kazandırma

    Yapacak tek bir işlem kaldı: jQuery ve 2 adet eklenti yardımıyla “rozet” nesnesine hareket kazandırmak… Bu adımda bize EasyDrag ve Easing eklentileri de lâzım olacak. O yüzden bu eklentileri indirip jQuery ile birlikte web sayfamıza dahil etmeliyiz. Bu dahil etme işlemini şöyle yapabilirsiniz:

    1. <script type=“text/javascript” src=“jquery.js”></script>
    2. <script type=“text/javascript” src=“jquery.easydrag.js”></script>
    3. <script type=“text/javascript” src=“jquery.easing.js”></script>
    Artık herşey hazır olduğuna göre rozet nesnesini hareketlendirecek kodlarımıza bakalım:
    1. <script type=“text/javascript”>
    2. $(document).ready(function(){
    3. $(“div#rozet”).easydrag();
    4. $(“div#rozet”).ondrop(function(){
    5. $(‘div#rozet’).animate(
    6. { top:‘-40px’, left:‘-40px’},
    7. {duration: 1000, easing: ‘easeOutElastic’}
    8. );
    9. });
    10. });
    11. </script>
  • Öncelikle $("div#rozet").easydrag(); kodu ile rozet nesnesinin sürüklenebilir olmasını sağlıyoruz. Sonraysa $("div#rozet").ondrop(); kodunu kullanarak sürüklenen nesne bırakıldığında herhangi bir işlem yapılmasını belirtiyoruz. Bu iki kod EasyDrag eklentisinin bize sağladığı özelliklerdir.

    Bu işlemlerden sonra ondrop() fonksiyonu tetiklendiği anda rozet nesnesinin ilk top ve left değerlerine geri dönmesini jQuery’nin yerleşik fonksiyonu olan animate() ile sağlıyoruz. Bu işlem 1000 milisaniyelik bir sürede gerçekleşiyor. Ayrıca bu esnada rozet nesnemize Easing eklentisinin easeOutElastic isimli efektinin uygulanmasını belirtiyoruz. Tüm bu işlemleri yapmamızı sağlayan animate() fonksiyonu hakkında detaylı bilgiyi jQuery ve Efekt işlemleri isimli yazımda bulabilirsiniz.

    Bu son adımda yaptığımız işlemlerin sonucunu Adım 3 sayfasında görebilirsiniz.

    adım 3

    Sonuç

    Gördüğünüz gibi son derece kolay bir işlem. Dikkat etmemiz gereken şey, ilk başta belirlemiş olduğumuz adımları tek tek ve sırayla uygulamaya geçirmiş olmamızdır. Aslında basit gibi görünen bu konuda pekçok bilgiyi de içiçe kullanmış olduk. O yüzden arada sırada böyle atraksiyonlar hazırlamak, öğrendiğimiz bilgileri somut olarak kullanma adına faydalı oluyor. Siz de mutlaka okuduğunuzla kalmayıp, buradaki işlemleri kendi kendinize uygulayınız. Bu yazıyla ilgili dosyaları ise bu bağlantıdan bilgisayarınıza indirebilirsiniz.

    Kaynak : Eburhan

  • Gönderen: cssarsiv | Mayıs 17, 2008

    [ fatih hayrioğlu ]26 Nisan Seçmeler

    • Metin alanı girdilerini otomatik değer önerme işini ajax yardımı olmadan yapmak. Bağlantı
    • Javascript kodu yazanlar için jquery dersi. Bağlantı
    • 50′den fazla anlatımlı CSS kod örneği. Bağlantı
    • jQuery ile Metin girdi alanların şablonlarını belirlemek. Güzel bir örnek Bağlantı
    • Lightbox uygulamalarının karşılaştırma listesi. Bağlantı
    • Firefox 3′de favoriler kısmı yenilenmiş. Bağlantı
    • Smashing Magazine’den web’de yazı hakkında güzel bir makale. Bağlantı
    • CSS ve jQuery ile sekmeli içerik yapımı. Bağlantı
    • javascript ile garip modu(quirk) yakalama. Bağlantı
    • WorPress kullanıcı girişini jQuery yardımı ile lightbox benzeri şekle sokmak. Bağlantı
    • WordPress günlüğünüzü optimize etmenin yolları. Bağlantı
    • Okunmasında yarar olan 6 javascript makalesi. Bağlantı
    Gönderen: cssarsiv | Nisan 11, 2008

    Css – Grafiksiz Yatay Menu

    Websitelerinin degismez ogelerinden biri de link menuleridir. Bircok website, bu menuleri daha da ilginc bir gorsel yapiya sokmak icin web tasariminda “roll-over” adini verdigimiz efektler kullanir. Bu Roll-Over efektini gerceklestirmek icin bircok websitesi JavaScript ve grafik kullanirlar. Halbuki ayni efekti saglamak icin CSS kullanabilirsiniz. Bu sayede, hem siteniz JavaScript’e bagimli kalmaz hem de daha da erisilir bir hale gelir.

    Size, CSS ile roll-over efektinin nasil pisirilecegini ogretmeye calisacagim bu yazida.

    Bu tarif icin gerekli malzemeler:

    2 vazifeli grafik (istege bagli)
    3 parca CSS kodu
    1 tutam HTML listesi
    Iki vazifeli grafik, bizim, bir resim ile iki kus vurmamizi saglayacak. Boylece roll-over yaratmak icin “on” ve “off” diye iki tane resime gerek kalmayacak. Benim bu ornekte kullanacagim resim asagida gorulmektedir:

    Yukarida gordugunuz gibi, bir grafik icinde, hem “off” grafigi, hem de “on” grafigi mevcut. Onemli nokta bu grafiklerin boyutlarinin ayni olmasi ve bu grafikleri iceren ana grafigin (yukarida goruldugu gibi) yuksekliginin, bu iki grafigin yuksekliklerinin toplamina esit olmasi.

    Grafigimiz hazir. Simdi menuyu olusturacak HTML’i yazmaya baslayabiliriz. Ben, menu icin HTML 4.01 icinde mevcut olan <ol> elementini kullanacagim. <ol>’in <ul> den tek farki, <ul>’nin sirasiz liste; <ol>’nin ise sirali liste olusturmasi. Eger bir menunun, siralanmis bir liste oldugunu dusunursek, <ol> gibi bir HTML elementinin bu ornek icinde kullanilmasinin daha anlamli olacagini dusunuyorum. Iste HTML kodumuz asagidaki gibi olacaktir:

    <ol id=”menu”>
    <li><a href=”#” title=”Birinci Link icin buraya tikla ” accesskey=”1″>Birinci Link</a></li>
    <li><a href=”#” title=”Ikinci Link icin buraya tikla” accesskey=”2″>Ikinci Link</a></li>
    <li><a href=”#” title=”Ucuncu Link icin buraya tikla” accesskey=”3″>Ucuncu Link</a></li>
    <li><a href=”#” title=”Dorduncu Link icin buraya tikla” accesskey=”4″>Dorduncu Link</a></li>

    <li><a href=”#” title=”Besinci Link icin buraya tikla” accesskey=”5″>Besinci Link</a></li>
    </ol>

    Menu listemizi olusturmak icin <ol> liste elementini kullandik. Ayrica <ol> listemize, CSS icinde kullanacagimiz ve referanslarda bulunacagimiz bir id verdik. id=”menu” CSS icinde, bu listenin nasil gorunmesi gerektigini belirlememize yarayacak. Ayrica linkler icinde hem title hem de accesskey elementlerini kullandik.

    title ve accesskey, erişilebilirlik icin onemli HTML elementleridir. title ile bu linkler hakkinda engelli kullanicilara daha fazla bilgi verebiliriz ve accesskey ile de fare kullanamayan engelli ziyaretcilerimizin klavye yardimi ile site icinde hareket etmelerini saglayabiliriz. Ornegin ALT+3 klavye tuslari bizi “Ucuncu Link” elementine goturecektir.

    Butun bu asamalardan sonra CSS’imizi yazabiliriz. CSS bolumunde size 3 degisik CSS yazarak, 3 degisik menu sonucu elde etmenize yardimci olacagim. Birinci CSS size grafiksel dikey bir menu verecek.

    #menu {margin: 0; padding: 0 0 20px 10px; font: bold 12px/14px Verdana, sans-serif; border-bottom: 1px solid #A7A7A7;}
    #menu ol, #menu li {display: inline; list-style-type: none;}
    #menu a:link, #menu a:visited {float: left; margin: 0 10px 4px 10px; text-decoration: none; color:#999; }
    #menu a:hover {border-bottom:4px solid #A7A7A7; padding-bottom:2px;

    background:transparent; color:#900; }

    Yukaridaki CSS’de de gordugunuz gibi, grafiksiz olarakda, basit ama roll-over efektli menuler olusturabiliriz. Burada tum yaptigimiz, grafigi devreden cikarip, onun yerine border yani kenar cizgileri ile oynama yapmak.

    Gönderen: cssarsiv | Nisan 11, 2008

    Cssvista Stil Kontrol Ve Düzenleme

    Bu program ile CSS dosyanıza Internet Explorer ve FireFox ile önizleme yapabilir,css dosyanızı test edebilirsiniz.
    CSS dosyanız üzerinde yaptığınız değişiklikleri otomatik olarak uyguluyor ve size önizleme olarak tek bir sayfada görüntüleme imkanı sunuyor.
    Ayrıca CSS kodlamalarında hata yaptığınızda program hatanın ne olduğunu nerede olduğunu tespit ediyor.
    Kullanımı çok kolay ve ücretsiz bir programdır.

    İndirmek için http://litmusapp.com/labs adresine göz atın.
    Your e-mail kısmına e-posta adresinizi girerek program linklinin e-mail adresinize gelmesini sağlayabilirsiniz.

    Gönderen: cssarsiv | Nisan 11, 2008

    Cssvista Stil Kontrol Ve Düzenleme

    Bu program ile CSS dosyanıza Internet Explorer ve FireFox ile önizleme yapabilir,css dosyanızı test edebilirsiniz.
    CSS dosyanız üzerinde yaptığınız değişiklikleri otomatik olarak uyguluyor ve size önizleme olarak tek bir sayfada görüntüleme imkanı sunuyor.
    Ayrıca CSS kodlamalarında hata yaptığınızda program hatanın ne olduğunu nerede olduğunu tespit ediyor.
    Kullanımı çok kolay ve ücretsiz bir programdır.

    İndirmek için http://litmusapp.com/labs adresine göz atın.
    Your e-mail kısmına e-posta adresinizi girerek program linklinin e-mail adresinize gelmesini sağlayabilirsiniz.

    Gönderen: cssarsiv | Nisan 11, 2008

    CSS Menüler

    1)

    2)

    3)

    4)

    5)

    6)

    7)

    8)

    9)

    10)

    11)

    12)

    13)

    Kategoriler