Drag and Drop

A gridster configuration object. Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements. Horizontal and vertical margins respectively for widgets. Base widget dimensions in pixels. The first index is the width, the second is the height. extra_rows: 0 Add more rows to the grid in addition to those that have been calculated. extra_cols: 0 max_cols: null The maximum number of columns to create. min_cols: 1 The minimum number of columns to create. min_rows: 15 The minimum number of rows to create. max_size_x: false The maximum number of columns that a widget can span. autogenerate_stylesheet: true Don't allow widgets loaded from the DOM to overlap. A function to return serialized data for each each widget, used when calling the serialize method. draggable.start: function(event, ui){} A callback for when dragging starts. draggable.drag: function(event, ui){} A callback for when the mouse is moved during the dragging. draggable.stop: function(event, ui){}

Draggabilly 960 Grid System Masonry Options All options are optional, but columnWidth and itemSelector are recommended. Recommended itemSelector Specifies which child elements will be used as item elements in the layout. We recommend always setting itemSelector. itemSelector is useful to exclude sizing elements or other elements that are not part of the layout. itemSelector: '.grid-item' <div class="grid"><div class="static-banner">Static banner</div><div class="grid-item"></div><div class="grid-item"></div> ... columnWidth Aligns items to a horizontal grid. We recommend setting columnWidth. Use element sizing for responsive layouts with percentage widths. <div class="grid"><div class="grid-sizer"></div><div class="grid-item"></div><div class="grid-item grid-item--width2"></div> ... columnWidth: '.grid-sizer', itemSelector: '.grid-item', percentPosition: true Layout Element sizing Sizing options columnWidth and gutter can be set with an element. The option can be set to a Selector String or an Element. gutter gutter: 10 percentPosition stamp

HTML Forms: From Basics to Style: Layouts Now that we have discussed the different elements of a form, it's time to look into putting it all together. The layout of a form is crucial--a bad layout will cause confusion, make the form difficult to use, and drive away your traffic. In this article, I will discuss different table layouts and how to achieve the same results using pure CSS. There are several ways to design a form. Our First Form The form we will start off with will be a shipping address form. Figure 1 A Little Better The first problem is that there is nothing to indicate what these fields are for. Figure 2 This is better, but the form fields do not line up very well--time to add some CSS. A Lot Better In Figure 3 below, we've added some CSS to align the fields and make the form labels bold. Figure 3 Other Form Layout Examples Right justified fields are just one example. Figure 4 Figure 5 Required Fields As good as the form looks, how do we know which fields are required and which ones are optional? Figure 6 Figure 7 Figure 8

Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.