jQuery plugin for accessing definitions from the GET-IT glossary
For detailed instructions and additional information please visit our page
This jQuery plugin allows you to connect any website to the GET-IT Glossary of definitions of medical terms. It is easy to use and will scan web page copy for tagged terms.
The plugin searches the page for <cite> tags. When it finds a suitable tag, it parses it for a data-term attribute. If it doesn't find one, it uses the innerText of the tag as the term. The plugin looks up the current definition from GET-IT Glossary and crafts a hidden pop-up bubble with the definition in it. The <cite> tag is restyled to indicate to the user that it can be clicked on.
Clicking on a marked up <cite> tag will do two things:
- Reveal the pop-up bubble above the text
- Record a hit for the term lookup in the GET-IT Glossary
The plugin can be configured in a number of ways; the target glossary can be changed, as well as the pop-up text linking to it. This plugin can be configured to either display an alternative pop-up, or to de-cite the text in the event of a definition not being available for the term.
You can install the plugin from the commandline using Bower or NPM or simply download this repository and copy the dist folder into your web site javascript folder.
Download the tarball then copy all the files from /dist/ into your scripts and css folders. Be sure to add in a call to jQuery as well as the getit script in the header section of your site.
Run this command from the root of your website:
`bower install getitglossary/jquery-getit`
Run this command from the root of your website:
`npm install getitglossary/jquery-getit`
jquery-getit will parse through the page (or a specific element, eg. .main-content) and look for text that is wrapped with a cite tag. If this text matches a term in the GET-IT Glossary, or if it has an attribute of data-term then jquery-getit will style this term and link a popup to it that provides the user with a detailed definition and links to the GET-IT Glossary.
All the visual presentation of the pop-up and cite links can be configured by editing the attached jquery.getit.css file.
Initialise the plugin and scan the target element for <cite> tags, in this case we are looking at all the <p> tags but the plugin can be configured to look at a specific .class or #id:
$('p').getit();
Developer: Robin Layfield (@ultrasimplified)
Producer: Douglas Badenoch
Designer: Tom Brooks