Atom Biology General Molecule Reaction Tools Trial Virus

Assign Embedded 3Dmol Viewer to DIV

Q

How to assign Embedded 3Dmol Viewer to a "div" element?

✍: FYIcenter.com

A

Here is an HTML code example, Embedded-Viewer-PDB.html, that assigns the Embedded 3Dmol Viewer to in "div" element. It also uses "data-*" attributes to load a protein from the PDB Websites, creates a selection from chain A and displays it in cartoon style. 

<html><head>
<script src="/3Dmol-min.js"></script>
</head>
<body>
<div style="width: 400px; height: 400px; position: relative;"
  class="viewer_3Dmoljs"
  data-pdb="1YCR"
  data-select='chain:A' data-style='cartoon:color=spectrum'
  data-ui="true"
/>
</body></html>

This example HTML code will display a PDB protein in cartoon style:

Embedded 3Dmol Viewer - Load PDB Protein
Embedded 3Dmol Viewer - Load PDB Protein

Note that the protein structure data is downloaded with the following PDB API: 

http://files.rcsb.org/view/{PDB_ID}.pdb

 

⇒ Multiple Selections with Embedded 3Dmol Viewer

⇐ What Is Embedded 3Dmol Viewer

⇑ Using Embedded 3Dmol Viewer

⇑⇑ 3Dmol.js FAQ

2023-02-04, 1015🔥, 0💬

Atom Biology General Molecule Reaction Tools Trial Virus