d3/drag2 .org source
#+title: d3 draggable object example #2 -- inline
#
# org-publish options
# H:2 controls section numbering.
# number top-level and second-level headings only
# ^:{} require a_{b} before assuming that b should be subscripted.
# without this option a_b will automatically subscript b.
#+options: ^:{}
#
# options used exclusively by emacs
#+startup: showall
#
# options used exclusively by the html exporter
#+language: en
#+infojs_opt: view:showall toc:nil ltoc:nil mouse:#ffc0c0 path:/web/ext/orginfo/org-info.js
#+html_head: <script type="text/javascript" src="/web/ext/d3/d3.v3.min.js"></script>
#+html_head: <script type="text/javascript" src="drag-example.js"></script>
#+html_head: <link rel="stylesheet" type="text/css" href="/web/css/notebook.css" />
#+html_link_home: ../../index.html
#+html_link_up: ../../index.html
* Introduction
This is similar to example /#1/ (file:../drag1/index.org),
except we now demonstrate html + javascript inline in the org-mode-generated html file
- ~.org~ source for this page is here: file:index-src.org
* Prerequisites
As for example /#1/ (file:../drag1/index.org)
* Procedure
** Load d3 in html ~<head>~ element, at the top of ~.org~ file
#+begin_example
,#+html_head: <script type="text/javascript" src="/ext/d3/d3.js"></script>
,#+html_head: <script type="text/javascript" src="drag-example.js"></script>
#+end_example
** Create html fragment inline in .org file:
This causes frame to appear when this document finishes loading,
(so it should likely already be present :-)
#+begin_example
,#+begin_export html
<div id="frame" style="border: 1px solid blue"></div>
<script type="text/javascript">
window.onload = function() { ex.start(this); }
</script>
#+end_export
#+end_example
(box with draggable circle appears below if-and-only-if publishing to html)
#+begin_export html
<div id="frame" style="border: 1px solid blue; max-width: 60em"></div>
<script type="text/javascript">
window.onload = function() { ex.start(this); }
</script>
#+end_export
Author: Roland Conybeare
Created: 2024-09-08 Sun 18:01
Validate