Load Data from Another HTML Element

Q

How to load molecule data from another HTML element into the Embedded 3Dmol Viewer?

✍: FYIcenter.com

A

You can use "data-element" and "data-type" attributes on the DIV element to load molecule data another HTML element into the Embedded 3Dmol Viewer.

Here is an HTML code example, Embedded-Viewer-data-element.html, that loads a Tyrosine molecule in SDF format from a "textarea" element:

<html>
<body>
<div style="width: 400px; height: 400px; position: relative;"
  class="viewer_3Dmoljs"
  data-element="molecule"
  data-type="sdf"
  data-style="stick"
  data-ui="true"
></div>
<textarea id="molecule" style="visibility:false">
Tyrosine
OpenBabel12202223253D

 24 24  0  0  1  0  0  0  0  0999 V2000
    0.2346    1.1180    0.6636 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.6024    1.1693    0.9366 C   0  0  0  0  0  0  0  0  0  0  0  0
    2.3968    0.0571    0.6860 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.8450   -1.1101    0.1715 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.4760   -1.1613   -0.1008 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3418   -0.0457    0.1367 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.8217   -0.0980   -0.1789 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.2094    0.3058   -1.6135 C   0  0  3  0  0  0  0  0  0  0  0  0
   -1.9196    1.7891   -1.8827 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.1048    2.7203   -1.1142 O   0  0  0  0  0  0  0  0  0  0  0  0
   -1.4853    2.0312   -3.1421 O   0  0  0  0  0  0  0  0  0  0  0  0
   -1.5851   -0.5669   -2.6443 N   0  0  0  0  0  0  0  0  0  0  0  0
    3.7287    0.1533    0.9615 O   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3764    1.9954    0.8686 H   0  0  0  0  0  0  0  0  0  0  0  0
    2.0447    2.0732    1.3445 H   0  0  0  0  0  0  0  0  0  0  0  0
    2.4570   -1.9853   -0.0236 H   0  0  0  0  0  0  0  0  0  0  0  0
    0.0468   -2.0765   -0.5045 H   0  0  0  0  0  0  0  0  0  0  0  0
   -2.3546    0.5404    0.5390 H   0  0  0  0  0  0  0  0  0  0  0  0
   -2.1849   -1.1157    0.0196 H   0  0  0  0  0  0  0  0  0  0  0  0
   -3.2946    0.1928   -1.7225 H   0  0  0  0  0  0  0  0  0  0  0  0
   -1.3696    3.0047   -3.1659 H   0  0  0  0  0  0  0  0  0  0  0  0
   -0.5713   -0.4527   -2.5720 H   0  0  0  0  0  0  0  0  0  0  0  0
   -1.8070   -0.1527   -3.5547 H   0  0  0  0  0  0  0  0  0  0  0  0
    4.1492   -0.6956    0.7485 H   0  0  0  0  0  0  0  0  0  0  0  0
  1  6  1  0  0  0  0
  1  2  2  0  0  0  0
  1 14  1  0  0  0  0
  2  3  1  0  0  0  0
  2 15  1  0  0  0  0
  3  4  2  0  0  0  0
  3 13  1  0  0  0  0
  4  5  1  0  0  0  0
  4 16  1  0  0  0  0
  5  6  2  0  0  0  0
  5 17  1  0  0  0  0
  6  7  1  0  0  0  0
  7  8  1  0  0  0  0
  7 18  1  0  0  0  0
  7 19  1  0  0  0  0
  8 12  1  0  0  0  0
  8  9  1  0  0  0  0
  8 20  1  0  0  0  0
  9 11  1  0  0  0  0
  9 10  2  0  0  0  0
 11 21  1  0  0  0  0
 12 22  1  0  0  0  0
 12 23  1  0  0  0  0
 13 24  1  0  0  0  0
M  END
$$$$
</textarea>
<script src="/3Dmol-min.js"></script>
</body></html>

This example HTML code will displays the Tyrosine molecule structure:

Embedded 3Dmol Viewer - data-element={ID} Example
Embedded 3Dmol Viewer - data-element={ID} Example

 

UI Components of Embedded 3Dmol Viewer

Load Data by URL into Embedded 3Dmol Viewer

Using Embedded 3Dmol Viewer

⇑⇑ 3Dmol.js FAQ

2023-01-31, 275🔥, 0💬