jQuery Plugin For Chemical Element Symbols - Elementize

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

<h1>Drum-Taps</h1>

4. Call the plugin with options

<script>
$(function() {
$("h1").elementize({
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'
});
});
</script>

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.