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-cattle-index.htm / htm



  <html>
   <head>
    <title>[Cattle] Board Demo</title>

default / include(s) 


    <link rel="stylesheet" type="text/css" href="student-wave-cattle-style.css" />
    <script type="text/javascript" src="student-wave-cattle-inc-js-jquery.js"></script>
    <script type="text/javascript" src="student-wave-cattle-inc-js-jquery-ui.js"></script>

script(s) 


    <script type="text/javascript">
     document.ready(function(){
      
      function log(msg) {
       $("#log").show();
       $('#log').append(msg+"<hr />");
      }
">-->

update(s) -- using interval(s) -->


      
      var updateBoxes = setInterval(function() {
       .post(<student-wave-cattle-update.php>, {action:"update"}, updateHandler, "json");
      }, 1000);
      
      var cleanBoxes = setInterval(function() {
       $(".box").remove()
      }, 100000);

update box / map(s)


      
      function updateHandler(data) {
       .each(data, function(i, b) {
        var box = $('#box_'+b.rowid);
        if (box.length>0) {
         var x = parseInt(box.css('left'))-parseInt(b.x);
         var y = parseInt(box.css('top'))-parseInt(b.y);
         var hyp = Math.sqrt(x*x+y*y);
         if (hyp > 0 && !box.hasClass('lock')) {
          box.animate({
           left: b.x,
           top: b.y,
          }, hyp*2);
         }

create box


        } else {
         var box = $("<div id='box_"+b.rowid+"' style='display:none;' class=box>" +b.text+"</div>");
         box.css('top',b.y);
         box.css('left',b.x);
         box.appendTo("body");
         box.fadeIn(1200);
         box.draggable({ cursor: 'crosshair' });
         box.bind('dragstart', function(e, ui) {
          this.addClass('lock');
         });

and bind drag handler


         box.bind('dragstop', function(e, ui) {
          .post(<student-wave-cattle-update.php>, {
           action:"move",
           x:this.css('left'),
           y:this.css('top'),
           id: this.attr('id').substr(4),
          }, updateHandler, "json");
          //this.removeClass('lock');
          setTimeout("$('#"+this.attr('id')+"').removeClass('lock')", 1000); 
         });
        }
       });
      }

new box


  
      function newBox(text) {
       .post(<student-wave-cattle-update.php>, {action: "new", text: text});
      }

adjust interface


  
      $('#add').click(function() {
       var text = prompt('Type in a word or a sentence (max. 140 chars):');
       newBox(text);
      });
      
      $('#help').click(function() {
       $('#helptext').slideToggle("fast");
      });
      
      $('#clear').click(function() {
       var b = confirm("Do you really want to delete all objects?\nThis will not be synchronized instantly.\nIt will cause confusion!!!");
       if (b) .post(<student-wave-cattle-update.php>, {action: "delete", boxid: "all"});
      });

set hover


      
      $('.button').hover(function() {
       this.css('cursor','pointer');
      });
     });
    </script>
   </head>
  <!-@ body: mene / add / clear / help -->
   <body>
    <div id="menu">
    <div id="add" class="button">add</div>
    <div id="clear" class="button">clear</div>
    <div id="help" class="button">help
     <span id="helptext">
      Hit "add" to add a word or sentence to the pane. Move them via drag'n'drop.
      You See other peoples words and movements on this page, and they see yours!
     </span>
    </div>
    </div>

and log


    <div id="log"></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.