Modify a jQuery function to resize a div

Question

I currently use a jQuery function to create a square div. The square size is based on the height of the browser variable. It works very well.

<script>
$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('.square');
var size = square.height();

square.css('width',size);
}
</script>


.square {
height:100%;
float:left;
position:relative;
}

What I want to do is : for certains div using this function (.half), divide the width by two.

For a ".square" div : keep the width, keep the height;

For a ".square .half" div : keep the height, new width = width / 2;

I dont know how to modify my function, if someone can help me.

Thanks,

Sebastien

Answer 1

Hi There, Try this. you need to set the resize event on documnet ready.

 $(document).ready(function(){
   $(window).resize(function(){
     put your code here
});
});
});

Thanks,

Answer 2

Try this:

function updateWidth()
{
    var square = $('.square');
    var squareHalf = $('.half');
    var size = square.height();
    square.css('width',size);
    squareHalf.css({'width':''+size/2+'px','height':''+size/2+'px'});
}

Demo