12:19:00 AM
Pernah menggunakan fasilitas chat di facebook? kalo pernah berarti anda sudah tau apa yang namanya scroolbar. Scroolbar biasa digunakan untuk menaikan dan menurunkan suatu halaman. Untuk contohnya bisa dilihat seperti di chat facebook gambar dibawah ini.
Contoh aplikasi Scroolbar
Pada pembahasan kali ini akan dibahas bagaimana membuat script scroolbar, yang mana tampilan untuk script yang kita buat akan seperti gambar berikut.
Karena dalam pembuatan script ini adalah berkolaborasi dengan JQuery, maka terlebih dahulu untuk mendownload library JQuery tinyScroolbar di https://github.com atau bisa langsung download full source code yang saya sertakan di akhir pembahasan ini.
Kemudian buat halaman index-nya dan panggil library tinyScroolbar. Perhatikan script dibawah ini yang ditebalkan dan berwarna biru.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tips & Trick Menampilkan Dengan Scroolbar</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/tinyscrollbar.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
</head>
<body>
<div id="info"><img src="" width="70" height="20">
<a href="http://blogfaluti.blogspot.com" style="text-transform:lowercase; color:#FF0; text-decoration:none;" target="_blank">blogfaluti</a></strong></div>
<div id="isi">
<div id='container'>
<h1>Tips & Trick Menampilkan Dengan Scroolbar</h1>
<div id="scrollbar1">
<div class='scrollbar'><div class='track'><div class='thumb'><div class='end'></div></div></div></div>
<div class='viewport'>
<div class='overview'>
<?php
error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
include 'config/koneksi.php';
include 'config/fungsi_indotgl.php';
$sql = mysql_query("SELECT * FROM bukutamu ORDER BY id_bukutamu DESC LIMIT 10");
while ($s = mysql_fetch_array($sql)){
$isi_pesan = htmlentities(strip_tags($s[pesan])); // membuat paragraf pada isi berita dan mengabaikan tag html
$isi = substr($isi_pesan,0,200); // ambil sebanyak 220 karakter
$isi = substr($isi_pesan,0,strrpos($isi," ")); // potong per spasi kalimat
$tanggal = tgl_indo($s[tanggal]);
$grav_url = 'http://www.gravatar.com/avatar/' . md5( strtolower( trim( $s[email] ) ) ) . '?d=' . urlencode( $default ) . '&s=' .
$size;;
echo"<div class='stbody'>
<div class='stimg'><img src='$grav_url' height='50' /></div>
<div class='sttext'><b>$s[nama]</b></div>
<div class='sttext'>$s[pesan]<br/>
<div class='sttime'>$tanggal</div></div>
</div>";
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tips & Trick Menampilkan Dengan Scroolbar</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/tinyscrollbar.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
</head>
<body>
<div id="info"><img src="" width="70" height="20">
<a href="http://blogfaluti.blogspot.com" style="text-transform:lowercase; color:#FF0; text-decoration:none;" target="_blank">blogfaluti</a></strong></div>
<div id="isi">
<div id='container'>
<h1>Tips & Trick Menampilkan Dengan Scroolbar</h1>
<div id="scrollbar1">
<div class='scrollbar'><div class='track'><div class='thumb'><div class='end'></div></div></div></div>
<div class='viewport'>
<div class='overview'>
<?php
error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
include 'config/koneksi.php';
include 'config/fungsi_indotgl.php';
$sql = mysql_query("SELECT * FROM bukutamu ORDER BY id_bukutamu DESC LIMIT 10");
while ($s = mysql_fetch_array($sql)){
$isi_pesan = htmlentities(strip_tags($s[pesan])); // membuat paragraf pada isi berita dan mengabaikan tag html
$isi = substr($isi_pesan,0,200); // ambil sebanyak 220 karakter
$isi = substr($isi_pesan,0,strrpos($isi," ")); // potong per spasi kalimat
$tanggal = tgl_indo($s[tanggal]);
$grav_url = 'http://www.gravatar.com/avatar/' . md5( strtolower( trim( $s[email] ) ) ) . '?d=' . urlencode( $default ) . '&s=' .
$size;;
echo"<div class='stbody'>
<div class='stimg'><img src='$grav_url' height='50' /></div>
<div class='sttext'><b>$s[nama]</b></div>
<div class='sttext'>$s[pesan]<br/>
<div class='sttime'>$tanggal</div></div>
</div>";
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Maksud dari script tersebut adalah:
Perhatikan pada bagian <head> memanggil CSS, JQuery dan JavaScript. Kemudian pada bagian <body>, yaitu <div id="scroolbar1"> merupakan bagian yang di scrool dengan tampilan diatur oleh tinyscroolbar.css yang sebelumnya dipanggil pada bagian header.
Masih bingung? dari pada bingung, mending langsung dicoba dengan mendownload full source code disini.
Ket : Isi yang ditampilkan di script diatas adalah menggunakan database, anda dapat mengganti database sesuai dengan keinginan anda.
