Website Development Resources
CHouseLive

Use Jquery to set equal column heights

Sole Trader

A sole trader is a business in which one person provides the permanent finance and, in return, has full control of the business and is able to keep all of the profits.

  • Advantages
  • easy to set up - no legal formalities
  • owner has complete control
  • owner keeps all profits
  • able to choose times and patterns of working
  • able to establish close personal relationships with staff and customers
  • business can be based on interests or skills of the owner.
  • Disadvantages
  • unlimited liability - all of owner's assets are potentially at risk
  • often faces intense competition from bigger firms, for example food retailing
  • owner is unable to specialise in areas of the business that are most interesting - is responsible for all aspects of management
  • difficult to raise additional capital
  • long hours often necessary to make business pay
  • lack of continuity - as the business does not have seperate legal status, when the owner dies the business ends too.
Business Studies, Second Edition; Peter Stimpson & Alastair Farquharson; © Cambridge University Press 2010; Pages: 20-21

Matt Hobbs has developed a neat little jquery plugin which allows differnet page elements to have an equal height. This plugin is very easy to implement, simply being a case of setting the elements you wish to equalize in a jquery call.

<div id="advantage">
</div>
<div id="disadvantage">
</div>
  1. Attach the JQuery library

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    You can also download your own copy of the JQuery library.

  2. Attach Matt Hobbs' Equal Columns script

    /**
     * @projectDescription	Simple Equal Columns
     * @author 	Matt Hobbs
     * @version 	0.01
     */
    jQuery.fn.equalCols = function(){
    	//Array Sorter
    	var sortNumber = function(a,b){return b - a;};
    	var heights = [];
    	//Push each height into an array
    	$(this).each(function(){
    		heights.push($(this).height());
    	});
    	heights.sort(sortNumber);
    	var maxHeight = heights[0];
    	return this.each(function(){
    		//Set each column to the max height
    		$(this).css({'height': maxHeight});
    	});
    };
  3. In the head of your page use a jquery call to set which elements must be equalized.

    <script type="text/javascript">
    jQuery(function($){
    	//Select the columns that need to be equal e.g
    	$('#advantage,#disadvantage').equalCols();
    });
    </script>

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org