- parent.innerHTML =
- "<table border='1'>" +
- "<tr><td>" +
- "<b>Default interaction model</b>" +
- "<div id='div_g' style='width:600px; height:300px;'></div>" +
- "</td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>" +
- "</td></tr>" +
- "<tr><td>" +
- "<b>No interaction model</b>" +
- "<div id='div_g2' style='width:600px; height:300px;'></div>" +
- "</td><td>Click and drag all you like, it won't do anything!" +
- "<div id='g2_console'></div>" +
- "</td></tr>" +
- "<tr><td>" +
- "<b>Custom interaction model</b>" +
- "<button id='restore3'>Restore Position</button>" +
- "<div id='div_g3' style='width:600px; height:300px;'></div>" +
- "</td><td>" +
- "Zoom in: double-click, scroll wheel<br/>" +
- "Zoom out: ctrl-double-click, scroll wheel<br/>" +
- "Standard Zoom: shift-click-drag" +
- "Standard Pan: click-drag<br/>" +
- "Restore zoom level: press button<br/>" +
- "</td></tr>" +
- "<tr><td>" +
- "<b>Fun model!</b>" +
- "<div id='div_g4' style='width:600px; height:300px;'></div>" +
- "</td><td>" +
- "Keep the mouse button pressed, and hover over all points" +
- "to mark them." +
- "</td></tr>" +
- "</table>";
+ parent.innerHTML = [
+ "<h3>Default interaction model</h3>",
+ "<div style='width:600px;'>",
+ " <p style='text-align:center;'>",
+ " Zoom: click-drag, Pan: shift-click-drag, Restore: double-click",
+ " </p>",
+ " <div id='div_g' style='width:600px; height:300px;'></div>",
+ "</div>",
+ "",
+ "<h3>Empty interaction model</h3>",
+ "<div style='width:600px;'>",
+ " <p style='text-align:center;'>",
+ " Click and drag all you like, it won't do anything!",
+ " </p>",
+ " <div id='div_g2' style='width:600px; height:300px;'></div>",
+ "</div>",
+ "<div id='g2_console'></div>", // what is this?
+ "",
+ "<h3>Custom interaction model</h3>",
+ "<div style='width:600px;'>",
+ " <p style='text-align:center;'>",
+ " Zoom in: double-click, scroll wheel<br/>",
+ " Zoom out: ctrl-double-click, scroll wheel<br/>",
+ " Standard Zoom: shift-click-drag",
+ " Standard Pan: click-drag<br/>",
+ " Restore zoom level: press button<br/>",
+ " </p>",
+ " <button id='restore3'>Restore position</button>",
+ " <div id='div_g3' style='width:600px; height:300px;'></div>",
+ "</div>",
+ "<h3>Fun model!</h3>",
+ "<div style='width:600px;'>",
+ " <p style='text-align:center;'>",
+ " Keep the mouse button pressed, and hover over all points",
+ " to mark them.",
+ " </p>",
+ " <div id='div_g4' style='width:600px; height:300px;'></div>",
+ "</div>"
+ ].join('\n');