Изменить ширину div в реальном времени с помощью jQuery

Question

Можно ли изменить ширину div в реальном времени с помощью jQuery? И если да, то как?

Я хочу изменить его ширину в зависимости от ширины окна браузера в реальном времени, поэтому, если / когда пользователь меняет окно браузера, размеры div также изменяются в реальном времени.

Answer 1

Вы можете использовать, который будет срабатывать при изменении размера окна.

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

Если вы хотите, чтобы ширина DIV в процентах от экрана, просто используйте CSS width : 80%;.

Answer 2

Действительно возможно изменить div ширину элементов в jQuery:

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

Однако то, что вы описываете, может быть лучше и эффективнее достигнуто в CSS, задав ширину в процентах:

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

Этот div всегда будет на 75% ширины экрана, если ширина экрана не означает, что div будет меньше 300px или больше 960px.

Answer 3

Есть два способа сделать это:

CSS: Использовать ширину как%, например, 75%, поэтому ширина div будет меняться автоматически, когда пользователь изменяет размер браузера.

Javascipt: Использование изменить размер событие

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

Надеюсь, это поможет вам :)

Answer 4

Получил лучшее решение:

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

Answer 5

Нельзя просто использовать процентную ширину для div?Установка ширины в 50% сделает его на 50% шире окна (при условии, что для родительского элемента с назначенной шириной нет).