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

sample-jquery-marker.htm / htm



  <!DOCTYPE html>
  <html>
  <head>

default style & script(s)


    <link type="text/css" href="../media/marker/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../media/marker/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="../media/marker/ui.core.js"></script>
    <script type="text/javascript" src="../media/marker/ui.draggable.js"></script>

style(s) 


    <style type="text/css">
      .draggable { width: 100px; height: 15px; 
                   z-index:3;
                   border-style:solid; background: silver; }
      #status { x:10px; y:500px; width: 300px; height: 20px;
                background: black; color: silver;
                display:none;
              }
      #board { left:120px; top:0px; width: 800; height: 500;
               position: absolute; z-index:1;
                background: silver; color: black;
              }
    </style>
    <script type="text/javascript">

global variable(s)


  
 see student-wave-nm1-index.htm

    var no = 0;
    var xPos = 0;
    var yPos = 0;
    function send(name) {
       no++;
       // alert(name + " " + no + ":" + xPos + "/" + yPos);
       }
    </script>

jquery ready script 


    <script type="text/javascript">
  
    document.ready(function(){
      $(".draggable").draggable();

drag handler


      
      // $(".draggable").({ zIndex: 2700 });
      $(".draggable").bind('drag', function(e, ui) {
      xPos = e.pageX; yPos = e.pageY;
      this.html(this.attr('id') + ": "  + e.pageX +', '+ e.pageY);
      // this.html(": " e.pageX +', '+ e.pageY);
      });

stop & update


      $(".draggable").bind('dragstop', function(e, ui) {
      xPos = e.pageX; yPos = e.pageY;
      $("#status").html(this.attr('id') + ':  ' +  e.pageX +', '+ e.pageY);
      send(this.attr('id'));
      });
    });
    </script>
  </head>

body /with status & draggable 


  <body style="background:black; font-size:62.5%;">
    
  <div id="status"></div>
  
  <script type="text/javascript">

generate


  document.write("<div id=marker-1 class=draggable>X1</div>");
  document.write("<div id=marker-2 class=draggable>X2</div>");
  </script>
  <div id=board>
  <iframe width=800 height=500 src=sample-js-draw.htm>
  </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.