jQuery demo page

Note: the Xaraya_Classic theme causes most of these plugins to fail one way or another. We don't know where the fault lies, but it is something to bear in mind when trying this demo out.

portfolio - filter a list of items

fancybox - animated pop-up images

motdpopup - the means to pop up a modal message just once for any visitor

(Message Of The Day Popup)

The pop-up should appear after you view this page five times. Press the refresh button a few times to see. It will not appear again unless either the message is changed, or your cookies are cleared.

[Display message manually]

[Clear cookie]

uiTableFilter - filter a table dynamically

Your Food List
Beef, ground, 95% lean meat / 5% fat, patty, cooked, broiled
Bread, rye, toasted
Broccoli, cooked, boiled, drained, with salt
Butter, salted
CAMPBELL Soup Company, CAMPBELL'S CHUNKY Microwavable Bowls, Chicken and Dumplings Soup
CAMPBELL Soup Company, CAMPBELL'S CHUNKY Soups, Fajita Chicken with Rice & Beans Soup
Carrots, baby, raw
Cheese, swiss

QATool - a simple QA hand-holding series of steps

• Please choose an animal: bird, dog or cat.

  Does your animal have feathers?

  Yes, it has feathers.

  No, it does not have feathers.

• Your animal is a bird.

  Start Over

• Does your animal bark or meow?

  It goes "woof, woof".

  My animal says "meeow".

  Start Over

• Your animal is a dog.

  Back | Start Over

• Your animal is a cat.

  Back | Start Over

Superfish - suckerfish-inspired menus

• menu item ↓
  • subitem 1a
  • subitem 1b
  • subitem 1c
  • subitem 1d
  • subitem 1e
• menu item ↓
  • subitem 2a
  • * current *
  • subitem 2c
  • subitem 2d
  • subitem 2e
• menu item ↓
  • subitem 3a
  • subitem 3b
  • subitem 3c
  • subitem 3d
  • subitem 3e
• menu item ↓
  • subitem 4a
  • subitem 4b
  • subitem 4c
  • subitem 4d
  • subitem 4e
  • subitem 4f
  • subitem 4g
• menu item ↓
• menu item ↓
  • subitem 5a
  • subitem 5b
  • subitem 5c
  • subitem 5d
  • subitem 5e

• menu item ↓
  • subitem 1a
  • subitem 1b
  • subitem 1c
  • subitem 1d
  • subitem 1e
• menu item ↓
  • subitem 2a
  • * current *
  • subitem 2c
  • subitem 2d
  • subitem 2e
• menu item ↓
  • subitem 3a
  • subitem 3b
  • subitem 3c
  • subitem 3d
  • subitem 3e
• menu item ↓
  • subitem 4a -->
    • subitem 4a-1
    • subitem 4b-1
    • subitem 4c-1
    • subitem 4d-1
    • subitem 4e-1
    • subitem 4f-1
    • subitem 4g-1
  • subitem 4b
  • subitem 4c
  • subitem 4d
  • subitem 4e
  • subitem 4f
  • subitem 4g
• menu item ↓
  • subitem 5a
  • subitem 5b
  • subitem 5c
  • subitem 5d
  • subitem 5e

Calendar - jquery-calendar

Basic calendar pop-up

Calendar - datePicker

Advanced calendar, supporting i18n formats, defaults, linked 'range' dates, plus lots of other options.

Gallery - jqGalView

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

pngFix - deprecated

Fixes transparency of PNGs in IE5.5 and IE6

ifixpng - replaces pngFix (more flexible, but still somes unreliable on some browsers)

Fixes transparency of PNGs in IE5.5 and IE6

jCarouselLite - little brother to jCarousel

image-viewer - a simple modal image viewer

• 
• 
• 
• 

jquery.tooltip - flexible tooltips

Tooltips all work from the title attribute.

Simple example - external file

Simple example - internal block

nifty - port of the popular nifty corners cube

Provides corners on blocks without images and same-height blocks.

thickbox - the classic utility providing modal image display

Open iFrame Modal

Table Sorter

Sort the columns by clicking on the headings.

Name	Major	Sex	English	Japanese	Calculus	Geometry
Name	Major	Sex	English	Japanese	Calculus	Geometry
Student01	Languages	male	80	70	75	80
Student02	Mathematics	male	90	88	100	90
Student03	Languages	female	85	95	80	85
Student04	Languages	male	60	55	100	100
Student05	Languages	female	68	80	95	80
Student06	Mathematics	male	100	99	100	90
Student07	Mathematics	male	85	68	90	90
Student08	Languages	male	100	90	90	85
Student09	Mathematics	male	80	50	65	75
Student10	Languages	male	85	100	100	90
Student11	Languages	male	86	85	100	100
Student12	Mathematics	female	100	75	70	85
Student13	Languages	female	100	80	100	90
Student14	Languages	female	50	45	55	90
Student15	Languages	male	95	35	100	90
Student16	Languages	female	100	50	30	70
Student17	Languages	female	80	100	55	65
Student18	Mathematics	male	30	49	55	75
Student19	Languages	male	68	90	88	70
Student20	Mathematics	male	40	45	40	80
Student21	Languages	male	50	45	100	100
Student22	Mathematics	male	100	99	100	90
Student23	Languages	female	85	80	80	80

Linktracker

The database table defined in modules/jquery/xarincludes/linktracker-table.sql needs to be created before this will work.

• Linktracker 1 (no id attribute)
• Linktracker 2 (with id attribute)
• Linktracker 3
• Linktracker 4 (mail link)
• 

cycle

Cycle through a list of blocks or images using any of many different transitions.

All images and blocks must be located in an appropriately-sized container, because absolute positioning is used, so the images will be taken out of the page flow.

Note also that block elements (e.g. <p>) inside the container must be given a height and width - even if 100% - since the width seems to be reset on some browsers once cycle starts operating.

scrollFollow

Keep an object visible within the viewport.

FAQ List

Display a FAQ using a definition list, as pairs of question/answers

Open or close all answers

1. How is a question formatted?

Each question is placed into a definition term (<dt> element)

2. How is the answer formatted?

Each answer is placed into a definition data (<dd> element)

Multiple paragraphs can be included if required, along with any other kind of element or image.

Google Maps

Please add your Google Maps API keys to modules/jquery/xardata/googlemapskeys.txt

Text Truncator

Countdown

jqModal

view modal dialog | view AJAX dialog