Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<meta name="description" content="Simple BioJS example" />
​
<!-- include MSA js + css -->
<script src="https://s3-eu-west-1.amazonaws.com/biojs/msa/latest/msa.js"></script>
<link type=text/css rel=stylesheet href=https://s3-eu-west-1.amazonaws.com/biojs/msa/latest/msa.css />
  
​
<!-- optional: menubar -->
<link type=text/css rel=stylesheet href=  https://raw.githubusercontent.com/greenify/biojs-vis-msa/master/external/jquery.dropdown.css />
  
<!-- optional: tinier menu -->
<style>
.biojs_msa_menubar .biojs_msa_menubar_alink {
  font-Size: 14px;
  margin-Left: 5px;
  padding: 3px 5px 3px 5px;
}
</style>
  
<div id="menuDiv"></div>
<div id="yourDiv">press "Run with JS"</div>
​
 
​
 
var opts = {};
​
// set your custom properties
// @see: https://github.com/greenify/biojs-vis-msa/tree/master/src/g 
opts.seqs = msa.utils.seqgen.getDummySequences(1000,300);
opts.el = document.getElementById("yourDiv");
opts.vis = {conserv: false, overviewbox: false}
opts.zoomer = {alignmentHeight: 405, labelWidth: 110,labelFontsize: "13px",labelIdLength: 50}
​
// init msa
var m = new msa.msa(opts);
​
// the menu is independent to the MSA container
var menuOpts = {};
menuOpts.el = document.getElementById('div');
menuOpts.msa = m;
var defMenu = new msa.menu.defaultmenu(menuOpts);
m.addView("menu", defMenu);
​
// call render at the end to display the whole MSA
m.render();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
globalmeadepro
0viewers