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-endless-desktop.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>
    <link rel="stylesheet" href="lib-present-jquery-desktop-basic-steps-css-demo.css" type="text/css" media="screen" charset="utf-8">
    <title>Endless Desktop</title>
    <script>

ready


      document.ready(function() {
        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


            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
          });
        });

done


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

style 


    <style type="text/css" media="screen">
      /* Endless desktop, Panning and 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: 200px;
        left: 0;
        border: 1px solid #7aa5d6;
        overflow: hidden;
        width: 450px;
        height: 450px;
      }

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>Endless Desktop</h1>
    <p>
      This demo demonstrates how to create an endless panning area, pretty much like <b>Google Maps</b>. It relies on the use of 2 nested DIVs: one representing the viewport (or container), the other representing the drawing area (called <tt>universe</tt>). The drawing area contains all the elements and moves relatively to the viewport. Since the viewport uses the <tt>overflow:hidden</tt> directive, it limits the amount of viewable items.<br />
      Click the icon on the lower right corner and then <b>drag</b> the mouse around the pan the viewport.<br />
      Use <tt>right click > view source</tt> to see the underlying Javascript code.
    </p>

container / universe 


    <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.