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>