Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #16674 > unrolled thread

I want to place the canvas on left and 2 Items on right

Back to article view | Back to comp.lang.javascript

Contents

  I want to place the canvas on left and 2 Items on right gearss8888@gmail.com - 2012-10-16 23:18 -0700
    Re: I want to place the canvas on left and 2 Items on right Danny <dann90038@gmail.com> - 2012-10-17 13:02 -0700

#16674 — I want to place the canvas on left and 2 Items on right

I am a Javascript newbie， I want to place the canvas on left and 2 Items on right, the following is my codes, please help me.
Liwen
-----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>javaScriptDropDownMenu</title>
   <style type="text/CSS">
   * { padding:0; margin:0; }
   body { font-family:verdana, sans-serif; font-size:small; }
   #navigation, #navigation li ul { list-style-type:none; }
   #navigation { margin:20px; }
   #navigation li { text-align:center; position:relative;}
   #navigation li a:link, #navigation li a:visited {
   display:block; text-decoration:none; color:#000;
   width:120px; height:40px; line-height:40px;
   border:1px solid #fff;
   border-width:1px 1px 0 0;
   background:#c5dbf2;
   padding-left:10px;
   }
   #navigation li a:hover { color:#fff; background:#2687eb; }
   #navigation li ul li a:hover { color:#fff; background:#6b839c; }
   #navigation li ul {
   display:none;
   position:absolute;
   top:0px;
   left:130px;
   margin-left:1px;
   width:120px;
   }
   #navigation li ul li ul {
   display:none;
   position:absolute;
   top:0px;
   left:0;
   margin-top:0;
   margin-left:1px;
   width:120px;
   }
   </style>
</head>
<body>
<input type=button value="Point" onClick="draw_point()" name="point_btn">
<input type=button value="Line" onClick="draw_line()" name="line_btn">
<input type=button value="Perpen" onClick="draw_perpendicular_line()" name="perpendicular_btn">
<input type=button value="Circle" onClick="draw_circle()" name="circle_btn">
   <ul id="navigation">
   <li style="width:120px" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
   <a href="#">Item1</a>
   <ul>
   <li><a href="#">Item1->Menu1</a></li>
   <li><a href="#">Item1->Menu2</a></li>
   <li><a href="#">Item1->Menu3</a></li>
   <li><a href="#">Item1->Menu4</a></li>
   </ul>
   </li>
   <li style="width:120px" id="tb0" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
   <a href="#">Item2</a>
   <ul>
   <li><a href="#">Item2->Menu1</a></li>
   <li><a href="#">Item2->Menu2</a></li>
   <li><a href="#">Item2->Menu3</a></li>
   <li><a href="#">Item2->Menu4</a></li>
   <li><a href="#">Item2->Menu5</a></li>
   </ul>
   </li>
   </ul>
<p><canvas id="canvas1" width="1000" height="800"></canvas></p>
<script id="script1" type="text/javascript">
   function displaySubMenu(li) {
   var subMenu = li.getElementsByTagName("ul")[0];
   subMenu.style.display = "block";
   }
   function hideSubMenu(li) {
   var subMenu = li.getElementsByTagName("ul")[0];
   subMenu.style.display = "none";
   }

var draw_canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var process_draw = new Processing(draw_canvas, sketchProc);
process_draw.noLoop();
process_draw.size(1000, 800);
draw_canvas.addEventListener('click', user_click_mouse, false);
//draw_canvas.addEventListener('mousemove', mouse_is_moving, false);
// p.exit(); to detach it
</script>
</body>

[toc] | [next] | [standalone]

#16693

so you know, this is a js channel :), your query would have been more apt for comp.infosystems.www.authoring.stylesheets :)

anyhow, check -> http://www.webdevout.net/test?0N&raw
lines 71-77, 84, 85
I put your '(nav)igation', in a <nav> element, line 86, and added a couple of canvas polylines :), but, there :)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web