Letter-based Navigation using jQuery

Posted by | October 21, 2012 | JavaScript, Web Development | 6 Comments
letter-based-nav-using-jquery

Demo

Letter Based Navigation

How to create letter based navigation using Javascript and the jQuery framework which is used for manipulating HTML DOM Elements. We are going to build a letter-based navigation to filter the content of a table and a list. When clicking one of the letters, we will filters the list/table to show only the items in the list/table that start with that letter.
After adding creating the HTML structure, will add some basic css style and apply css3 transition effects to animate mouse hover on table row and hovering over a letter.


The HTML

Below the basic HTML structure.

index.html
<!doctype html>

Letter-based Navigation using jQuery
    	<link href="assets/css/styles.css" rel="stylesheet" /></pre>
<div class="wrapper">
<h1>Letter Based Navigation: Countries of the World</h1>
<div class="alphabet">
            <a class="first" href="#">A</a>
            <a href="#">B</a>
            <a href="#">C</a>
            <a href="#">D</a>
            <a href="#">E</a>
            <a href="#">F</a>
            <a href="#">G</a>
            <a href="#">H</a>
            <a href="#">I</a>
            <a href="#">J</a>
            <a href="#">K</a>
            <a href="#">L</a>
            <a href="#">M</a>
            <a href="#">N</a>
            <a href="#">O</a>
            <a href="#">P</a>
            <a href="#">Q</a>
            <a href="#">R</a>
            <a href="#">S</a>
            <a href="#">T</a>
            <a href="#">U</a>
            <a href="#">V</a>
            <a href="#">W</a>
            <a href="#">X</a>
            <a href="#">Y</a>
            <a class="last" href="#">Z</a></div>
<div id="conutries">
<table id="countries-table">
<thead>
<tr>
<th>
                           Country Name</th>
<th>
                            Country Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Afghanistan</td>
<td>AF</td>
</tr>
<tr>
<td>Aland Islands</td>
<td>AX</td>
</tr>
<tr>
<td>Albania</td>
<td>AL</td>
</tr>
<tr>
<td>Algeria</td>
<td>DZ</td>
</tr>
</tbody>
</table>
</div>
</div>
<pre>
    <!-- Include JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="assets/js/script.js"></script>


The CSS

The content of our table and letters are in the wrapper element. We add the basic css style and give it a slick look. We also give it a width and center it with the margin declaration.

assets/css/styles.css
.wrapper
{
    width: 680px;
    margin: 0 auto;
}

    .wrapper h1
    {
        color: #555;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.15) 0px 0px 1px;
        letter-spacing: 2px;
    }

#conutries
{
    width: 650px;
    background: white;
}

.alphabet
{
    margin: 0 0 10px;
    overflow: hidden;
}

    .alphabet a, #countries-table tr
    {
        transition: background-color 0.3s ease-in-out;
        -moz-transition: background-color 0.3s ease-in-out;
        -webkit-transition: background-color 0.3s ease-in-out;
    }

    .alphabet a
    {
        width: 20px;
        float: left;
        color: #333;
        cursor: pointer;
        height: 20px;
        border: 1px solid #CCC;
        display: block;
        padding: 2px 2px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
        border-right: none;
        text-decoration: none;
        background-color: #F1F1F1;
    }

        .alphabet a.first
        {
            border-radius: 3px 0 0 3px;
        }

        .alphabet a.last
        {
            border-right: 1px solid silver;
            border-radius: 0 3px 3px 0;
        }

        .alphabet a:hover,
        .alphabet a.active
        {
            background: #FBF8E9;
            font-weight: bold;
        }

The jQuery Code

We are using jQuery methods for manipulating event listeners when DOM is ready and on li click event.

assets/js/script.js
$(function () {
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () {
        var _letter = $(this), _text = $(this).text(), _count = 0;

        _alphabets.removeClass("active");
        _letter.addClass("active");

        _contentRows.hide();
        _contentRows.each(function (i) {
            var _cellText = $(this).children('td').eq(0).text();
            if (RegExp('^' + _text).test(_cellText)) {
                _count += 1;
                $(this).fadeIn(400);
            }
        });
    });
});

We have created our letter based navigation using jQuery. We are not going to get into the details of jQuery. Note: the version used in this article is jQuery v1.8.2. It will also work with older versions of jQuery.


avatar

About Farid

Creative web developer/designer, big fan of HTML5, CSS3 and client-side development. Lead software developer at Allegra Strategies London.

  • Hq

    Thank you, this is a great article. Love the design.

  • Wal

    Awesome it’s reallly nice. thank you very much!

  • http://www.faridesign.net/ Farid Hayati

    Your welcome

  • Gaurav Mittal

    Hi, nice article, But how to add “All” link. If i need to view all listing ???

  • Andre Flatwhiteweb

    Hi mate, thanks for this, any idea how can we make this works in IE7+IE8?

  • alexander

    Hello, Farid.

    Does your script work with cyrillic letters ?