Search jQuery

jQuery Forum

How to get this script to update automatically

in Using jQuery • 8 years ago

I'm new to jQuery and a Javascript novice. I would love some involvement in developing the following script. It keeps three liquid columns to the same height even though their contents vary. It works fine until the browser window is dragged to a new size.

There are lots of things that could be done to improve it but getting it to adjust as the window is dragged to a new size is my immediate interest.

Thanks to anyone that can help.

<!DOCTYPE html>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<style type="text/css">
#container div {
 float: left;
 width: 30.3%;
 margin: 0 1%;
 background: grey;
}
</style>
 
</head>
<body>

<div id="container">

 <div> 
 <h3>Div One</h3>

 <p>Paragraphs of varying length.</p> 
 </div>
 
 <div> 
 <h3>Div Two</h3>
 <p>Paragraph two</p> 
 </div>
 
 <div> 
 <h3>Div Three</h3>
 <p>The point is that the height of each of the divs can vary because of the paragraphs.</p> 
 </div>

 
</div>

<script>

$ (
 function() {
 
 var fhf = $("#container div:first").innerHeight();
 var fhl = $("#container div:last").innerHeight();
 
 if (fhl > fhf) {
 $("#container div").each(function() {
 $(this).css('height', fhl);
 }); 
 } 
 
 else {
 $("#container div").each(function() {
 $(this).css('height', fhf);
 }); 
 }

});

</script>
</body>
</html>

Replies(13)

kbwood.au

Re: How to get this script to update automatically

8 years ago

Just add a handler for the resize event on the window. Moving the changes into a separate function makes it easier to call in the two situations.

$(function() {
adjustColumns();
$(window).resize(adjustColumns);
});
function adjustColumns() {
var h = Math.max($('#container div:first').innerHeight(),
$('#container div:last').innerHeight());
$('#container div').css('height', h);
}

LearnMonk..

Re: How to get this script to update automatically

8 years ago

This is lovely stuff. Thank you. I'm really enjoying using jQuery - it's like the collective has thought of everything. I'll let you know if I run into any problems.

LearnMonk..

Re: How to get this script to update automatically

8 years ago

Okay so I've run into a snag and I think I know what it is but don't know what to do about it.

adjustColumns() works for columns whose height has been dictated by their content however once the function has been run once their height has been defined based on the variable h which is based on their height which is based on the variable h and so it's no longer got anything to do with the liquid content inside the columns.

Does that make sense? I know what I'm trying to say makes sense I just don't know whether I've communicated it well.

Man, now I'm out of ideas for the time being.

kbwood.au

Re: How to get this script to update automatically

8 years ago

Try resetting the height before recalculating:

function adjustColumns() {
$('#container div').css('height', 'auto');
var h = Math.max($('#container div:first').innerHeight(),
$('#container div:last').innerHeight());
$('#container div').css('height', h);
}

LearnMonk..

Re: How to get this script to update automatically

8 years ago

That's perfect! Thanks very much. It's all so simple, clean and pleasing when you're doing what was intended to be done with these tools. It really is good stuff isn't it? Works a treat now.

So all in all the code is this:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#container div {
float: left;
width: 30.3%;
margin: 0 1%;
background: green;
}
</style>
</head>
<body>
<div id="container">
<div>
<h3>Div One</h3>
<p>Paragraph two. Whatever length over paragraph two.</p>
</div>
<div>
<h3>Div Two</h3>
<p>Paragraph two - Known to be the shortest.</p>
</div>
<div>
<h3>Div Three</h3>
<p>Paragraph three - Longer than paragraph two by an unknown amount..</p>
</div>
</div>
<script>
$(function() {
adjustColumns();
$(window).resize(adjustColumns);
});
function adjustColumns() {
$('#container div').css('height', 'auto');
var h = Math.max($('#container div:first').innerHeight(),
$('#container div:last').innerHeight());
$('#container div').css('height', h);
}
</script>
</body>
</html>

superfici..

Reageren: How to get this script to update automatically

8 years ago

might not be what you initially asked but this can be done simpler with CSS

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container > div{
display:table-cell;
width: 30.3%;
margin: 0 1%;
background: green;
}
</style>
</head>
<body>
<div id="container">
<div>
<h3>Div One</h3>
<p>Paragraph two. Whatever length over paragraph two.</p>
</div>
<div>
<h3>Div Two</h3>
<p>Paragraph two - Known to be the shortest.</p>
</div>
<div>
<h3>Div Three</h3>
<p>Paragraph three - Longer than paragraph two by an unknown amount..</p>
</div>
</div>
</body>
</html>

Notable is that this doent work that well with older browsers, but since you're using HTML5 that shouldn't be much of a problem ;)

Hope it helps,
Superficial.

LearnMonk..

Re: Reageren: How to get this script to update automatically

8 years ago

That is great to know. Unfortunately it throws up a problem of other properties being knocked out, i.e. 'margin:' no longer has any effect and I needed that.

But it's nice to have some CSS that I've never thought to use pointed out.

Right now I'm really loving using jQuery and Javascript. It seems to give so much control. How might one get inside CSS and deconstruct 'display:cell-table' to understand how it produces its effect. They must have docs one can look at somewhere, aye?

LearnMonk..

Re: How to get this script to update automatically

8 years ago

Just as an afterthought to make this code more versatile I'm trying to adapt it so that it works for any number of column and one doesn't have to ensure that either the first of the last column is the longest.

I figured I could use each() to cycle through all the #container divs and then used that string of values in the Math.max magic. Below is my best shot but it's quite clear I don't really know what I'm doing.

function adjustColumns() {
      $('#container div').css('height', 'auto');
                        var heights = $('#container div').each(function() {
                        $(this).innerHeight();
                            });
      var h = Math.max(heights);
      $('#container div').css('height', h);
}

Another thing, a bit of an aside. Why is it that when I paste my code in (from Dreamweaver) it appears above as if it's all one line? Is cutting and pasting not the way to do it?

Thanks again and best wishes.

superfici..

Reageren: How to get this script to update automatically

8 years ago

display:table-cell; makes it so that the elements you assign it to behave like cells from a <table> and that is better in terms of render speed and processing speed, because its all browser logic and therefore no JS is used.
But like always versatility and ease of use for the developer must be taken into account also, so it's your call :)

Some more info about the CSS display property can be found here.

BTW the code always looks like that when you paste it, for me also.
but i'm such a tidy freak that i always insert enters after i paste ;)

but anyways i think a bit of macro optimalisation can be done here.
store the jQuery object so you dont have to travers the DOM every time you need the divs, or on second thought, don't store it at all to save some RAM and use the fact that every function returns the jQuery object and just daisy chain the object through.
Instead of using Math.max() you can also use the < or > operators which i think work a bit faster.

function adjustColumns() {
var h = 0;
$("#container > div").css('height', 'auto').each(function() {
var tempH = $(this).innerHeight();
if (tempH > h ){
h = tempH;
}
}).height( h);
}

LearnMonk..

Re: Reageren: How to get this script to update automatically

8 years ago

One quick question if I may. I notice you use '#container > div' rather than '#container div'. I haven't picked up how to use '>'. Does that pick out the div immediately inside the #container and leave out what might be inside them? Is that valid for use with CSS as well or just in jQuery?

Cheers!

LearnMonk..

Re: How to get this script to update automatically

8 years ago

God it looks so obvious when it's handed to you on a plate doesn't it? Thanks so much. I'm absorbing a lot of ideas through you guys and I can't say enough how fit and healthy this community is. Thanks a bunch.

Oh and cheers for the w3schools link. Nice!

superfici..

Reageren: How to get this script to update automatically

8 years ago

Hi there,

The ">" indeed does what you said you think it does.
It is valid CSS selector and therefore it works great as a selector in jQuery.
I added it to make sure div's that might be added later to or inside the div's you're sizing not get sized also.

But it's my pleasure :)
Just my way of returning the favour to the community and the people involved in jQuery.
Especially since i use jQuery on a daily basis.

Superficial.

LearnMonk..

Re: Reageren: How to get this script to update automatically

8 years ago

Props to that!

Top Reply

Response title

Attachments

jQuery Forum

How to get this script to update automatically

Replies(13)

Re: How to get this script to update automatically

Re: How to get this script to update automatically

Re: How to get this script to update automatically

Re: How to get this script to update automatically

Re: How to get this script to update automatically

Reageren: How to get this script to update automatically

Re: Reageren: How to get this script to update automatically

Re: How to get this script to update automatically

Reageren: How to get this script to update automatically

Re: Reageren: How to get this script to update automatically

Re: How to get this script to update automatically

Reageren: How to get this script to update automatically

Re: Reageren: How to get this script to update automatically

Statistics

Tags

Actions