javascript - Why aren't my HTML controls responding? -

i'm trying sigma.js prototype working. when click dragnode button should execute javascript add sigma functionality.

currently, page loads, none of controls respond (click click cursor inside text box, can't press buttons).

debbuging in console reveals no errors.

is perhaps simple importing of sigma.js modules disables controls?

<!-- start sigma imports --> <script src="js/sigma/src/sigma.core.js"></script> <script src="js/sigma/src/conrad.js"></script> <script src="js/sigma/src/utils/sigma.utils.js"></script> <script src="js/sigma/src/utils/sigma.polyfills.js"></script> <script src="js/sigma/src/sigma.settings.js"></script> <script src="js/sigma/src/classes/sigma.classes.dispatcher.js"></script> <script src="js/sigma/src/classes/sigma.classes.configurable.js"></script> <script src="js/sigma/src/classes/sigma.classes.graph.js"></script> <script src="js/sigma/src/classes/sigma.classes.camera.js"></script> <script src="js/sigma/src/classes/sigma.classes.quad.js"></script> <script src="js/sigma/src/classes/sigma.classes.edgequad.js"></script> <script src="js/sigma/src/captors/sigma.captors.mouse.js"></script> <script src="js/sigma/src/captors/sigma.captors.touch.js"></script> <script src="js/sigma/src/renderers/sigma.renderers.canvas.js"></script> <script src="js/sigma/src/renderers/sigma.renderers.webgl.js"></script> <script src="js/sigma/src/renderers/sigma.renderers.svg.js"></script> <script src="js/sigma/src/renderers/sigma.renderers.def.js"></script> <script src="js/sigma/src/renderers/webgl/sigma.webgl.nodes.def.js"></script> <script src="js/sigma/src/renderers/webgl/sigma.webgl.nodes.fast.js"></script> <script src="js/sigma/src/renderers/webgl/sigma.webgl.edges.def.js"></script> <script src="js/sigma/src/renderers/webgl/sigma.webgl.edges.fast.js"></script> <script src="js/sigma/src/renderers/webgl/sigma.webgl.edges.arrow.js"></script> <script src="js/sigma/src/renderers/canvas/sigma.canvas.labels.def.js"></script> <script src="js/sigma/src/renderers/canvas/sigma.canvas.hovers.def.js"></script> <script src="js/sigma/src/renderers/canvas/sigma.canvas.nodes.def.js"></script> <script src="js/sigma/src/renderers/canvas/sigma.canvas.edges.def.js"></script> <script src="js/sigma/src/renderers/canvas/sigma.canvas.edges.curve.js"></script> <script src="js/sigma/src/renderers/canvas/sigma.canvas.edges.arrow.js"></script> <script     src="js/sigma/src/renderers/canvas/sigma.canvas.edges.curvedarrow.js"></script> <script     src="js/sigma/src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script> <script     src="js/sigma/src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script> <script     src="js/sigma/src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script> <script     src="js/sigma/src/renderers/canvas/sigma.canvas.edgehovers.curvedarrow.js"></script> <script     src="js/sigma/src/renderers/canvas/sigma.canvas.extremities.def.js"></script> <script src="js/sigma/src/renderers/svg/sigma.svg.utils.js"></script> <script src="js/sigma/src/renderers/svg/sigma.svg.nodes.def.js"></script> <script src="js/sigma/src/renderers/svg/sigma.svg.edges.def.js"></script> <script src="js/sigma/src/renderers/svg/sigma.svg.edges.curve.js"></script> <script src="js/sigma/src/renderers/svg/sigma.svg.labels.def.js"></script> <script src="js/sigma/src/renderers/svg/sigma.svg.hovers.def.js"></script> <script src="js/sigma/src/middlewares/sigma.middlewares.rescale.js"></script> <script src="js/sigma/src/middlewares/sigma.middlewares.copy.js"></script> <script src="js/sigma/src/misc/sigma.misc.animation.js"></script> <script src="js/sigma/src/misc/sigma.misc.bindevents.js"></script> <script src="js/sigma/src/misc/sigma.misc.binddomevents.js"></script> <script src="js/sigma/src/misc/sigma.misc.drawhovers.js"></script> <!-- end sigma imports --> <script     src="js/sigma/plugins/sigma.plugins.dragnodes/sigma.plugins.dragnodes.js"></script>    <script src="js/jquery.js"></script> <script src="js/sigma-drag-node.js"></script> <script>     function onload() {         alert("on load start");         var frm = $('#myform');         frm.submit(function(ev) {              mydata = frm.serialize();              $.ajax({                 type : frm.attr('method'),                 url : frm.attr('action'),                 data : mydata,                 success : function(data) {                     afterqueryisrun(data);                  },                 error : function(data) {                      seterror("error");                  },                 timeout : function(data) {                     seterror("timeout");                 }             });              ev.preventdefault();         });          alert("on load end");     }      function afterqueryisrun(data) {         $('#pdisplay').text(data);     }      function seterror(msg) {         $('#pdisplay').text(msg);     }      function asubmit() {         $('#pdisplay').text("hello world");     }      function bsubmit() {      } </script>   </head>  <body onload="onload()">     <form id="myform" name="myform" method="post" action="servejson">         <input id="texttext" name="texttext"> <input type="submit"             value="submit" />      </form>      <input type="button" value="drag node" onclick="dragnode()" />      <p>     <p id="pdisplay">aaaaa</p>       <div id="container">         <style> #graph-container {     top: 0;     bottom: 0;     left: 0;     right: 0;     position: absolute; }  #sidebar {     bottom: 0;     right: 0;     width: 200px;     height: 150px;     position: absolute;     background-color: #999;     padding: 10px; } </style>         <div id="graph-container"></div>         <div id="sidebar">this area not drop target.</div>     </div> </body> </html> 

the graph-container div overlapping controls.

change positioning of div in style sheet fix. \

<style> #graph-container {     top: 100px;     bottom: 200px;     left: 0;     right: 100px;     background-color: #d3d3d3;     position: absolute; }  #sidebar {     bottom: 0;     right: 0;     width: 200px;     height: 150px;     position: absolute;     background-color: #999;     padding: 10px; } </style> 

(switched light grey clarity).