javascript - No connecting lines are getting displayed -


i using connector framework called js-graph-it connect elements on web page. when running html file demonstration of working of project works fine when including project, connecting lines missing.

here code

<!doctype html> <html>   <head>     <script type="text/javascript" src="js-graph-it.js"></script>     <link rel="stylesheet" type="text/css" href="js-graph-it.css">         <style>       .canvas {         font-family: tahoma;       }       .block {         position: absolute;         border: 1px solid #7dab76;         background-color: #baffb0;         padding: 3px;       }       /*.connector {         background-color: #ff9900;       }*/       .source-label, .middle-label, .destination-label {         padding: 5px;       }     </style>   </head>   <body onload="initpageobjects();">           <div class="canvas"       style="width: 1350px; height: 1250px;">         <h1 class="block" id="h1_block"         style="left: 100px; top:10px;">           h1 block       </h1>        <h2 class="block" id="h2_block"         style="left: 800px; top: 100px;">         h2 block       </h2>        <h3 class="block" id="h3_block"         style="left: 100px; top: 180px;">         h3 block       </h3>        <h2 class="block" id="h4_block"         style="left: 100px; top: 480px;">         h2_new block       </h2>    <!--   <div class="connector h1_block h2_block"></div>          <img src="arrow.gif" class="connector-start">         <img src="arrow.gif" class="connector-end">          <label class="source-label">start</label>         <label class="middle-label">middle</label>         <label class="destination-label">end</label>      </div> -->      <div class="connector h1_block h2_block">         <!-- <img class="connector-end" src="arrow.gif"> -->     </div>      <div class="connector h2_block h3_block">         <!-- <img class="connector-end" src="arrow.gif"> -->     </div>      <div class="connector h2_block h4_block">         <!-- <img class="connector-end" src="arrow.gif"> -->     </div>     </body> </html> 

and jsfiddle link

i attaching screenshot proof working standalone file. js-chart-it implemenattaion

change ondomready no wrap - in <head> in jsfiddle: http://jsfiddle.net/j6nhc9y1/3/

basically, “wrapped” options initpageobjects function won’t on top level needs in order called html inline event handler.


a better alternative create dynamic event handlers within script, e.g.:

window.addeventlistener('load',initpageobjects); 

Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -