What kind of script do I have to add so that the boxes align themselves automatically?

Question




	nav page
	
	




	

		
			
			TAGS    PAGE
			
			
				
				dashboard
				©
			
		
		
		
		
		
	

	
		
		
			first box
			
			first link
			second link
			third link
			fourth link
			fifth link
		
		
		
			second box
			
			first link
			second link
		
		
		
			third box
			
			first link
			second link
			third link
			fourth link
			fifth link
			sixth link
			seventh link
			eighth link
			ninth link
			tenth link
		
		
		
			fourth box
			
			first link
			second link
			third link
			fourth link
			fifth link
			sixth link
		
		
		
			fifth box
			
			first link
			second link
			third link
			fourth link
			fifth link
			sixth link
			seventh link
			eighth link
			ninth link
			tenth link

I've been learning HTML and CSS at school but I'm still very insecure with javascript and jQuery and what I want to do, but don't know which code to use is basically just an automatic rearrangement of the boxes.

What I want is that no matter how many tags I add to the first box, the fifth box rearranges itself underneath the first box with a top-margin of 10px.

Thanks guys!

random_user_name · Accepted Answer

You are asking for javascript, so I will present one (of several) ways this could be done in javascript.

As was mentioned in comments, this is also possible with straight css, using FlexBox. Check it out, but also be aware of browser compatibility.

With javascript (jQuery), you would want to look at the size of all the boxes, find the "max size" (the tallest one), and then set all of them to be the same height as the tallest one.

Also, since you are a student, I will offer some advice / coaching on a few things in your markup:

First, an id should be unique to the entire page. In your code, you have many elements with the id of box:

- these should likely be changed to have a class - even box:

.

Now to the javascript:

// This is a shorthand for "document ready", and ensures you can use the `$` within the code contained inside the document ready
jQuery(function($) {
    // Set up our max height variable
    var maxHeight = 0;
    // Iterate over each box.  NOTE this assumes you've changed to class="box"
    $('.box').each(function() {
        // Use a small formula to determine if this element's height is larger, and if so, store that value in the variable
        maxHeight = Math.max($(this).height(), maxHeight);
    });
    // Now, assign that height to ALL of the boxes.
    $('.box').css('height', maxHeight);
});

Now, if you wanted to take this to the next level, you'd make this a function, and you'd call that function any time the page was resized just to be sure that they all stay the same height:

jQuery(function($) {
    function setHeights() {
        // Set up our max height variable
        var maxHeight = 0;
        // Iterate over each box.  NOTE this assumes you've changed to class="box"
        $('.box').each(function() {
            // Use a small formula to determine if this element's height is larger, and if so, store that value in the variable
            maxHeight = Math.max($(this).height(), maxHeight);
        });
        // Now, assign that height to ALL of the boxes.
        $('.box').css('height', maxHeight);
    }

    // watch the resize event, and call the setHeights function
    $(window).on('resize', function() {
        setHeights();
    });

    // Cause the heights to be adjusted on initial load
    setHeights();
});

Once you've got your head wrapped around THAT code, then you can check out even smoother / fancier ways to get the max height, such as this method: https://stackoverflow.com/a/6061029/870729

What kind of script do I have to add so that the boxes align themselves automatically?

Answers (2)

Related Questions