Modifiying Jquery to reset as browser window is to be re-size

I have a responsive layout with similar divs and I am applying Jquery as so all divs match the height of the one with more content. However, if the browser window is to be re-size all divs remain the same heigh as when the page was loaded making the text go out of the div. Is there a way to somehow continue running the Jquery everytime the user resize the browser window?

To be more descriptive as of what I'm trying to acomplish it is to have my divs behave (on browser window rezise)as a normal div with text content and attributes width: #%; height: auto; with the only difference that all divs will match the height of the one with the bigger height.

Here is the link of what I have: http://as.sjsu.edu/cf/vaishak/equalizeTest/index.html

Here is the Jquery that I originally have to get max height:

<script>
jQuery(function(){
var maxHeight = 0;
$(".box").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".box").height(maxHeight);
});
</script>

Here is the updated version that still doesn't work properly when window is resize.

$(document).ready(function(){
    $(window).resize(function(event) {
        resizeDiv();
    });
    $(document).ready(function(){
        resizeDiv();
    });
    function resizeDiv(){
        var maxHeight = 0;
        $(".box").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".box").height(maxHeight);
    }
    });

Any help will be greatly appreciated!

Answers


You could just forget about using JavaScript for this and use pure CSS:

http://cssdeck.com/labs/ygq5x6k3

<div class="container">
    <div>First</div>
    <div>Second</div>
</div>

.container {
    display: table; /* optional */
    width: 100%; /* optional */
}

.container div {
    display: table-cell;
}

Its flexible and works with as many "columns" as you need. Since its pure CSS, you can even disable it for mobile devices via media queries.


Absolutely, you can use JQuery's .resize() event documented here: http://api.jquery.com/resize/

For example:

$(window).resize(function() { // YOUR CODE HERE });

Then every time the window resizes, the code will run.

Here's a JSFiddle example that demonstrates when the code runs.


This is what event listeners are for. You can put your code into a function, say normalizeBoxHeight() and then call it when the browser resizes (and initially on load).

Looks like this:

jQuery(function(){

    var normalizeBoxHeight = function(){
        var maxHeight = 0;
        $(".box").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".box").height(maxHeight);
    }

    $(window).resize(normalizeBoxHeight);
    normalizeBoxHeight();

});

Need Your Help

pdfbox: how to clone a page

java pdfbox

Using Apache PDFBox, I am editing an existing document and I would like to take one page from that document and simply clone it, copying whatever elements it contains. As an additional twist, I would

Line and Line Segment intersection

math geometry line intersection

How can I detect whether a line (direction d and -d from point p) and a line segment (between points p1 and p2) intersects in 2D? If they do, how can I get their intersection point.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.