CODEWITHSUNDEEP
jquerycsswidth
Alex
Alex

Reputation: 5685

Change div width live with jQuery

Is it possible to change a div's width live with jQuery? And if it is, how?

What I want is to change its width depending on the browser's window width in real time, so if/when the user changes the browser window, the div's dimensions are changed as well in realtime.

Upvotes: 22

Views: 140186

Answers (5)

calmburst
calmburst

Reputation: 41

Got better solution:

$('#element').resizable({
    stop: function( event, ui ) {
        $('#element').height(ui.originalSize.height);
    }
});

Upvotes: 0

Deviprasad Das
Deviprasad Das

Reputation: 4353

There are two ways to do this:

CSS: Use width as %, like 75%, so the width of the div will change automatically when user resizes the browser.

Javascipt: Use resize event

$(window).bind('resize', function()
{
    if($(window).width() > 500)
        $('#divID').css('width', '300px');
    else
        $('divID').css('width', '200px');
});

Hope this will help you :)

Upvotes: 4

Nate B
Nate B

Reputation: 6356

You can't just use a percentage width for the div? Setting the width to 50% will make it 50% as wide as the window (assuming there is no parent element with a width assigned to it).

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

It is indeed possible to change a div elements' width in jQuery:

$("#div").css("width", "300px");

However, what you're describing can be better and more effectively achieved in CSS by setting a width as a percentage:

#div {
    width: 75%;
    /* You can also specify min/max widths */
    min-width: 300px;
    max-width: 960px;
}

This div will then always be 75% the width of the screen, unless the screen width means the div will be smaller than 300px, or bigger than 960px.

Upvotes: 19

Niels
Niels

Reputation: 49919

You can use, which will be triggered when the window resizes.

$( window ).bind("resize", function(){
    // Change the width of the div
    $("#yourdiv").width( 600 );
});

If you want a DIV width as percentage of the screen, just use CSS width : 80%;.

Upvotes: 30

Related Questions