pillinetwork hesabınızla giriş yapın.

XHTML, CSS, jQuery - ManÅŸetler ModernleÅŸsin!

Manşete moden yaklaşım
Manşete moden yaklaşım
Birçok haberi aynı anda yayınlamak zorunda kalan haber siteleri her haberi manşetten verememektedir. Dolayısıyla manşet haberinin sunumu için özel teknikler geliştirirler. Yalnız ne yazık ki önemli Türk haber siteleri manşet haberi sunumunda modern tekniklerden uzaktırlar.

Yaptığım bu çalışma haber manşetlerinin modern tekniklerle yani XHTML, CSS ve jQuery kullanarak sunulmasına yöneliktir. Bu tekniklerin kullanımı sayfa bir arama motoru tarafından belleğe alındığında (cachelendiğinde) gereksiz HTML ve diğer programlamaya yönelik kodlar ile cache'i boşuna doldurmamak ve yazının bellekte koddan daha fazla olmasını sağlayabilmek için önemlidir. Yani bu tekniklerin kullanımı "Arama Motoru Optimizasyonu" için kaçınılmazdır.

Manşet haberlerinin sunumuna yönelik bu uygulamayı isterseniz ürün sunumuna yönelik veyahut da başka amaçlara yönelik uygulayabilirsiniz. Orasını kullanıcının hayal gücüne bırakarak olaya giriş yapalım.

XHTML kodumuz söyle olacak. Burada manşet haberlerini ve resimlerini içeren bir liste görmektesiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="headlines">
<ol>
<li class="current">
<p><a href="http://www.kodaman.org/yazi/jquery-datepicker-de-pazar-gunlerini"><img alt="jQuery datePicker'de Pazar Günlerini Engellemek" src="http://www.inmc.co.uk/headlines/3.jpg" width="146" height="110">jQuery - Pazar günlerini engellemek</a></p>
</li>
<li>
<p><a href="http://www.kodaman.org/yazi/iptc-standartinin-kullanimi-ve-fotograflari"><img src="http://www.inmc.co.uk/headlines/2.jpg" alt="IPTC standartının kullanımı ve fotoğrafları anlamlandırmak" width="146" height="110">IPTC standartının PHP'de kullanımı</a></p>
</li>
<li>
<p><a href="http://www.kodaman.org/yazi/arama-motorlarindan-sitenize-ziyaretci-gonderen"><img src="http://www.inmc.co.uk/headlines/1.jpg" alt="Arama motorlarından sitenize ziyaretçi gönderen anahtar kelimeleri yakalamak" width="146" height="110">Anahtar kelimerleri yakalayın</a></p>
</li>
</ol>
</div>

Yukarıdaki kodumuzu aşağıdaki CSS ile şekillendirmemiz gerekmekte. Burada amacımız liste elemanlarının imajlarını solda, bağlantıları ise belli bir büyüklükte sağda liste şeklinde tutmamız gerekiyor. Listedeki aktif elemanın imajını gösterip, diğer liste elemanlarının imajlarını gizliyoruz. Bunu tam olarak CSS ile yapamıyacağız, o yüzden jQuery ile daha sonradan aşağıda yazacağımız işleve ihtiyacımız olacak.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
a {
color: white;
text-decoration: none;
}
ol {
width: 306px;
min-height:110px;
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
ol li {
}
li img {
position: absolute;
visibility: hidden;
top: 0;
left: 0px;
}
.current img {
visibility: visible;
}
.current a {
background: black;
}
li p a {
background-color: #999;
width: 150px;
height: 27px;
padding: 5px 3px 4px 7px;
font-family: Verdana;
font-size: 11px;
line-height: 1.1em;
list-style: none;
float: right;
border-bottom: 1px solid white;
}
img {
border: 0;
}
#headlines {
}

Şimdi ise uygulamayı jQuery ile işlevsel hale getiriyoruz.

1
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).ready(function() {
$("#headlines ol li").mouseover(function(){
$("#headlines ol li").removeClass("current");
$(this).toggleClass("current");
});
});
</script>

Uygulamanın çalışan haline bakmak için tıklayınız.

Spacer
Spacer
/* Alpharabius yazdı. 16 Şubat 2009 09:56. 21 yorum var */

Yorumlar

güzel bildiri. eline sağlık.

/* abzı yırzı hanı hababalayt (iyi günlerde görüşelim...) volkantokmak.com */

güzel yazı, microsoft jquery'ye destek verdikten sonra jquery daha da populer olucak mootoolsculara yazık oldu

tamda aradığım görüntüye sahip bir gadget:)) sitemde kullanacağım bunu, teşekkürler!

Yalnız;

biçimlendirilmiş thumb'lar kullanması pek sağlıklı gözükmüyor. Ok işaretini over yaptığımız elemente tutundurur ve left konumunu negatif bir değerle resmin üzerine kaydırırsak daha kullanışlı olacaktır.

biçimlendirilmiş thumb'lar kullanması pek sağlıklı gözükmüyor. Ok işaretini over yaptığımız elemente tutundurur ve left konumunu negatif bir değerle resmin üzerine kaydırırsak daha kullanışlı olacaktır.
Haklısınız, üşendim ondan yapmadan öyle bıraktım.

paylaşım için çok teşekkür ederim. isteyenler ufak eklemelerle daha da geliştirebilir. en kısa zamanda deneyeceğim ben de.

mrb yazi icin tesekkurler.. cok iyi bir gadget bende bir ilan sitesi hazirliyorum jquery.. kesinlikle mukemmel bi varlik ")

tuttum iyi olmuÅŸ

fareyi uzerine getirmeden icerigi otomatik olarak degistirmeyi nasil saglariz bu scriptte?

/* abzı yırzı hanı hababalayt (iyi günlerde görüşelim...) volkantokmak.com */
fareyi uzerine getirmeden icerigi otomatik olarak degistirmeyi nasil saglariz bu scriptte?

aşağıda hızlıca çözümü veriyorum

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/javascript">
$(document).ready(function() {
var mouseOver = false;
$("#headlines ol li").mouseover(function(){
$("#headlines .current p a img").fadeOut("slow");
$("#headlines ol li").removeClass("current");
$(this).toggleClass("current");
$("#headlines .current p a img").fadeIn("slow");
});
$("#headlines").mouseover(function(){
mouseOver = true;
});
$("#headlines").mouseout(function(){
mouseOver = false;
});
var current = 0;
var headlines = $("#headlines ol li");
function tick()
{
if(current == 3) current = 0;
if(!mouseOver) {
$("#headlines .current p a img").fadeOut("slow");
$("#headlines ol li").removeClass("current");
$(headlines[current]).toggleClass("current");
$("#headlines .current p a img").fadeIn("slow");
}
setTimeout(tick, 1000);
current++;
}
var timer = setTimeout(tick, 1000);
});
</script>

cok tesekkurler dostum ;)

/* abzı yırzı hanı hababalayt (iyi günlerde görüşelim...) volkantokmak.com */

Eline emeğine sağlık dostum gerçekten çok güzel bir bildiri, mutlaka herkesin aradığı bulduğunda da içinden çıkmak için saatler harcadığı bir çalışma.

Yalnız ben lazaronnie nin dediği olaya takıldım. Bunu gerçekten de bir panelli sistemde kullandığımızda okları resimlere ekletmemiz neredeyse imkansız gibi. Bunun yerine css, js yoluyla bunu yapmak nasıl olacak biraz daha konuyu açabilen birisi olursa sevinirim.

Son derece etkileyici bi çalışma yanlız sizden bir ricam olacaktı haberin başlığını ve giriş kısmını da resim altında bi kutu şeklinde gösterme olanağınız var ise ve eklerseniz sevinirim Malum haber sitelerinde bu tip bir kullanım söz konusu

Teşekkür ederim ancak birşey sormak istiyorum.
<ol> kullanıp, daha sonra CSS ile madde imlerini silmek yerine <ul> kullansak daha kolay olmaz mıydı?

güzel bilgi eline sağlık arkadaşlım..

İmajlar üzerine pixel müdahele yapmak pek esnek gelmedi. Üzerinde biraz çalışıp geliştirdim.. IE7 de de sorunsuz çalışan, otomatik geçişleri olan, dilediğiniz kadar manşet ekleyebileceğiniz bir örnek çıktı ortaya. Örnek ve download bu adreste.

/* birisi ok atıp beni vursa kızarım ama bi yandan da gülerim bu devirde ok nerden aklına geldi bu denyonun diye */

Barış hocam ellerinize sağlık son derece işlevsel bir uygulama olmuş teşekkür ederim

Zaman ayırıp uğraştığınız için teşekkürler Barış bey.

Bu arada benim ismim de Türkçeye çevirirsek "Barış" oluyor :)

@sinematutkunu

Ykarıda verdiğiniz manset örneğine fadeIn efekti vermek için uğraşıyorum ama pek başarılı olamadım. Sanırım sizde başlangıçta efektif olsun diye uğraşmışsınız ama sonuç alınanmamış kodu yanlış okumadıysam.(Denemelerimde efekti veriyorum ama yanıp sönmeler bitmiyo bir türlü ... )

http://www.barisoztekin.com/public/haber-manset/mnst.html

bu adresteki sisteme fadeIn efektini nasıl verebilirim ?

$(document).ready(function() {
$("#mansetDiv img").fadeTo('normal', 0.5).fadeTo('normal', 1); var mouseOver = false; $("#mansetDiv ul li").mouseover(function(){ $("#mansetDiv .current p a img").fadeOut("slow"); $("#mansetDiv ul li").removeClass("current"); $(this).toggleClass("current"); $("#mansetDiv .current p a img").fadeIn("slow"); });

$("#mansetDiv").mouseover(function(){ mouseOver = true; });

$("#mansetDiv").mouseout(function(){ mouseOver = false; });

$(".spn").mouseover(function(){ $("#mansetDiv img").fadeTo('normal', 0.7).fadeTo('normal', 1);

});

var current = 0; var mansetDiv = $("#mansetDiv ul li"); function tick() { if(current 4) current = 0; /* current manşet sayısı*/ if(!mouseOver) { if(current!=0){ $("#mansetDiv img").fadeTo('normal', 0.5).fadeTo('normal', 1); } }

$("#mansetDiv .current p a img").fadeOut("slow"); $("#mansetDiv ul li").removeClass("current"); $(mansetDiv [current]).toggleClass("current"); $("#mansetDiv .current p a img").fadeIn("slow"); } setTimeout(tick, 5000); /*timing*/ current++;

var timer = setTimeout(tick, 5000); /*timing*/
});

bu yukarıdaki kodla biraz kaba bi şekilde olsa fadeIn Problemimi çözdüm belki sizede lazım olabilir SPAN etiketlerine "spn" class ı atamalısınız çalışması için ...

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

son yorumlar

arama

pillinetwork