xlayout

A Javascript and CSS based layout library for laying out divs in your HTML document. Similar to Jquery UI layout.

Installation

============== Download the folders js and style. The js contains the javascript file xlayout.js. The folder style contains the css file xlayout.css and a couple of images that help render the resize bars.

	<link rel="stylesheet" type="text/css" href="xlayout.css"/>
	<script src="xlayout.js"></script>

Note: Above example assumes that you have placed the js file and the css in the same location as your html.

Tutorial

You can read the wall of text below or you can visit my tutorial website right here on Github! ==========

• Overview

  The name Xlayout originates from the idea of two layout types: Horizontal and Vertical that are laid out in a cross pattern. This arrangement can be used to generate a complete border pattern of panels laid out in sections of north, center, south, west and east. Any number of nesting can be used to generate complex panel based layouts.

  Browsers supported

  • Firefox 15.x and newer.
  • Chrome 21.x and newer.
  • Opera 11.x and newer.
  • Safari 5.x and newer.
  • Internet Explorer 9.x and newer

  Creating a simple 5 panel layout

  HTML

  		<div id="container">
  			<div class="hlayout_north"> Header   </div>
  			<div class="hlayout_center">
  				<div class="vlayout_west"> West  </div>
  				<div class="vlayout_center"> Body  </div>
  				<div class="vlayout_east"> East  </div>
  			</div>
  			<div class="hlayout_south"> Footer  </div>
  		</div>
    	

  Javascript

    
  	window.onload=function() {new Xlayout('container')};	
  	

  Example

  This will give you a 5 panel vertical layout like this

  <div>
  <strong>Tip</strong>:Panels are identified by certain pre defined values for the class attribute. All horizontal panel class names start
  with <code>hlayout_</code> and vertical ones with <code>vlayout_</code>. Each layout can have a maximum of three
  panels. For vertical the panel class names end with <code>north</code>, <code>center</code> and <code>south</code>
  and for horizontal they are <code>west</code>, <code>center</code> and <code>east</code>. 
  </div>
  
  <h4>Fixed layout or scaling on browser resize</h4>
  	<p>In the example above if we load the example page and then resize the browser window, notice how the layout changes automatically to fit the new size of the window.
  	Thus the layout 'scales' on browser window resize. This is the default behavior when we create the Xlayout object with only the placeholder argument.</p>
  	<p>However we can change this behavior and keep the layout fixed at a given height and width.</p>
  	<p>To do that we have to change the html to specify a height and width to the placeholder div.</p> 
  	
  <pre>
  &lt;div id="placeholder" style="width:200px;height:200px;"&gt;
  	&lt;div class="hlayout_north"&gt; Header   &lt;/div&gt;
  	&lt;div class="hlayout_center"&gt;
  		&lt;div class="vlayout_west"&gt; West  &lt;/div&gt;
  		&lt;div class="vlayout_center"&gt; Body  &lt;/div&gt;
  		&lt;div class="vlayout_east"&gt; East  &lt;/div&gt;
  	&lt;/div&gt;
  	&lt;div class="hlayout_south"&gt; Footer  &lt;/div&gt;
  &lt;/div&gt;
  </pre>
  <div>
  <strong>Tip</strong>:The center panel in a layout is mandatory. All the panels of a layout have to be siblings
  ie have to appear next to each other.
  </div>
  <h6>Javascript<h6>
  <pre>
  window.onload=function() {new Xlayout('placeholder', 'fixed')};
  </pre>
  <h6>Example:</h6>
  <p>Run the <a href="http://internationalist.github.io/xlayout/fixedsize.html" class="plainlink">example</a> to see how the layout is not resized when the browser window is resized.</p>
  
  <p>We can change the behavior to utilize the full screen and scale with browser resize if we change the argument to 'window'.</p>
  <p>This is also the default option.</p>
  <pre>
  window.onload=function() {new Xlayout('container', 'window')};
  </pre>
  
  <h4>The configuration object.</h4>
  <p>It is possible to specify configuration values to set the height and width of each individual panel.</p>
  <p>Xlayout has default values for the sizes of each panel these are:</p>
  <ul>
  	<li>Header - <strong>20%</strong></li>
  	<li>Footer - <span style="margin-left:7px;"><strong>20%</strong></span></li>
  	<li>West - <span style="margin-left:17px;"><strong>25%</strong></span></li>
  	<li>East - <span style="margin-left:19px;"><strong>25%</strong></span></li>
  </ul>
  <p>In Addition these are the other configuration options that Xlayout has default values for.</p>
  <p>Some of these are:</p>
  <ul>
  	<li><strong>resizable</strong> (You can set panels to be resizable or not default:true)</li>
  	<li><strong>resizebar</strong> (You can show or hide the resize bar default:true)</li>
  	<li><strong>border</strong> (You can add or remove borders from panels default:true)</li>
  </ul>
  <p>It is possible to override these default values. In this section we will show how this is to be done.
  </p>
  <p>Below is the complete code for a simple 3 pane panel with a footer, left menu and content</p>
  <pre>
  &lt;html&gt;
  	&lt;head&gt;
  		&lt;link rel="stylesheet" type="text/css" href="xlayout.css"/&gt;
  		&lt;script src="xlayout.js"&gt;&lt;/script&gt;
  		&lt;script&gt;
  			window.onload=function() {new Xlayout('container', 'window')};
  		&lt;/script&gt;
  	&lt;/head&gt;
  	&lt;body&gt;
  		&lt;div id="container" style="width:200px;height:200px;"&gt;
  		&lt;div class="hlayout_north"&gt; Header   &lt;/div&gt;
  		&lt;div class="hlayout_center"&gt;
  		&lt;div class="vlayout_west"&gt; West  &lt;/div&gt;
  		&lt;div class="vlayout_center"&gt; Body  &lt;/div&gt;
  		&lt;/div&gt;
  		&lt;/div&gt;
  	&lt;/body&gt;
  &lt;/html&gt;		
  </pre>
  <p style="clear:both">You can see this example here:<a href="http://internationalist.github.io/xlayout/threepaneldefault.html" class="plainlink">Example</a> </p>
  <h6>Changing panel default options</h6>
  <p>Now we will change some of the default options. We want to change the header size to only about 5% of the height and also to remove any resize bars</p>
  <p>To do this we change the javascript to the one below.</p>
  <pre>
  window.onload=function() {new Xlayout('container', 'window',
  	{
  		default:{
  			northheight:5,
  			resizebar:false
  		}
  	}
  )};
  </pre>
  
  <h6>Example<h6>
  <p>You can see the example here:<a href="http://internationalist.github.io/xlayout/threepanelcustom.html" class="plainlink">Example</a> </p>
  <p>So what we did here was pass in a Json configuration object to override xlayout's internal defaults. We set the 'northheight' i.e the height of the header panel to 5% of the page height and also turned off all resize bars.</p>