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.
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
Post a Comment