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

lib-present-jquery-desktop-basic-steps-complete-example.htm / htm



  <html>

head 


  <head>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery-1.2.6.js"></script>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery-ui-core-drag-drop-select-1.5.3.js"></script>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery.mousewheel.js" ></script>
    <link rel="stylesheet" href="lib-present-jquery-desktop-basic-steps-css-demo.css" type="text/css" media="screen" charset="utf-8">
    <title>Complete Example</title>
    <script>

script functions


      function rescale(selector, property, percent) {
        var oldValue = parseFloat(selector.css(property));
        selector.css(property, oldValue*percent);
      }
      
      function rescaleRelative(selector, property, relative, percent) {
        var oldValue = parseFloat(selector.css(property)) - relative;
        selector.css(property, oldValue*percent + relative);      
      }

project


    
      Project = function() {
        this.selectionMap_ = {};
      };
      
      Project.prototype.select = function(id) {
        this.selectionMap_[id] = id;
        $('#' + id).addClass('ui-selected');
      };
  
      Project.prototype.unselect = function(id) {
        delete this.selectionMap_[id];
        $('#' + id).removeClass('ui-selected');
      };

selected


      
      Project.prototype.isSelected = function(id) {
        return this.selectionMap_[id];
      };        
      
      Project.prototype.allSelected = function() {
        return this.selectionMap_;
      };
        
      p = new Project();

ready


      document.ready(function() {
        $('.box').dblclick(function() {
          if (p.isSelected(this.id)) {
            p.unselect(this.id);
          } else {
            p.select(this.id);
          }
        });

seleactable(s)


        
        $('#container').selectable({
          selected: function(ev, ui) {
            if (ui.selected.id) {
              p.select(ui.selected.id);
            }
          },
          unselected: function(ev, ui) {
            if (ui.unselected.id) {
              p.unselect(ui.unselected.id);
            }
          },
          filter: '.box'
        });

draggable(s)


        $('.box').draggable({
          opacity: 0.5,
          cursor: 'move',
          zIndex: 10000,
          start: function(ev, ui) {

initial position(s)


  // figure out all the initial positions for the selected elements
            // and store them.
            if (p.isSelected(ui.helper[0].id)) {
              for (id in p.allSelected()) {
                $('#'+id).data(
                  "top0", 
                  parseInt($('#'+id).css("top"),10) - 
                    parseInt($(ui.helper[0]).css("top"),10));
                $('#'+id).data(
                  "left0", 
                  parseInt($('#'+id).css("left"),10) - 
                    parseInt($(ui.helper[0]).css("left"),10));
              }
            }
          },

function drag


          drag: function(ev, ui) {
            if (p.isSelected(ui.helper[0].id)) {
              for (id in p.allSelected()) {
                if (id != ui.helper[0].id) {
                  $('#' + id).css('top',
                                  $('#'+id).data("top0") + ui.position.top);
                  $('#' + id).css('left', 
                                  $('#'+id).data("left0") + ui.position.left);              
                }
              }
            }
          },

function stop


          stop: function(ev, ui) {
            if (p.isSelected(ui.helper[0].id)) {
              for (id in p.allSelected()) {
               $('#'+id).removeData("top0");
               $('#'+id).removeData("left0");
              }
            }        
          }
        });

mousewheel


        $('#container').mousewheel(function(event, delta) {
         
          var containerTopOffset = parseFloat($('#universe').css('top'));
          var containerLeftOffset = parseFloat($('#universe').css('left'));
          var scale = 0.1;
          var percent = 1 + delta*scale;

box functions


          $('.box').each(function() {
            rescaleRelative(this, 
              'top', 
                event.clientY - 
                containerTopOffset - 
                parseFloat(this.css('height')) / 2,
              percent);
            rescaleRelative(this, 
              'left', 
                event.clientX - 
                containerLeftOffset - 
                parseFloat(this.css('width')) / 2, 
              percent);

rescale 


            rescale(this, 'width', percent);
            rescale(this, 'height', percent);
            rescale(this, 'font-size', percent);
          });
          event.preventDefault();
        });

drag delta


        var dragDelta = {
          top: $('#container').offset().top +
               $('#universe').offset().top,
          left: $('#container').offset().left +
                $('#universe').offset().left,
        };

scroll


        $('#scroll-trigger').click(function() {
          this.hide();
          var viewport = $('#container');
          $('#scroll-overlay')
            .css('left', viewport.css('left'))
            .css('top', viewport.css('top'))
            .css('width', viewport.width())
            .css('height', viewport.height())
            .css('z-index', 99)
            .css('display', '');

overlay


  
          $('#scroll-overlay').draggable({
            helper: function() {
              return $("<div />");
            },
            start: function(ev, ui) {
              var offset = $('#universe').offset();
              $('#universe')
                .data("top0", offset.top)
                .data("left0", offset.left);
            },

drag overlay


            drag: function(ev, ui) {
              var universe = $('#universe');
              var offset = universe.offset();
  
              var dragTop = ui.position.top +
                            universe.data("top0") - dragDelta.top;
              var dragLeft = ui.position.left +
                             universe.data("left0") - dragDelta.left;

universe


              $('#universe')
                .css('top', dragTop).css('bottom', -dragTop)
                .css('left', dragLeft).css('right', -dragLeft);
            },
            refreshPositions: false
          });
        });

click done


        $('#scroll-done').click(function() {
          $('#scroll-overlay')
            .css('z-index', -1)
            .css('display', 'none');
          $('#scroll-trigger').show();
        });      
        
      });
    </script>

style(s) 


    <style type="text/css" media="screen">
      .ui-selected, .ui-unselecting {
        border: 5px solid purple !important;
      }
  
      .box {
        cursor: move;
        position: absolute;
        left: 0;
      }

boxes 


      
      #box1 {
        top: 0;
      }
      
      #box2 {
        top: 160px;
      }
      
      #box3 {
        top: 320px;
      }
      
      #box4 {
        top: 480px;
      }

endless desktop, panning & scrolling 


      #scroll-trigger {
        background: transparent url(lib-present-jquery-desktop-basic-steps-img-scroll-small.png) no-repeat top left;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 32px;
        height: 32px;
        cursor: pointer;
      }

overlay 


  
      #scroll-overlay {
        background: transparent url(lib-present-jquery-desktop-basic-steps-img-scroll-big.png) no-repeat center center;
        position: absolute;
        z-index: -1;
        cursor: move;
      }

button 


      #scroll-overlay BUTTON {
        position: absolute;
        bottom: 5px;
        margin: 0 auto;
        font-size: 120%;
        left: 0;
        right: 0;
        width: 100px;
      }

container 


      #container {
        position: absolute; 
        background-color: #e5ecf9;
        top: 120px;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #7aa5d6;
        overflow: hidden;
      }

universe 


      #universe {
        position: absolute; 
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      /*  border: 1px dotted #000;*/ /* uncomment this to debug endless desktop */
      }    
    </style>
  </head>

body 


  <body>
    <h1>Complete Example</h1>
    <p>
      This example shows all the features together: dragging, selecting, panning and zooming. It creates a 2d spatial experience with no limits.<br />
      Use <tt>right click > view source</tt> to see the underlying Javascript code.
    </p>

container 


    <div id="container">
      <div id="universe">
        <div id="box1" class="box">blue</div>
        <div id="box2" class="box">red</div>
        <div id="box3" class="box">yellow</div>
        <div id="box4" class="box">green</div>
      </div>
      <div id="scroll-trigger" title="Click to pan around" >
      </div>    
    </div>
    <div id="scroll-overlay" style="display: none">
      <div><button id="scroll-done">done</button></div>
    </div>
  </body>
[] 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.