Rabu, 20 Juni 2012

Make News Ticker in 4 lines use jQuery

Apa jadinya variabel unordered (ul) di rangkai dengan ramuan plugin jQuery! Pasti bakal tercipta suatu karya aneka macam, bagaimana si pembuat :p Kesempatan sekarang Koben akan berbagi cara membuat News Ticker in lines of jQuery. Tidak tanggung² langsung 4 jenis gaya ticker lines akan gue share :-"
Syarat utama dalam memuluskan trik ini tidak lain telah terpasang script jQuery didalam template kalian! Nama ke empat gaya news ticker in lines itu adalah: only one news at the time, 3 news always visible, changing opacity of first news and live twitter data. Melihat nama-namanya saja sudah terbayangkan betapa full stylish hasil akhirnya nanti. Mau dipasang semua gaya tersebut juga tidak apa-apa ;))

Urusan peletakan bumbu ramuan Koben anggap kalian sudah pada tahu dimana & gimana ;)

Kode CSS

.ticker {
width: 100%;
height: 40px;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
border-radius: 5px;
border: 1px solid #ddd;
box-shadow: 0px 0px 5px #ddd;
}
.ticker li {
height: 30px;
padding: 5px;
margin: 3px 5px;
border-bottom: 1px dotted #ddd;
}
#ticker_01, #ticker_03 {
height: 53px;
}
#ticker_02 {
height: 125px;
}
Koben sengaja membuat standaran saja gaya variabel CSS. Silahkan deh sobat buat yg edan punya variable CSS lainnya :)

Markup HTML

<ul id="ticker_01" class="ticker">
<li>
blah bleh bloh 1
</li>
<li>
blah bleh bloh 2
</li>
<li>
blah bleh bloh 3
</li>
<li>
blah bleh bloh ...
</li>
</ul>
Perhatikan penulisan id dan class di dalam taging ul Itulah unik-ID dari masing² gaya jQuery ticker! Dan unik ID "ticker_01" untuk gaya ticker 1. Bila ingin memakai gaya "ticker_02" dan "ticker_03" tinggal ganti saja.<ul id="ticker_02" class="ticker">
<li>
blah bleh bloh 1
</li>
<li>
blah bleh bloh 2
</li>
<li>
blah bleh bloh 3
</li>
<li>
blah bleh bloh ...
</li>
</ul>

<ul id="ticker_03" class="ticker">
<li>
blah bleh bloh 1
</li>
<li>
blah bleh bloh 2
</li>
<li>
blah bleh bloh 3
</li>
<li>
blah bleh bloh ...
</li>
</ul>

Plugin jQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
function tick(){
$('#ticker_01 li:first').slideUp( function () { $(this).appendTo($('#ticker_01')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);


function tick2(){
$('#ticker_02 li:first').slideUp( function () { $(this).appendTo($('#ticker_02')).slideDown(); });
}
setInterval(function(){ tick2 () }, 3000);


function tick3(){
$('#ticker_03 li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker_03')).css('opacity', 1); });
}
setInterval(function(){ tick3 () }, 4000);

function tick4(){
$('#ticker_04 li:first').slideUp( function () { $(this).appendTo($('#ticker_04')).slideDown(); });
}
//]]>
</script>
Baris pertama script jangan dipakai jika sudah ada!
Kalau berminat memasang gaya yg ke-4 [live twitter data], sobat tinggal tambahkan rumusan CSS & jQuerynya!
Berikut Koben buatkan terpisah versinya, silahkan bandingkan dengan yg ada pada demo. Temukan apa yg bedanya ya :d
KODE CSS

<style>
.ticker {
width: 100%;
height: 40px;
overflow: hidden;
border: 1px solid #DDD;
margin: 0;
padding: 0;
list-style: none;
border-radius: 5px;
box-shadow: 0px 0px 5px #DDD;
}
.ticker li {
height: 30px;
border-bottom: 1px dotted #DDD;
padding: 5px;
margin: 3px 5px;
}
#ticker_04 {
height: 161px;
}
#ticker_04 li {
height: 40px;
overflow: hidden;
}
#ticker_04 img {
float: left;
height: 40px;
width: 40px;
margin-right: 10px;
}
#tick_4 {
display: none;
}
</style>

MARKUP HTML

<div id="tick_4">
<ul id="ticker_04" class="ticker">
</ul>
</div>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

jQuery PLUGIN

<script type='text/javascript'>
//<![CDATA[
function tick4(){
$('#ticker_04 li:first').slideUp( function () { $(this).appendTo($('#ticker_04')).slideDown(); });
}

/**
* USE TWITTER DATA
*/

$.ajax ({
url: 'http://search.twitter.com/search.json',
data: 'q=%23blogger tutorial',
dataType: 'jsonp',
timeout: 10000,
success: function(data){
if (!data.results){
return false;
}

for( var i in data.results){
var result = data.results[i];
var $res = $("<li />");
$res.append('<img src="' + result.profile_image_url + '" />');
$res.append(result.text);

console.log(data.results[i]);
$res.appendTo($('#ticker_04'));
}
setInterval(function(){ tick4 () }, 4000);

$('#tick_4').show();

}
});
//]]>
</script>
Semua tutorial itu Koben dapatkan dari master Ivan Lazarevic selaku owner web WORKSHOP @kopipejst
Acak-acak semua konten di web tersebut. Pokoknya tidak akan rugi deh, edan eling bin kueren punya b-)
Good luck :)
Happy news ticker \m/

Tidak ada komentar:

Posting Komentar