jQuery Visual Cheat Sheet

jQuery Visual Cheat Sheet is an useful and practical reference to jQuery 1.3 for web designers and developers designed by me. This cheat sheet (6 pages) contains the full jQuery API reference with detailed descriptions and some sample code. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for. Here's a preview:

Download You can download the full PDF version for free at the following link.

Donate If you like this Visual Cheat Sheet you can also make me a little donation with PayPal.

Screen shoots
Here is a preview of this visual cheat sheet (click on each picture to enlarge):

Scribd Version
Here is the Scribd version:



Scribd Version

Download You can download the full PDF version for free at the following link.

Donate If you like this Visual Cheat Sheet you can also make me a little donation with PayPal.

What do you think about this cheat sheet? Please leave your comments, thanks!

Read More

How to implement a perfect multi-level navigation bar

A question I often receive is what's the best way to implement a multi-level navigation bar for a website. In some cases, some of my readers ask to me a little help and send me "very original" solutions but not so suitable in terms of semantic and unobtrusive approach to coding. For my experience, I always suggest to use simple and standard methods. So in this tutorial I want to illustrate you how to implement a perfect multi-level navigation bar using HTML, CSS and some lines of unobtrusive JavaScript code with jQuery to show and hide sub sections. The result is the following:



You can quickly reuse the code I provided in this tutorial into your web projects, customizing the CSS file and changing the links. You can take a look at the demo here or download the source code here.


Navigation bar structure
Here is the standard box model of a typical navigation bar:

...and here is the standard HTML structure you would have to use to implement it

<div id="nav"> <!-- nav container -->

<ul>

<li>item <!-- main item -->

<ul> <!-- item submenu -->

<li>sub item</li>

</ul>

</li>

<ul>

</div>

How you can see the code is composed by some nested unordered list. For example, in this tutorial I used the following code (main navigation items highlighted in bold):

<div id="nav">

<ul>

<li><a href="#">Web Design</a>
<ul class="submenu">
<li><a href="http://woork.blogspot.com">Woork</a></li>
<li><a href="http://www.dzone.com">DZone</a></li>
</ul>
</li>

<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://www.mashable.com">Mashable</a></li>
<li><a href="http://www.cnet.com">CNET</a></li>
</ul>
</li>

<ul>
<div>

You can add new main items or sub items simply adding new <li> tags with an <ul> tag within.


CSS Code
Now take a look at the CSS code. I prepared a very basic style you can customize how you prefer in your projects. Here is the code for the container of the navigation bar (<div id="#nav">):

#nav{

height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}

#nav ul,
#nav ul li {

margin:0;
padding:0;
list-style:none;

}
#nav ul li{

float:left;
display:block;

}

Here is the code for navigation links. #nav ul li {...} it's the code that defines main items (in this tutorial for example they are Web Design, Tech News, Social Network). #nav ul li ul li {...} it's the code that defines sub items for each main item.

#nav ul li a:link,
#nav ul li a:visited{

color:#FFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;

}
#nav ul li a:hover{

color:#EBEFF7;

}
#nav ul li ul li{

float:none;
display:block;

}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{

color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;

}
#nav ul li ul li a:hover{

color:#3B5998;
background:#EBEFF7;

}

Here is the code for sub menu sections:

.submenu {

position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;

}

jQuery Code
Now take a look at this simple jQuery code that shows and hides sub sections using mouseover and mouseleave jQuery events. The code is very simple and works independently from the number of main items contained into the navigation bar. You have to copy the following code into the <head> tag of your page. Remember first to include a link to jQuery using the following code:

<script type="text/javascript" src="jquery.js"></script>

Than add this code:

<script type="text/javascript">
function nav(){

$('div#nav ul li').mouseover(function() {

$(this).find('ul:first').show();

});

$('div#nav ul li').mouseleave(function() {

$('div#nav ul li ul').hide();

});

$('div#nav ul li ul').mouseleave(function() {

$('div#nav ul li ul').hide();;

});

};

$(document).ready(function() {

nav();

});
</script>

You can also add this code in an external JS file and import it into the page that use this script. That's all! Take a look at the demo here or download the source code here.

Leave a comment for your suggestions, thanks!

Read More

How to fix your iTunes library with TuneUp

I have an iPhone and iPod and naturally I use iTunes to manage my music library through these devices. I am a neat person but for some reason until some week ago a lot of my tracks was mislabeled, without the album cover, hard to find and I didn't have the patience to fix them manually. So I searched for a solutions and I found TuneUp a great application for Mac and Windows that helped me clean and maintain neat my iTunes library searching for missing or inaccurate ID3 tags in my mp3 files. I bought a license some and the result has been really impressive.

TuneUp docks on the side of iTunes to make organizing your music easy. The only thing you have to do is to drag the track you want to fix into the TuneUp sidebar and the application fixes automatically your mislabeled music.

The Cover Art feature automatically searches your entire music collection for music files that are missing album artwork and fixes them. Cover Art lets you review all matches before the album art is saved to the file. Or you can take our first pick and "Save All." Now you can navigate iTunes using Cover Flow the way it was meant to be used.

Here is a screenshot of my iTunes library (click to enlarge)

TuneUp also enhance your listening experience with the Tuniverse feature that supplies you with the best music content on the web that's directly related to the track you're currently listening to in iTunes.

You can also stay tuned with the latest news of your favorite artists and buy tickets in just one click with the Concert feature.

TuneUp is available in two different options: a lifetime ($29.95) license or yearly license (price $19.95). You can also try a free version that cleans 100 songs and 50 album covers. I suggest you to try it!

 

Read More

10 Beautiful and free must have Serif Fonts

If you are looking for new interesting fonts, here is a collection of ten beautiful, free and must have serif typefaces for the web and print. This collection includes Medio, Jura, Fontin, Sling, Calluna, Lido STF, Salernomi, Novello Pro, Steinem, TeX Gyre Schola.


1. Medio (download)
Medio is one of my favourite fonts designed by dotcolon (the same authors of Vegur, Tenderness and Ferrum)




2. Jura (download)
Jura is a distinctive yet readable serif typeface, suitable for headings and body content alike. It features 96 of the most commonly used glyphs (characters).





3. Fontin (download)
The Fontin is designed to be used at small sizes. The color is darkish, the spacing loose and the x-height tall. Don't forget to check Fontin Sans!





4. Sling (download)
Sling is a versatile typeface available in bold, normal and light version.





5. Calluna Regular (download)
Calluna regular is a popular typeface designed by Jos Buivenga author the best seller font Museo on myfonts.com.





6. Lido STF (download)
Lido STF is a font designed by František Štorm for the periodical Lidové noviny (People’s Newspaper). This font is a modification of the original Times New Romans font.





7. Salernomi (download)
Salernomi is an elegant typeface designed by Julius B. Thyssen. You can use it with a perfect result for the web and print.





8. Novello Pro (download)
Novello Pro is a moderate Roman typeface with round serifs and modern details designed by Ingo Zimmermann.




9. Steinem (download)




10. TeX Gyre Schola (download)
TeX Gyre Schola is another great serif font especially useful for the print.

 

Read More

HTML lists: what's new in HTML 5?

There is a big and justified interest from the web community about the changes introduced in HTML 5 and in the last weeks I'm frequently receiving a lot of questions and requests about this topic. In this post I want to illustrate a quick roundup of some point of interest about the use of lists in HTML 5.
How you know HTML has three types of lists:

- <ul>, unordered list
- <ol>, ordered list
- <dl>, definition list

The HTML <li> tag defines a list item and is used in both <ul> and <ol> lists. <dt> and <dd> tags define a definition term and the related description in a definition list. These tags are all supported in HTML 5 version but there are some little changes in their attributes, in particular:

<ul> and <ol>
the attribute compact and type are not longer supported in HTML 5 (you have to use CSS instead).

<li>
the attribute type, which specifies the type of the list, is not longer supported in HTML 5 (you have to use CSS instead).
The attribute value, which defines the value of the first item of the list, is not longer deprecated and can be only used with the <ol> tag.

Unordered list for navigation bar
Another lists-related question is about the structure of the navigation bar of a website with the introduction of the new <nav> tag in HTML 5. How you know, unordered lists are commonly used to implement the navigation bar of a website. The typical structure of a navigation bar is a <div> tag that contains an unordered list with some items:

Here is the HTML code to implement the basic structure of a navigation bar

<div id="nav">
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</div>

In HTML 5, the structure of a navigation bar is the same illustrated in the previous code. The only thing that changes is the the external "container" of the unordered list. You have to use the new <nav> instead a generic <div> tag

<nav>
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</nav>

Definition list and the <dialog> tag
Definition lists are not frequently used in web design end a lot of people even ignore their existence! In general their use is mainly suggested when you have to represent a list of items with a related description for each item of the list. Here is the code that describes a generic definition list:

<dl>

<dt>Google</dt>
<dd>Search engine</dd>
<dt>Facebook</dt>
<dd>Social network</dd>

</dl>

Here is the output in a web browser:

Google

Search engine

Facebook

Social network

HTML 5 introduces the new <dialog> tag that uses <dt> and <dl> tags (these tag are used to define a term and its description in a definition list) to describe a conversation. Here is an example of dialog structure

<dialog>

<dt>Anna</dt>
<dd>What time is it?</dd>
<dt>Mark</dt>
<dd>Three o'clock</dd>
<dt>Anna</dt>
<dd>Thanks!</dd>

</dialog>

And here is the output in a web browser:

Anna

What time is it?

Mark

Three o'clock

Anna

Thanks!

*NOTE: the <dialog> tag has been dropped in HTML revision 3859 (2009-09-15). Thanks to Dylan for the suggestion. The new <figure> and <details> tags now use <dt> and <dl> instead of <legend>.

That's all. If you have some suggestion about this topic, please leave a comment. Thanks!

 

Read More

Blogger now supports natively expandable post summaries

Finally! Blogger has introduced After the Jump a feature which lets you create expandable post summaries in your blog posts, so longer posts appear as an intro with a link to Read More.

Creating jump breaks in your blog posts can be easily done right from the post editor, without the need for any HTML changes.

The only thing you have to do is to add this code into the post editor:

<!-- more -->

Take a look at this post that explains in detail how to implement expandable post summaries.

Read More

Rediscovering HTML tables

I decided to write this post after several conversations I recently had with some of my readers about the use of HTML tables. In general, I noticed there is a preconceived hate about their use due to misleading information. In fact a lot of people say "I read tables should never be used", but this is absolutely false! This recommendation only regards the use of HTML tables to define the layout of HTML pages, but tables are perfect to arrange easily data into rows and columns and if you have to display tabular data within a web page you have to use them! Why not? So, in this situation, some people ignore the existence of some HTML tags for tables and how to use them properly.


HTML has ten table related tags. Here's the list with indicated if the element is defined in HTML 4.01 and/or HTML 5:

<caption> defines a table caption (4, 5)
<col> defines attributes for table columns (4, 5)
<colgroup> defines groups of table columns (4, 5)
<table> defines a table (4, 5)
<tbody> defines a table body (4, 5)
<td> defines a table cell (4, 5)
<tfoot> defines a table footer (4, 5)
<th> defines a table header (4, 5)
<thead> defines a table header (4, 5)
<tr> defines a table row (4, 5)

A basic table structure is the following:

It contains a caption, header, body and footer. The correct order of HTML elements is:

1. <table>
2. <caption>
3. <thead>
4. <tfoot>
5. <tbody>

According to definition and usage of w3schools, the element <tfoot> must appear before <tbody> within a table definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data (read more).

You can also use <col> and <colgroup> to define attributes for table columns or define group of table columns:

1. <table>
2. <caption>
3. <colgroup>
4. <col>
5. <thead>
6. <tfoot>
7. <tbody>

The following code is an example of a correct table structure:

<table border="1">

<caption>Table caption here</caption>

<colgroup span="1" style="background:#DEDEDE;"/>
<colgroup span="2" style="background:#EFEFEF;"/>

<!-- Table Header-->
<thead>

<tr>

<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>

</tr>

</thead>

<!-- Table Footer-->

<tfoot>

<tr>

<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>

</tr>

</tfoot>

<!-- Table Body-->
<tbody>

<tr>

<td>A</td>
<td>B</td>
<td>C</td>

</tr>
<tr>

<td>D</td>
<td>E</td>
<td>F</td>

</tr>

</tbody>

</table>

The result on a browser is the following:

align and bgcolor attributes of the table are deprecated, so in HTML 5 no table attributes are supported. Obviously you can use style sheet to customize the style of each table element.

For a more detailed articles about HTML tables read this interesting post: w3 Introduction to tables

That's all. Do you have any suggestion about this topic? Please leave a comment, thanks.

 

Read More

HTML 5 Visual Cheat Sheet by Woork

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.
Here's a preview of my cheat sheet:

This is an example of listed tags and attributes:

HTML 5 Cheat Sheet is available in high quality for A3 paper format. Take a look at this link for a preview or download the high quality version (dark or white background):

Dark Background:

- PDF high-quality (new! thanks to Julie Webb)
- JPG high-quality




White Background New!:
I prepared this print-friendly version:

Download this version here:

- PDF Version
- JPG hig-quality




The Flickr version is here.

If you have some suggestion about this cheat sheet please leave a comment or write me to my e-mail address.

Read More

CSS code structure for HTML 5: some useful guidelines

In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage.


I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes.

Section 1: General HTML tags
In this section I divide the code in two subsections. A first subsection that contains code to reset HTML standard tags and a second subsection that contains code to redefine HTML standard tags.

Section 1: Subsection 1
How you know, regarding CSS reset, this practice is used to reset default browser styles for HTML standard elements (body, h1, p, ul, li, ...). One of the most popular files for CSS reset is the Eric Meyers CSS reset. For HTML 5 I suggest you to take a look at the Richard Clark CSS reset based on the Mayers file. These files reset all existing HTML tags and therefor contain a lot of lines of CSS code. In reality, in the majority of cases, the only frequently used tags that require to be reset are body, h1, h2, h3, p, ul, li, form, input and rarely table, tr and td. So if you prefer, you can use a shortened version of these files that includes only HTML elements you really used in your pages:

/* Subsection 1: CSS Reset */
body,
h1, h2, h3,
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {

border:0;
margin:0;
padding:0;
font-size:100%;
...

}

In the previous code I highlighted in bold some HTML 5 new tags you could need to reset (see after for a short explanation about them).

Section 1: Subsection 2
In the second subsection of the section 1 I simply redefine HTML standard tags:

/* Subsection 2: Standard HTML tags redefinition */
body,
form, input {

color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}

h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}

a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}

If I need to define a standard tag (for example <h1>) with different properties depending on the position of the tag on the page (<h1> for post titles and <h1> for sidebar titles) I prefer to add the related CSS code into the section that contains structural tags (Section 2). For example, for the sidebar:

aside {...}

aside h1 {...}

Section 2: Structural tags
In this section I define all CSS elements that define the page structure. As I anticipated, HTML 5 introduces new tags that improve the semantic of the code. Some of these tags are: <header>, <nav>, <article>, <section>, <aside>, <footer>... You can use these tag instead of more common DIV layers we used until now (for example: <div id="nav">...</div>).
Shortly, the picture on the right represents a typical two columns layout that use HTML 5 tags to define page structure. If you want to know more information about this topic, I suggest you to take a look at these excellent articles:

- Smashing Magazine: HTML5 and The Future of the Web
- Steve Smith: Structural Tags in HTML5
- Lachlan Hunt: Preview of HTML5

CSS code is very simple:

header{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}

Practically it's identical to the code we are using with DIV layers:

#header{...}
#nav{...}
#aside{...} /* sidebar*/
#footer{...}
...

For each HTML element you can define its child elements. For example if this is the code for the navigation bar:

<nav>

<ul>

<li>...</li>
<li>...</li>
<li>...</li>

</ul>

</nav>

...the related CSS code is:

nav{...}

nav ul{...}

nav ul li{...}
nav ul li a{...}

As I said before, in order to improve code readability, I suggest you to use indented code, and alphabetical order to list properties of elements:

nav ul li a{

font-size:12px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;

}

What changes respect to HTML 4? Not so much:

<div id="nav">

<ul>

<li>...</li>
<li>...</li>
<li>...</li>

</ul>

<div>

Simplifying, this kind of structural tags in HTML 5 are DIV layer with a specific ID in HTML 4:

#nav{...}

#nav ul{...}

#nav ul li{...}
#nav ul li a{...}

Section 3: Custom Classes
In the last section of my CSS files I add custom classes I can reuse in several sections (header, sidebar, footer,...).

/* Custom Classes */
.left-align{float:left;}
.red{color:#FF0000;}
.small-text-gray{color:#999; font-size:11px;}

That's all. If you have some suggestion about this topic please leave a comment, thanks!

 

Read More

Best 5 hand-drawn social icon set

Do you like hand-drawn style? Are you looking for some icons to improve the design of your website? Take a look at this collection that contains the best 5 hand-drawn social icon set in circulation.

Hand-drawn Social Media Icons (download)
This beautiful icon set, designed by Alex Latimer for WooThemes, comprising of 24 different icons, should cover most of the social networks that you frequent regularly and the default icon size has been set at 64 x 64 pixels.

Handycons 2 (download)
Handycons is a free, hand drawn social media icon set that contains more than 20 icons. Package contains Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo and You Tube icons. All icons come in four sizes: 16x16, 32x32, 64x64 and 12x128px.

Social Icons hand drawned (download)
Another beautiful set. The icons are available in the size: 24x24, 32x32, 48x48 and 64x6.

Free Hand Drawn Doodle Icon Set for Bloggers (download)
This set of free hand drawn doodle icons designed by Chris Spooner includes 14 graphics tailored specifically for bloggers. Including social media graphics for Delicious, Design Float, Digg, Facebook, StumbleUpon, Technorati and Twitter as well as commonly used icons such as RSS, Home, Comments, Contact and Wordpress.

FreeHand ColorStroked Icon Pac (download)
This pack includes many social media icons such as Delicious, Digg, Flickr, StumbleUpon, Technorati, Twitter and WordPress.

Related Posts

- 10 Beautiful icons set for web developers and designers
- Beautiful and free social websites icon set for bloggers
- 10 High resolution relaxing wallpapers for your desktop

Read More

Add a retweet counter on your website with ReTweet.com

Some time ago I wrote a popular post about how to integrate into your web pages a Tweetmeme button that shows the number of retweets received by a single post or page of your blog or website. In the past days a new service, similar to Tweetmeme, has been launched. This service is ReTweet.com that shows popular links being retweeted across Twitter and provides a simple widget that shows the number of retweets received by your posts.


You can quickly integrate into your site this widget, which shows a button with a counter, just in some seconds using two lines of JavaScript code. There are two versions of the button, big and small:

If you are a Blogger user find this code:

<b:includable id='post' var='post'>
<div class='post hentry'>

...and if you want to add the big button add immediately after the last row this code:

<script type="text/javascript">
url = '<data:post.url>';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

If you prefer the smaller button use this code:

<script type="text/javascript">
url = '<data:post.url>';
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

If you use another blogging platform and want to add a ReTweet.com button on your website the only thing you have to change from the previous code is the value of the var url. Take a look at the official page here.

Read More

Elegant ScrollPanes with jQuery and CSS3

Some day ago I twittered a link about TweetTab a nice on-line service (similar to Monitter) to monitor in real time Twitter trends and custom searches. I like the design of TweetTab, clean and simple and I like in particular scrollpane used in each search tab. Take a look at this screenshot of TweetTab for a preview of the scrollpane used:

Some readers of woork asked to me how to implement that kind of scrollpane in their web projects. This is very simple using jSrcollPane, a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style.
I prepared a simplified version ready to reuse in your project using jQuery and some lines of CSS3 code. You can download the source code here .





Step 1. HTML code
First of all, you have to include jQuery and jScrollPane into the <head> tag of your web page:

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

Now create a DIV element into the tag <body> of your page. This layer will contain a certain number of child elements, for example &lt;p> tags:

<div id="section-scroll" class="scroll-pane">

<p> ... </p>

<p> ... </p>

<p> ... </p>

<p> ... </p>

</div>

<p> elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:

.scroll-pane {

width: 400px;
height: 250px;
overflow:auto;

}

It's important set a fixed height and the property overflow to "auto". This is the result:

Now add this JavaScript code below the inclusion of jScrollPane (in the <head> tag) to initialize the script for the layer with ID="section-scroll":

<script type="text/javascript">

$(function()
{

$('#section-scroll').jScrollPane();

});

</script>

You can also use this script with multiple elements in the same page. The only thing you have to do is create several layers like this:

<div id="section-scroll-1" class="scroll-pane"> ... </div>
<div id="section-scroll-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>

...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:

<script type="text/javascript">

$(function()
{

$('#section-scroll-1').jScrollPane();
$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();

});

</script>

Step 2. CSS Code
Now take a look at CSS code. I prepared a very basic code you can quickly customize in your web projects. I used border-radius property to design HTML elements with rounded corners. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer. I already wrote this post about how to solve this problem with every browsers I suggest you to read.

.scroll-pane {

width: 400px;
height: 250px;
overflow:auto;
float: left;

}

/*JScrollPane CSS*/
.jScrollPaneContainer {

position: relative;
overflow: hidden;
z-index: 1;
padding-right: 20px;

}
.jScrollPaneTrack{

position:absolute;
cursor:pointer;
right:0;
top:0;
height:100%;

}
.jScrollPaneDrag{

position:absolute;
background:#CCC;
cursor:pointer;
overflow:hidden;
-moz-border-radius:6px;
-webkit-border-radius:6px;

}

.scroll-pane{padding:0;}
.scroll-pane p{

-moz-border-radius:6px;
-webkit-border-radius:6px;
background:#232323;
padding:12px;
color:#CCC;
font-size:14px;
line-height:16px;

}

The final result is something like this:

You can change it how you prefer for your web sites. That's all! Download the source code.
For other information about jScrollPane, thake a look at the official page.

Read More