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-collect-marker-marker-12-ma.htm / htm



  <!DOCma html>
  <html>
  <head>

default style & script(s)


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

style(s) 


    <style type="text/css">
      .draggable { width: 120px; 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:140px; 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') + " " + "<br>"  + e.pageX +', '+ e.pageY);
           var red = Math.floor((255 * ((550-yPos)/550)) % 255);
           var blue = Math.floor((255 * (xPos/950)) % 255);
           // var yellow = Math.floor((255-Math.abs(red-blue)) % 255);
           // var yellow = Math.floor((255-Math.abs(red-blue)) * (red/255) * (blue/255)) % 255;
           var yellow = Math.floor( 1.1 * (255-Math.abs(red-blue)) * (red/255) * (blue/255)) % 255;
           var color = "rgb(" + red + "," + yellow + "," + blue + ")";
           //alert(color);
           this.css('border-color',color);
           // $('body').css('background',color);
      // 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);
      this.html(
           this.attr('id') + " " + 
           "<a href=" + this.attr('url') + " " + 
           "target=iframe" + ">" + 
           "<img align=right width=15 height=15 src=" + "@logo.gif" + ">" +
           "</a>" +
           "<br>"  + e.pageX +', '+ e.pageY);
           var red = Math.floor((255 * ((550-yPos)/550)) % 255);
           var blue = Math.floor((255 * (xPos/950)) % 255);
           // var red = Math.floor((255 * ((480-yPos)/480)) % 255);
           // var blue = Math.floor((255 * (xPos/860)) % 255);
           var yellow = Math.floor( 1.1 * (255-Math.abs(red-blue)) * (red/255) * (blue/255)) % 255;
           var color = "rgb(" + red + "," + yellow + "," + blue + ")";
           // alert(color);
           this.css('border-color',color);
           $('body').css('background',color);
      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=AE url=sample-collect-marker-sample-js-draw.htm class=draggable>instructor</div>");
  // document.write("<div id=marker-2 class=draggable>X2</div>");
  </script>
  <script type=text/javascript src=sample-collect-marker-12.js></script>
  <div id=board>
  <iframe
   allowtransparency="true"
   style="opacity: 0.7;"
   name=iframe width=800 height=500 src=sample-collect-marker-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.