topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

student-wave-nm1-index.htm / htm



  <html>

include(s) 


   <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="student-wave-nm1-inc-style.css" />
    <script type="text/javascript" src="student-wave-nm1-inc-js-jquery.js"></script>

dialog(s) 


    <script type="text/javascript">
     document.ready(function(){
      // Ask for users name (maby ask for color/etc later)
      var username = prompt("Please enter your name:");
      var mouseX = 0;
      var mouseY = 0;
      // Store the users mouse-position
      $().mousemove(function(e){ 
 see sample-jquery-drag.htm

       mouseX = e.pageX;
       mouseY = e.pageY;
      });

notify server


      // Notify the server of users mouse-position
      var send = setInterval(function(e){
       .post(<student-wave-nm1-setPos.php>, {
         name: username,
         x: mouseX,
         y: mouseY
        }, function(data){/*$("#debug").html(data);*/});
      },400);

request positions


      // Request all users mouse-positions (including the own!)
      var recieve = setInterval(function(){
       .getJSON(<student-wave-nm1-getPos.php>, function(data) {
         /*$("#debug").html(data);*/
         // For each of the users...

process user(s)


         .each(data, function(i, pos) {
          // ...try to find a box with the corresponding id
          var box = $('#'+pos.name);
          if (box.length>0) {
           // if we already have a box, move it smoothly
           // to the new coords.
           box.animate({
            top: pos.y,
            left: pos.x,
           }, 70, "swing");

or create


          } else {
           // if we don't have a box for the user, create
           // one with his name as id and append it to our
           // document...
           var box = $("<div id="+pos.name+" class=box>"
              +pos.name+"</div>");
           box.css('top',pos.y);
           box.css('left',pos.x);
           box.appendTo("body");
          }
         });
        });
      },300);
     });
    </script>
   </head>

body / debug 


   <body>
    <div id="debug"></div>
   </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.