Periodic Table Widget

Introduction

The periodic table widget provides a link that pops-up an interactive periodic table.

The pop-up is clickable, searchable, draggable, and resizable.

The widget is also available in the WordPress Qwizcards plugin.

Static images

Demo

https://qwizcards.net/periodic-table-widget

Installation

Example shown in index.html.

In brief, need jQuery:

   <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
   <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
   <link rel="stylesheet" href=" https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

and scripts/css from repo:

   <script src="qwiz_periodic_table.js"></script>
   <script src="qwiz_zoom.js"></script>
   <link rel="stylesheet" href="qwiz_periodic_table.css">

In the body, create the link something like this:

   <span style="display: inline-block;" onclick="q_periodic_table_.init (this)">
      <a href="#">
         Pop-up periodic table
      </a>
   </span>