Simple Alphabetical Glossary Using jQuery

Exclusive offer: get 50% off this eBook here
jQuery UI 1.6: The User Interface Library for jQuery

jQuery UI 1.6: The User Interface Library for jQuery — Save 50%

Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library

$26.99    $13.50
by K.Vivekanand | August 2009 | Open Source

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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.

jQuery UI 1.6: The User Interface Library for jQuery Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library
Published: February 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

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.

Books From Packt

Learning jQuery 1.3
Learning jQuery 1.3

Grok 1.0 Web Development
Grok 1.0 Web Development

Drupal 6 Social Networking
Drupal 6 Social Networking

jQuery Reference Guide
jQuery Reference Guide

Learning Joomla! 1.5 Extension Development
Learning Joomla! 1.5 Extension Development

JBoss Portal Server Development
JBoss Portal Server Development

WordPress Plugin Development (Beginner's Guide)
WordPress Plugin Development (Beginner's Guide)

Drupal 6 Site Blueprints
Drupal 6 Site Blueprints

No votes yet
Looking forward to have my say by
Hi - I am certainly happy to discover this. cool job!
seo by
Wow this information is great! Thanks this has helped me alot! Im sure your post's are one of the best out there! always so acurate!
seo by
Wow this information is great! Thanks this has helped me alot! Im sure your post's are one of the best out there! always so acurate!
Can't wait to make a contribution by
Hey - I am definitely glad to find this. great job!
Can't wait to have my say by
Hi - I am certainly glad to discover this. great job!
Greetings by
Hi all allowed, today I managed to log the foremost period in the forum, all the same his common readers I force been for some time. I am pleased that I could be part of this colorful community

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
G
t
K
7
Y
Z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software