Make element square with Jquery | Double Marvellous
Back to Blog
Development Jul 13, 2024 4 min read

Make element square with Jquery

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:

<pre>

//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 });



</pre>

Double Marvellous

AI Chatbot

Double Marvellous.