Skip to content

Instantly share code, notes, and snippets.

@tobnee

tobnee/gist:3820858

Created October 2, 2012 16:40
Show Gist options
  • Save tobnee/3820858 to your computer and use it in GitHub Desktop.
Save tobnee/3820858 to your computer and use it in GitHub Desktop.
Download ZIP
Render ChemVector (Jquery/Knockout)
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>mols</title>
<script src="/assets/javascripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/assets/javascripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<script src="/assets/javascripts/knockout-2.1.0.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/chemvector.css" />
<link rel="stylesheet/chemical" type="application/json" href="/assets/stylesheets/chemistry.json" />
<script src="/assets/javascripts/chemvector.js"></script>
<script type="text/javascript">
$(function() {
chemvector.browser.ImageLoader.init({
// startup parameters here
});
});
</script>
<script type="text/javascript">
$(function() {
var CasViewModel = function() {
self = this;
self.enabledImg = ko.observable(false);
};
var cvm = new CasViewModel();
ko.applyBindings(cvm);
});
</script>
<script type="text/javascript">
$(function() {
$("#cb").click(function() {
$(".img").append('<div id="imgdiv"> \
<div class="cell" id="resize-cell"> \
<div class="structure" id="resize-structure"> \
<object width="300" height="150" class="chemvector-object" id="resize-object"> \
<param name="src" value="/chemical/50-02-2?as=mol">\</object> \
</div> \
</div> \
</div> ');
});
});
</script>
</head>
<body>
<!-- knockout version -->
<label>
<input type="checkbox" data-bind="checked: enabledImg" />
Display Image
</label>
<div data-bind="if: enabledImg">
<div class="cell" id="resize-cell">
<div class="structure" id="resize-structure">
<object width="300" height="150" class="chemvector-object" id="resize-object">
<param name="src" value="/chemical/50-02-2?as=mol"></object>
</div>
</div>
</div>
<!--plain jquery version -->
<label>
<input type="checkbox" id="cb"/>
Display Image
</label>
<div class="img"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment