What Is jScrollPane?

jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser’s default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.

jScrollPane is designed to be flexible but very easy to use. After you have downloaded and included the relevant files in the head of your document all you need to to is call one javascript function to initialise the scrollpane. You can style the resultant scrollbars easily with CSS or choose from the existing themes. There are a number of different examples showcasing different features of jScrollPane and a number of ways for you to get support.

What Is Facebook ScrollableArea?

Facebook Scrollable Area

Recently, Facebook ScrollableArea can be found in many part of Facebook user interface to handle overflow content. One is in the activity feed in the top right area with a cute scrollbar that can be scrolled by dragging and mouse scroll.

Yes, it can be done nicely — with little CSS and JavaScript customization — using jScrollPane I mentioned above

jScrollPane + (JavaScript + CSS) = Facebook ScrollableArea

Don’t worry, there is no pain coding needed to do this, just follow this steps:

1. Include jScrollPane library and jQuery (if not yet) to your page

<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

2.Initialize jScrollPane to your selector.

By default, the following code is ready to convert your scrollbar to  jScrollPane.

$(function() {
	$('.content-area').jScrollPane();
});

But here, we need more settings. It’s should look like this:

$('.content-area').jScrollPane({
	horizontalGutter:5,
	verticalGutter:5,
	'showArrows': false
});

3. Scrollbar should be hidden if no mouse over on it.

So, we use .fadeIn() and .fadeOut() jQuery effects:

$('.jspDrag').hide();
$('.jspScrollable').mouseenter(function(){
    $('.jspDrag').stop(true, true).fadeIn('slow');
});
$('.jspScrollable').mouseleave(function(){
    $('.jspDrag').stop(true, true).fadeOut('slow');
});

4. Last but not least, add custom CSS
-

/*scrollpane custom CSS*/
.jspVerticalBar {
	width: 8px;
	background: transparent;
	right:10px;
}

.jspHorizontalBar {
	bottom: 5px;
	width: 100%;
	height: 8px;
	background: transparent;
}
.jspTrack {
	background: transparent;
}

.jspDrag {
	background: url(images/transparent-black.png) repeat;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
	float: left;
	height: 100%;
}

.jspCorner {
	display:none
}

We use a 1×1 pixel PNG transparent image for jspDrag background, Download it here (right click, save link/target)

 Live Demo

Click Here to See Live Demo

Tooltip on desktop application

Basic

• This tooltip would replace title attribute of an HTML element.
• This tooltip text is extracted from the title attribute.
• This tooltip is compatible with common modern browser.
• This is not a jQuery plugin.

Logic

When cursor over on an element with title attribute, normally it will display a tooltip. Extract that title attribute, save it to a variable and remove original title attribute (to prevent original title being displayed).
Create a div element next to current element with position absolute, hidden, and fill it up with extracted title text. Finally, display that div when mouse over on it.

Then what happen when mouse cursor leaves the element? Simply, restore title attribute, and hide or remove tooltip.

Do it your self

Below is the code with explanation comment.

Mouse Enter

$('.poptip').mouseenter(function(){
var text = $(this).attr('title'); //extract title, save to "text" variable
var posi = $(this).position();
var top  = posi.top; //top position
var left = posi.left+5; //left position
var wid	 = $(this).width(); //element width
$(this).attr('title',''); //remove original title
$(this).parent().append('
'+text.replace('|','')+'

'); //create div element with class .poptext, and fill with extracted title.

//some css styling
	$('.poptext').css({'left':(left+wid)+'px',
				'top':(top-$('.poptext').height())+'px',
				'background':'#fffeee',
				'border':'1px solid #f7a229',
				'display':'none',
				'position':'absolute',
				'z-index':'1000',
				'padding':'5px',
				'font-size':'0.8em'
	});

//show tooltip, slowly
	$('.poptext').fadeIn('slow');
});

Mouse Leave

$('.poptip').mouseleave(function(){
	var title = $(this).parent().find('.poptext').html(); //restore title text from tooltip
	$(this).attr('title',title.replace('','|')); //place it back to title attribute
	$(this).parent().find('.poptext').fadeOut('slow'); //hide tooltip
	$(this).parent().find('.poptext').remove(); //remove element.
});

Usage/Example

You’re done.

Twitter Marquee

May be you see it everyday, a seamless-continuous  marquee in the Twitter homepage shows the current trending topic.  It’s damn good with fading background and short description in a tooltips.

If you like that marquee and want to put it in your website/blog, I have write such script using jQuery and CSS3 I just stolen a bunch of jQuery and CSS code from Twitter, clean it up and made to work standalone.

All you need to do is edit the CSS (marquee width, background, text color etc) and image to fit to your need and drop it into your website or blog.

It’s nothing easier than to try it yourself and the following links will tell you everything.

Berikut beberapa tips dalam menuliskan CSS:

1. Hindari penggunaan ID ganda.

ID adalah sebuah penanda unik untuk sebuah elemen halaman, artinya dalam sebuah halaman tidak ada dua ID dengan nama yang sama. Jadi, gunakanlah ID hanya untuk elemen-elemen utama yang tidak ada duanya, seperti header, menu, container, sidebar, footer dsb.

Contoh1:

Contoh2:

Contoh2 di atas adalah salah, karena kemungkinan besar elemen title dan post adalah lebih dari satu dalam sebuah halaman.

Solusinya gunakanlah class daripada ID.

2. Buang nilai-nilai yang mubazir

Kita lihat contoh CSS berikut:

Contoh3

#container {
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-right: 0px;
}

Contoh4

#container {
padding: 5px 0px 5px 0px;
}

Contoh3 dan Contoh4 di atas akan menghasilkan tampilan yang sama, tentu saja contoh4 lebih sederhana daripada contoh3. Namun demikian, contoh4 tersebut masih terdapat perulangan nilai 5 dan 0. Mari kita perbaiki menjadi sebagai berikut:

Contoh5

#container {
padding: 5px 0;
}

Wow, sederhana bukan? Ya, karena nilai pertama sudah dapat mewakili top dan bottom, dan nilai kedua sudah mewakili left dan right. Sementara untuk zero value (0) tidak perlu menambahkan satuan px, jadi boleh dihilangkan.

3. Bijak dalam memberikan nilai warna

Asumsikan kita akan memberi latar warna biru untuk div container, css nya adalah sebagai berikut.

Contoh6

#container {
background: #0000FF;
}

Contoh6 akan menghasilkan warna background dari div container menjadi berwarna biru. Kode tersebut bisa dipersingkat lagi menjadi sebagai berikut:

Contoh7

#container {
background: blue;
}

Ya, karena nilai #0000FF sama artinya dengan blue. Lebih singkat bukan?

Beberapa alternatif lain dalam memberikan warna seperti tertera dalam table berikut:

alternatif1        alternatif2          alternatif3            hasil warna
#000000           #000                  black                   hitam
#FFFFFF           #FFF                  white                  putih
#FFFF00           #FF0                  yellow                 kuning
#FF0000           #F00                  red                     merah

Di sinilah kebijakan kita dituntut, dimana kita harus bisa memilih mana yang paling sedikit karakternya. Misalnya untuk memberi warna kuning, maka lebih baik menggunakan #FF0 dari pada yellow, sementara untuk memberi warna merah, lebih baik menggunakan red, daripada #F00. Pemberian nama warna langsung kemungkinan tidak terbaca oleh semua browser, tapi untuk warna2 dasar hal ini masih bisa ditolelir.

Untuk lebih jelasnya dalam menentukan kode warna, bisa dilihat color chart di sini.

4. Semicolons, hanya untuk pemisah

Kita lihat contoh berikut

Contoh8

#container {
background: blue;  /*terdapat semicolon (titik koma) setelah nilai blue.*/
}

Jika hanya ada sebuah properties, kita tidak perlu mengakhirinya dengan titik koma (;) atau semicolon.
Jadi CSS yang baik adalah.

Contoh9

#container {
background: blue
}

Demikian juga jika sebuah nilai tidak diikuti oleh nilai lainnya, maka semicolon bisa dihilangkan.

Contoh10

#container {
background: blue;
padding: 5px 0;
margin: 0
}

Setelah nilai margin: 0 kita tidak perlu lagi menambahkan semicolon, karena properties untuk container sudah berakhir.

6. Kelompokkan nilai yang sama.

Misalkan div header, div sidebar, dan div footer mempunyai beberapa nilai yang sama, kita bisa mengelompokkannya dengan memisahkannya dengan koma.

Contoh11

#header, #sidebar, #footer {
background: red;
font-family: Arial, Helvetica;
padding: 5px

5. Kurangi spasi yang berlebihan

Sedapat mungkin kurangi penggunaan spasi kosong yang berlebihan.
Untuk contoh10 di atas, bisa kita padatkan lagi menjadi

Contoh12

#container {
background:blue;
padding:5px 0;
margin:0
}

Atau bahkan

Contoh13

#container {background:blue;padding:5px 0;margin:0}

Namun contoh13 tidak dianjurkan, karena akan merepotkan kita sendiri sewaktu-waktu ingin merubah tampilan nantinya.

Demikian beberapa tips yang mungkin berguna, sebenarnya masih ada beberapa tips lagi yang mungkin lain kali bisa disambung lagi.

Untuk membuat block region baru, yang perlu kita lakukan adalah mengedit beberapa file template yang kita gunakan. Langkah-langkahnya:

1. Buka file template.php di folder themes, temukan baris-baris berikut (buat file baru bernama template.php jika tidak ada) :

   // regions for nama_template
   function nama_template_regions() {
       return array(
       'left' => t('left sidebar'),
       'content_top' => t('content top'),
      'content_top_right' => t('content top right'),
      'content_bottom' => t('content bottom'),
       'content_header' => t('header'),
       );
   }

   Sisipkan nama region baru yang akan ditambahkan diantara tanda kurung return aray di atas. Pastikan format penulisannya sama dengan region yang sudah ada, contoh:

    'region_baru' => t('region baru'),

   Nama di sebelah kiri tanda => adalah teks yang akan dibaca oleh drupal, tidak boleh menggunakan spasi dan karakter khusus, sedankan di sebelah kanan tanda => adalah nama yang akan ditampilkan di panel Administer, boleh menggunakan spasi.

2. Langkah berikutnya adalah memanggil region tersebut ke template. Sebelum ini dilakukan region baru tersebut tidak akan muncul di panel administer dan tidak bisa digunakan.Buka file page.tpl.php di folder themes, tentukan tempat dimana block akan kita tampilkan nantinya. Sisipkan baris berikut di tempat tersebut.

   <div><?php print $region_baru; ?></div>

   Gunakan CSS untuk memanipulasi ukuran region baru yang kita buat.

3. Selamat mencoba

.

Beralih ke table dalam kontent website, sebenarnya ada toolsnya yakni “table2css converter” yang bisa langsung mengkonvert table menjadi div hanya dengan beberapa klik. Namun sayangnya tool ini hanya bisa membuat tabel statik dengan ukuran-ukuran absolut. Bagaimana jika table tersebut merupakan table dinamis, multicolumn, multirow seperti daftar harga barang, statistik atau member, dimana data diambil secara loop dari database?

.

Berikut contoh membuat tabel div yang mempunyai 8 kolom (columns) dan 2 baris (rows).

.

Pertama, buat kontainer yang bertidak sebagai <table> </table>.

<div class="kontainer"></div>

Properti css nya adalah:

.kontainer {
width:100%;    /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align="center">*/
border: 1px solid #000 /* border, opsional */
}

Kedua, tambahkan row/baris di dalam div kontainer tadi, yang bertindak sebagai <tr></tr>.

<div class="kontainer">
   <div class="baris"></div>
</div>

Properti cssnya:

.baris {
width: 100%    /* harus 100% supaya penuh ke area table */
}

Ketiga, tambahkan beberapa kolom (contoh ini 8 kolom) diantara div baris tadi, yang bertindak sebagai <td></td>.

<div class="kontainer">
   <div class="baris">
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
   <div style="clear: both;" /> <!-- tambahkan ini, supaya div kontainer
                                melingkupi semua div yang ada di dalamnya -->
</div>

Properti css nya:

.kolom {
width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left;  /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}

.

Berikut screenshot hasil sementara:

.

.

Untuk menambahkan baris lainnya, baris kedua, ketiga dan seterusnya, cukup ulangi div baris beserta div kolom sebanyak baris yang diperlukan. Berikut contoh setelah diatambahkan baris (baris ke 2):

<div class="kontainer">
   <div class="baris">
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
   <div class="baris"> <!-- baris ke dua -->
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
<div style="clear: both;" /> <!-- jangan lupa untuk selalu menempatkan tag ini
                             sebelum penutup div kontainer -->
</div>

.

Kode lengkapnya adalah:

.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contoh Table menggunakan div</title>
<style type="text/css">
.kontainer {
width:100%;    /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align="center">*/
border: 1px solid #000 /* border, opsional */
}
.baris {
width: 100%    /* harus 100% supaya penuh ke area table */
}
.kolom {
width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left;  /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}
</style>
</head>

<body>
<div class="kontainer">
   <div class="baris">
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
   <div class="baris"> <!-- baris ke dua -->
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
<div style="clear: both;" /> <!-- jangan lupa untuk selalu menempatkan tag ini
                             sebelum penutup div kontainer -->
</div>
</body>
</html>

.

Sesuaikan style tambahan seperti warna background, border, text dan sabagainya. Selanjutnya, untuk pengisian data bisa menggunakan parameter-parameter php sesuai dengan kebutuhan.

.

Dalam contoh ini sengaja menggunakan atribut class bukan id dalam mengidentifikasi css properties karena sesuai dengan standard W3C bahwa id adalah harus unik untuk menamai suatu elemen dalam sebuah halaman web.

Demo: Klik di sini
Download: Klik di sini

Penulis: takien
Sumber: takien.com