3 JQuery Features

About Blog Projects

JQuery is a powerful JavaScript library, which is becoming increasingly popular and widely supported. Here are three simple (but effective) things you can do with only a few lines of code.

Tooltip

Tooltips in JQuery are very simple to create and if designed well, they can be integrated into any page with only a few additional lines of code.

This is an example with help wording.

Below is the code behind this tooltip, notice that the id of the anchor is referenced in the 'onmouseover' method. In order to have mutiple tooltips on one page, make sure you change this ID so that it is unique. The CSS and JavaScript files can be downloaded here, along with the two images.

A snippet of HTML needs to be included, normally at the bottom of the page, which holds the container.

GalleryView

GalleryView is great for styling picture albums and navigating through lots of files. Below is an example which loops through an array of image locations. It can contain descriptions and run on page load if required, and can vary in size.

Small Medium Large

The code below is for the medium sized gallery. Notice the PHP foreach loop to reduce code, as mentioned in the above paragraph.

The gallery can be resized in the JavaScript call. Below is an example with the large gallery, because it contains dimensions for both the main image (panel width/height) and the thumbnails (frame width/height) in the bottom border.

This example can be downloaded here

DataTables can be a quick way of styling tables. It can also provide a search bar and different data ordering options.

Forename Surname Age Height(cm) Country
Alison Green 48 120 USA
Curtis Uyemoto 52 149 Japan
Barbera McKinley 31 164 Scotland
Bill Anderson 23 191 UK
Will Anderson 23 192 UK
Forename Surname Age Height(cm) Country

There are different colors associated to different "grades" in the stylesheet. In this case it signifies different height brackets. There are also color shades for odd and even rows. If there were more entries, the "previous" and "next" arrows would come in useful and the entry number dropdown could be used to show less at a time.

All the "clever" code can be downloaded here. Then all that is needed is your HTML table and some JavaScript to be called when the page loads.

Greetings, Our daily Scripture email delivery will be unavailable while we upgrade our system. We expect it to continue in the near future. We encourage you to continue to read Scripture every day, it is alive and powerful. Many devotions are available at aDevotion.org/archive as well as adevotion.blogspot.com; additional Bible teachings are available at believers.org.

ABibleverse.org pausing (God bless you!)