7 min read

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 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.




  • A

  • B

  • C

  • D

  • E

  • F

  • G

  • H

























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.

.....

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

.....

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

.....

In “content-container” I have arranged all the results or definitions of glossary terms, for each and every glossary term I have used separate

tags like for Alphabet “A” —
….
, 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


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 tag.



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:



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 tag in order to utilize those in our code.

jQuery Code


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.


Subscribe to the weekly Packt Hub newsletter. We'll send you the results of our AI Now Survey, featuring data and insights from across the tech landscape.

* indicates required