CodePen

HTML

            
              
            
          
!
via HTML Inspector

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function Surface (jelem, width, height) {
    
    // Add an element to the surface
    // jelem:  jQuery object representing the DOM element
    // x,y:    Top left corner (virtual coordinates)
    // w,h:    Width and height of the element in (virtual coordinate sizes)
    // return: An integer representing the created surface element

    this.Add_Elem = function (jelem, x, y, w, h) {...};

    
    // Remove an element from the surface
    // ielem: index of the element to be removed.  This must be a value returned
    //        by Add_Elem
    
    this.Remove_Elem = function (ielem) {...};

    
    // Sets the scaling of the virtual coordinates to actual pixel positions on
    // the screen.
    // pwidth,pheight:  Pixel width and height of the surface that the virtual
                        coordinates must be mapped to
                        
    this.Set_Scale = function (pwidth, pheight) {...};

    
    // Positions all the elements added to the surface based on the current
    // scaling
    
    this.Position_All = function () {...};

    // Move an element from it's current position to a new one
    // to_x, to_y:  The virtual coordinates to move the element to
    // callback:    a function to be called when the move has occured.  This is
    //              relevant when the move is animated and not happening
    //              instantly
    
    this.Move_Elem = function (ielem, to_x, to_y, callback) {...};

        
    // Change the duration of the animation of a move
    // offset:  The change to the current duration in milliseconds.  The initial
    //          duration is 300ms
    
    this.Change_Duration = function (offset) {...};
}


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................