jQuery is a JavaScript Library, where you can utilize and develop innovative web reusable components. "jQuery simplifies traversing of HTML document, simplifies event handling, animating and Ajax interactions". Using jQuery, we can develop and add robust web components to our web applications. It is very light weight—about 19KB in size (Minified and Gzipped) and can be downloaded from this location http://jquery.com/. In this article by K.Vivekanand, we will explain how we can develop a Simple Alphabetical Glossary, which can be used in our web projects. A glossary is an alphabetical list of terms with the definitions for those terms. In this example, you can click on the respective alphabet to get you the definition/list of that term with highlighted blue color.

Adding jQuery to your page

As we have discussed above you can download the latest version of jQuery from jQuery site (http://jquery.com/) and can be added as a reference to your web pages accordingly. You can reference a local copy of jQuery using <script> tag in the page. Either you can reference your local copy or you can directly reference remote copy from jQuery.com or Google Ajax API (http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js)

Prerequisite Knowledge

In order to understand the code, one should have the basic knowledge of HTML, CSS, JavaScript and basic knowledge of jQuery.

Ingredients Used

• HTML
• CSS
• jQuery
• Photoshop (Used for Designing the Button Background)

Preview/Download

If you would like to see the working example, click the following link: http://www.developersnippets.com/snippets/jquery/alphabetical_glossary/alphabetical_glossary.html. And if you would like to download the snippet, click the following link: http://www.developersnippets.com/snippets/jquery/alphabetical_glossary.zip.

Figure 1: Snapshot of "Simple Alphabetical Glossary using jQuery"

Figure 2: Overview of div’s and Listings used

Figure 3: Image used for Listings (CSS Sprite)

Successfully tested

The above application is successfully tested on various browsers like IE 6.0, IE 7, IE 8, Mozilla Firefox (Latest Version), Google Chrome and Safari Browser (4.0.2) respectively.

HTML Code

Below is the HTML code with comments for you to better understand.

<div id="body-container">
    <div class="glossary-container">
        <ul class="firstUL">
            <li id="a" class="selected">A</li>
            <li id="b">B</li>
            <li id="c">C</li>
            <li id="d">D</li>
            <li id="e">E</li>
            <li id="f">F</li>
            <li id="g">G</li>
            <li id="h">H</li>
        </ul>
    </div> <!-- Close of glossary-container -->
    <div class="content-container">
        <!-- A -->
        <div id="content-for-a" style="background-color:#d2e2fc">
        	<!-- Content for A --> 
        </div>
        
        <!-- B -->
        <div id="content-for-b">
	        <!-- Content for B -->
        </div>
        
        <!-- C -->
        <div id="content-for-c">
	        <!-- Content for C -->        
        </div>

        <!-- D -->
        <div id="content-for-d">
	        <!-- Content for D -->        
        </div>
    </div> <!-- Close of content-container -->
</div> <!-- Close of body-container -->

Explanation of HTML Code

To get the UI shown in above screenshot, I have written some HTML div tags to hold the Glossary terms in one container and the results in another container. CSS styles are used to assign some nice colors.

<div id="body-container">.....</div>

I have used "body-container" as the main container to catch hold of other two div containers.

<div class="glossary-container">.....</div>

"glossary-container" contains a glossary term that is Alphabets, as of now in this example I have used alphabets only from "A" to "H".

<div class="content-container">.....</div>

In "content-container" I have arranged all the results or definitions of glossary terms, for each and every glossary term I have used separate <div> tags like for Alphabet "A" --- <div id="content-for-a" style="background-color:#d2e2fc">....</div>, and given default background color as "background-color:#d2e2fc" which highlights the definition accordingly.

After going through the HTML code, we will have a glance on CSS styling. This is very important to give a good look and feel to the application.

Explanation of CSS Code

<style>

/* Making margin and padding to 0, since by default the body will be allocated some amount 
   of pixels of margin and padding. */
body{
      margin:0;
      padding:0;
}

#body-container{
      width:415px; /* Given a constant width of 415px to body-container div */
      height:500px; /* Given a constant height of 500px to the div */
      margin:0 auto; /* This will align the div to center */
      border:1px solid #3285ef; /* Giving the border */
}

#body-container .glossary-container{
      clear:both; /* This will not allow floating elements on either sides */
}

#body-container .content-container{
      height:430px; /* Given a constant height of 430px to the div */
      width:415px; /* Given a constant width of 415px to the div */
      overflow:auto; /* Scroll bar is shown when content is more than specified height */
      font-family:'Arial',Verdana,Tahoma; /* Taken the default font to 'Arial' */
      font-size:10pt; /* Making font size to 10 points */
      clear:both; /* This will not allow floating elements on either sides */
}

#body-container .content-container div{
      padding-left:10px; /* Left padding given as 10px */
      border-bottom:1px #666666 solid; /* In order to separate each terms given bottom 
                                            border color as #666666 (gray) with 1px */
}

#body-container .content-container div h2{
      margin-top:0px; /* Making the top margin to 0px */
}

#body-container .content-container p.return-to-top{
      color:#0066FF; /* Giving text color to Return to top text */
      text-decoration:underline; /* The text will be underlined */
      text-align:right; /* Text will be aligned to right */
      margin-right:10px; /* Given some margin 10px to right */
      cursor:pointer; /* Making the cursor to 'hand' */
}

.firstUL{
      padding:0px 0px 0px 10px; /* Given some padding to left and 0 padding to 
                                     top, right, bottom */
      margin:0px; /* margin to 0px */
      background-color:#3285ef; /* Given background color */
}

.firstUL li {
      background:transparent url(images/link_sprite_img.jpg) no-repeat scroll 0 0; 
          /* For all li’s(listings) given default background image using CSS Sprite concept */
      display:inline; /* Listings will be placed in a line */
      font-family:'Arial',Verdana,Tahoma; /* Setting the font to 'Arial' */
      font-size:16pt; /* Setting the font size to 16 points */
      font-weight:bold; /* Making the text to bold */
      padding:10px 15px 22px; /* Given some padding to top, right, bottom and left */
      line-height:70px; /* This property specifies the line height */
      cursor:pointer; /* Making the cursor to 'hand' */
}

.firstUL li.selected{
      background:transparent url(images/link_sprite_img.jpg) no-repeat scroll 0px -57px; 
      /* When any listing is highlighted, we are given the background to image using CSS 
         Sprite concept */
      color:#ffffff; /* Making the font color 'white' */
      font-weight:bold; /* Making text bold */
}
</style>

Explanation of jQuery Code

In order to work your jQuery code, as mentioned above in "Adding jQuery to your page" section, we need to include jQuery JavaScript file onto your web page using <script> tag.

<!-- jQuery -->
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>

I have downloaded the jQuery file from jQuery site and kept it on my local machine.

To see the scrolling effect, you need to include the following plugin:

<!-- scrollTo Plugin -->
<script language="javascript" type="text/javascript" src="js/jquery.scrollTo-min.js"></script>

You can get the above plugin at this location—http://plugins.jquery.com/project/ScrollTo

The above two .js files should be in included in <head> tag in order to utilize those in our code.

jQuery Code

<script language="javascript" type="text/javascript">
$(document).ready(function() {
	 //below code is for high-lighting the link and scroll to particular DOM Element as well
     $(".firstUL li").each(function() { 
	   $(this).click(function() { //On click of any Alphabet
	     $(".firstUL li").removeClass("selected"); //Initially remove "selected" class if any
             $(this).addClass("selected"); //Add "selected" class for the clicked one
	     elementClick = $(this).attr("id"); //get respective 'Id' for example 'a','b','c'.. etc.,
	     $(".content-container").scrollTo($("#content-for-"+elementClick), 800); 
                                                //scrollTo particular DOM Element
	     $(".content-container div").css({'background-color' : '#ffffff'}); 
                                               //set the background color to default, that is white
	     $(".content-container #content-for-"+elementClick).css({'background-color' : '#d2e2fc'}); 
                                              //set the background color to light-blue to that div
           });
      });
	 
      //When "Return to Top" is clicked highlight the first Alphabet that 'A' and scroll to top.
      $('.return-to-top').click(function(){
	     $(".firstUL li").each(function() { 
			$(".firstUL li").removeClass("selected"); //Remove classname "selected"
	     });
	     $("#a").addClass("selected"); //Add a class named "selected" to the first Alphabet
	     $(".content-container").scrollTo($("#content-for-a"), 800); 
                                      //This is for scrolling to particular element that is "A" here...
	     $(".content-container div").css({'background-color' : '#ffffff'}); 
                                    //set the background color to default, that is white
	     $(".content-container #content-for-a").css({'background-color' : '#d2e2fc'}); 
                                   //set the background color to light-blue to that div
      });
});
</script>

Summary

In this article, we saw how to create a Simple Alphabetical Glossary using jQuery. We have learnt how we can highlight particular DOM Element, how we can scroll-to particular div element using scroll-to plugin, and learnt how we can add the background-color to a div using CSS properties.

Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library Packed with examples and clear explanations to easily design elegant and powerful front-end interfaces for your web applications Organize your interfaces with reusable widgets like accordions, date pickers, dialogs, sliders, tabs, and more Enhance the interactivity of your pages by making elements drag and droppable, sortable, selectable, and resizable No experience of jQuery UI expected, but familiarity with jQuery is required Written and tested on jQuery UI 1.6 Release Candidate 2 http://www.packtpub.com/user-interface-library-for-jquery/book

About the Author

K.Vivekanand works as a Software Engineer, and has good experience in Web Development and Web Designing environment. His core skills include HTML, CSS, XML, XSLT, Adobe Products - Photoshop, Flash, Flex (Basic Level), JavaScript, Medium level knowledge on JavaScript API’s like ExtJS, Yahoo API, Google API, MooTools. He also works on PHP projects. With some knowledge of C, C++, Java, JSP, JavaBeans, he also work on developing WordPress Themes, Joomla Themes. For more information visit: http://www.developersnippets.com.