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