Source

hello / js / index.html

Full commit
kuen...@kushana.… aaa8fc5 







Kota UENISHI 744ad32 


















kuen...@kushana.… aaa8fc5 







































































































<html>
<head>
  <script type="text/javascript" src="webtoolkit.drag.js" ></script>
  <script type="text/javascript" src="form.js" ></script>
  <link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>

  <h2>WebGL</h2>
  <script type="text/javascript">
    //<!-- 
	 function webGLStart() {
    var canvas = document.getElementById("canvas0");
    initGL(canvas);
    initShaders();
    initBuffers();

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clearDepth(1.0)
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

    setInterval(drawScene, 15);
  }
  //-->
  </script>
  
<h2>realtime reflection form</h2>
        <table class="bbs">
          <tr>
            <th>05/12/06</th>
            <td id="protitle"/>
            <td>

              <a id="proname"></a>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <p id="preview"></p>
            </td>
          </tr>
        </table>
        <form id="post" onSubmit="trysubmit(); return(false);" method="post" action="/ans/backyard/diary_post.php?case=post">
          <table style="background-color:#dfdfdf; border:solid 1px black;">
            <tr>
              <th>
                <input type="hidden" name="passwd" value="1234"/>
                <input type="hidden" name="poster_id" value="14"/>
                <label for="poster">name:</label>
              </th>

              <td>
                <input type="text" name="nickname" id="tmpname" onKeyUp="updateProname();"/>
              </td>
            </tr>
            <tr>
              <th>
                <label for="title">title:</label>
              </th>

              <td>
                <input type="text" name="title" id="tmptitle" onKeyUp="updateProtitle();"/>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <textarea name="text" id="text" cols="55" rows="10" onKeyUp="updatePreview();"></textarea>
              </td>

            </tr>
            <tr>
              <td colspan="2">
                <input type="submit" value="submit"/>
              </td>
            </tr>
          </table>
        </form>

<hr/>
<h2>draggable!!!</h2>
thx 2 <a href="http://www.webtoolkit.info/javascript-drag-and-drop-handler.html">webtoolkit</a> 
via <a href="http://snippets.dzone.com/posts/show/4097" >DZone snippets</a>
<div id="info">Start drag process...</div>
<div id="container" style="width: 200px; height: 200px; background: lightblue; border: 1px bold black;">

<div id="dragable1" style="position: relative; width:50px; height:50px; background:silver; border: 1px dashed red;"></div>
<div id="dragable2" style="position: relative; width:60px; height:50px; background:silver; border: 1px dashed red;"></div>
<div id="dragable3" style="position: relative; width:70px; height:50px; background:silver; border: 1px dashed red;"></div>

<script type="text/javascript">

	function begin (element, x, y) {
		var s = '#' + element.id + ' (begin drag)' + ' x:' + x + ', y:' + y;
		updateInfo(s);
	}

	function drag (element, x, y) {
		var s = '#' + element.id + ' (dragging)' + ' x:' + x + ', y:' + y;
		updateInfo(s);
	}

	function end (element, x, y) {
		var s = '#' + element.id + ' (end drag)' + ' x:' + x + ', y:' + y;
		updateInfo(s);
	}

	function updateInfo(s) {
		document.getElementById('info').innerHTML = s;
	}

	var dragable1 = DragHandler.attach(document.getElementById('dragable1'));
	var dragable2 = DragHandler.attach(document.getElementById('dragable2'));
	var dragable3 = DragHandler.attach(document.getElementById('dragable3'));

	dragable1.dragBegin = begin;
	dragable1.drag = drag;
	dragable1.dragEnd = end;

	dragable2.dragBegin = begin;
	dragable2.drag = drag;
	dragable2.dragEnd = end;

	dragable3.dragBegin = begin;
	dragable3.drag = drag;
	dragable3.dragEnd = end;

</script>

</div>
</body>
</html>