Make element square with Jquery

Home » Make element square with Jquery

“Hell-o”.

Here’s a simple and useful Jquery each function that takes the width of something and makes it’s height out of it. It also re-runs when the browser window is resized. I use it alot, it’s dead handy. You’re basically getting the width and making the height out of it.

See js snippet below. Give it a whirl:

//start doc ready
$( document ).ready(function() {


 //make somethign square
 var makesquare = function(){
  $('.makesquare').each(
    function(){
     var thisso = $(this);
     var thiswidth = thisso.outerWidth();
     thisso.css('height', thiswidth);
    }
   );
 };
 //callthe function
 makesquare();


 //fire functions on resize
 $(window).resize(function () {
  makesquare();
 });
//end doc ready
});