Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts

    Need help with column height script

    I'm trying to make a script that will check which of the two column heights is greater, make both equal to the greater height, then apply that height to the content wrapper.

    here's that I have so far...

    Code:
    $(document).ready(function () {				
    	var rColumnHeight = $('#right_column').css('height');
    	var lColumnHeight = $('#left_column').css('height');
          if (lColumnHeight > rColumnHeight) {
    	$('#body_content').css('height', lColumnHeight)
          }else if(rColumnHeight > lColumnHeight ){
          $('#body_content').css('height', rColumnHeight)
    }
    });
    Now this seems to work making the content wrapper's height equal to the greater column height, but I can't figure out how to make the two columns equal heights.

    Any help would be appreciated.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    You were almost there. Since you have the 'ifs' and the variables all set, you just need one more line for each column to change the height.

    Code:
    $(document).ready(function () {				
    	var rColumnHeight = $('#right_column').css('height');
    	var lColumnHeight = $('#left_column').css('height');
    	if (lColumnHeight > rColumnHeight) {
    		$('#body_content').css('height', lColumnHeight);
    		$('#right_column').css('height', lColumnHeight);
    	} else if (rColumnHeight > lColumnHeight ){
    		$('#body_content').css('height', rColumnHeight);
    		$('#left_column').css('height', rColumnHeight);
    	}
    });
    You probably want to add another line so that if the columns are equal, the body_content still gets a height applied:

    Code:
    $(document).ready(function () {				
    	var rColumnHeight = $('#right_column').css('height');
    	var lColumnHeight = $('#left_column').css('height');
    	if (lColumnHeight > rColumnHeight) {
    		$('#body_content').css('height', lColumnHeight);
    		$('#right_column').css('height', lColumnHeight);
    	} 
    	if (rColumnHeight > lColumnHeight ){
    		$('#body_content').css('height', rColumnHeight);
    		$('#left_column').css('height', rColumnHeight);
    	}
    	if (rColumnHeight == lColumnHeight ){
    		$('#body_content').css('height', rColumnHeight);
    	}
    });
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    I might be way wrong here, but I'm sure I read that that css() carries a bigger performance overhead than the width() and height() functions. If so, it might be slightly quicker to write it as:

    Code:
    $(document).ready(function () {
    	var r = $('#right_column').height();
    	var l = $('#left_column').height();
    	var maxheight = (r >= l) ? r : l;
    	$('#right_column, #left_column, #body_content').height(maxheight);
    });

  • Users who have thanked Spudhead for this post:

    gilgimech (11-19-2010)

  • #4
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Spudhead View Post
    I might be way wrong here, but I'm sure I read that that css() carries a bigger performance overhead than the width() and height() functions. If so, it might be slightly quicker to write it as:

    Code:
    $(document).ready(function () {
    	var r = $('#right_column').height();
    	var l = $('#left_column').height();
    	var maxheight = (r >= l) ? r : l;
    	$('#right_column, #left_column, #body_content').height(maxheight);
    });
    Sweat, right or not it worked thanks. I tried to tweak it with the .css(), but it didn't work.

    I'm new to jQuery and sometimes the most logical things don't seem to work. It's kinda weird.

    Like the line of script harbingerOTV suggested. I've tried that before too. It just seems to break the code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •