13 Nisan 2014 Pazar

jQuery ile Haber Akışı (News Ticker)

news ticker


Geçtiğimiz hafta içerisinde bize elektronik posta ile ulaşan Gürkan isimli arkadaşımız, News Ticker yapımı ile ilgili bir makale yayınlamamızı istemişti. Gürkan’ın isteği üzerine, bugün jQuery‘nin nimetlerinden yararlanarak işlevsel bir haber akışı hazırlayacağız.


ornek goruntule


News Ticker (Haber Akışı) nasıl hazırlanır?


News Ticker hazırlamak için kullanabileceğiniz onlarca script mevcut. Hatta isterseniz küçük bir uğraş ile bu işin üstesinden CSS ile de gelebilirsiniz. Bu makalemizde jQuery ile çalışan Jquery News Ticker yazılımını kullanacağız. İsterseniz uygulamanın orjinal adresine buradan gidebilirsiniz.


İlk olarak jquery-ticker.js ve ticker-style.css dosyalarını indirin.


Daha sonra sayfanızın <head></head> elemanları arasında bu tanımlamaları yapın.



<link href="ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript">$(function () $('#js-news').ticker(););</script>

Bu kısımdaki js-news id tanımlaması, hangi eleman içerisinde haber akışını kullanacağımızı belirtiyor.


Son olarak haber başlıklarımızı ekleyerek işlemi tamamlıyoruz.



<ul id="js-news" class="js-hidden">
<li class="news-item">Bu bir haber akışı örneğidir.</li>
<li class="news-item">jQuery ile hazırlanmıştır.</li>
</ul>

Başlık sayısını istediğiniz kadar arttırıp azaltabilirsiniz.


Şimdi gelelim ayarlar ekranına.


Akış yönü ve hızı, başlıklar ve kontrol çubukları gibi öğeler nasıl değiştirilir?


Daha önce indirdiğimiz jquery.ticker.js dosyasını açıyoruz. En alttaki yorum komutunu buluyoruz ve onun da altında bulunan ayarları inceliyoruz.


// plugin defaults - added as a property on our plugin function

Teker teker bakalım.


  • speed : Verilerin daktilo efektiyle yazılış hızı.

  • ajaxFeed : Haber akışını ajax ile çekmek.

  • feedUrl : Dışarıdan veri çekecek miyiz? Çekeceksek dosya kendi sunucumuzda olmalı.

  • feedType : Dışarıdan veri çekeceğimiz dosya uzantısı.

  • displayType : ’reveal’ ve ‘fade’  olarak değiştirebileceğimiz verinin görünüş efekti.

  • htmlFeed : Haber akışı içerisinde HTML girişine izin verilsin mi?

  • debugMode : Eğer aktif edilirse oluşabilecek sorunlar açıklayıcı hata tanımlarıyla gösterilir.

  • controls : Kontrol çubukları gösterilsin mi?

  • titleText : Haber kutucuğu başlığı.

  • direction : ’ltr’ veya ‘rtl’ değiştirilebilir.

  • pauseOnItems : Her haberde kaç milisaniye beklensin?

  • fadeInSpeed : Haber girişi kaç milisaniyede gerçekleşsin?

  • fadeOutSpeed : Haber çıkışı kaç saniyede gerçekleşsin?

Kapanış


Adobewordpress ailesi olarak sosyal ağ ve elektronik posta adresimizden bize yolladığınız talepleri sıklıkla değerlendiriyoruz. Bugün de yine sizlerin talebini dinleyerek jQuery ile News Ticker uygulaması hazırladık.


Bir sonraki makalemizde görüşmek üzere hoşçakalın.



jQuery ile Haber Akışı (News Ticker)
Gönderen zaman: Hiç yorum yok:

3 Nisan 2014 Perşembe

CSS ile Duyarlı Altı Çizgili Yazı

css underline HTML serüvenine başladığımızda kullandığımız bold, underline ve italic gibi tanımlamalar CSS‘in gelişiyle değişime uğradı. Daha önceleri <u></u> elemanı ile yaptığımız altı çizgili yazılar artık CSS’in text-decoration:underline tanımlamasıyla yapılır hale gelmişti. İşlem yapısıyla birlikte yelpazemiz de genişledi. Bu tip yazı elemanlarının CSS’in kontrolü ile gerçekleşir olması, özgünleştirme ayarlarını da beraberinde getirdi.


Bu makalemizde sizlere altı çizgili yazının web üzerindeki son evriminden bahsedeceğiz. Satır çizgisini geçen (kuyruklu, örn: y, ğ, p, j, g) harfleri gizlenmiş bir gölge ile imkansız gibi gözüken tipografik yapıya çevireceğiz.


Nasıl yapılır?


Altı çizgili yazı yapmak için ister HTML kodlarından isterseniz de CSS kodlarından faydalanabilirsiniz. En temel anlamda altı çizgili yazı hazırlamamıza yarayan inline tanımlamalar şu şekilde;


HTML tarafında


<u>Altı çizgili yazı</u>

CSS tarafında


ptext-decoration:underline

 


<p>Altı çizgili yazı</p>

elemanları ile yapılabilir.


Peki ya kuyruklu harfler?


Kuyruklu harfler için yapacağımız işlem ise biraz farklı. Ancak çeşitli yazı tipleri için farklı çalışmalar yapmamız gerekmekte. Bir örnek ile başlayalım.



span 
 font: 30px Tahoma, sans-serif;
 text-shadow: 0 1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
 position: relative;


span::before 
 content: '';
 border-bottom: 1px solid #000;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 5%;
 z-index: -1;

Üstteki CSS tanımlamalarında dikkatinizi çekmek istediğimiz birkaç satır var. 30px büyüklüğündeki yazı tipimize göre bir gölgelendirme hazırladık, yani hemen altındaki text-shadow veya :before satırındaki bottom değerleri 30 piksellik bir Tahoma yazı tipinde kusursuz sonuç vermektedir. Tipografik olarak yaptığınız değişiklerde sorun yaşamanız halinde değiştireceğiniz tanımlamalar text-shadow ve bottom olmalı.


Şimdi tek satırlık HTML kodumuzu ekleyelim.


<span>adobewordpress.com</span>

Bu kadar.


Kapanış


Adobewordpress ailesi olarak tipografik CSS örneklerine ilk el atışımız değil bu. Tipografiyi web üzerinde kullanmak, özellikle de CSS3′ün büyüttüğü oyun sahamız içerisinde sınırları zorlamak fazlasıyla eğlenceli olabiliyor. Bugün de bu örneklerden biriyle sizlerle olduk.


Bir sonraki makalemizde görüşmek üzere, hoşçakalın.



CSS ile Duyarlı Altı Çizgili Yazı
Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)