jQuery Plugin For Chemical Element Symbols - Elementize

jQuery Plugin For Chemical Element Symbols - Elementize
File Size: 23.8KB
Views Total: 746
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Elementize is a funny jQuery text plugin that allows to replaces any chemical element symbols encountered inside the matched element contents with periodic table blocks.

How to use it:

1. Include jQuery library and jQuery Elementize on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/elementize.min.js"></script>

2. Include required css file to style the plugin

<link href="css/elementize.min.css" rel="stylesheet" type="text/css">

3. Create the text you want to elementize


4. Call the plugin with options

$(function() {
matchCase: false, // Matches only "Be", not "BE", "be" or "bE"
displayAtomicWeight: true, // Controls display of atomic weight in the bottom right corner
displayAtomicNumber: true, // Controls display of atomic number in the top right corner
noPseudoElements: false,  // Inserts atomic number and weight in a span element rather than data-attribute and :before/:after pseudo-elements
style: 'colorize'   // Any of the following coloring styles: 'colorize', 'breaking-bad', 'clear'

Change Log:

v0.1.2 (2013-05-29)

  • Added basic Mozilla support, still looks a little werid though.

This awesome jQuery plugin is developed by dessibelle. For more Advanced Usages, please check the demo page or visit the official website.