Установка ширины с использованием метода .css в jQuery с изменением размера окна в качестве условия

В моем шаблоне я хочу динамически установить ширину контейнера #wrapper с помощью jQuery, поэтому для любого разрешения экрана ширина #wrapper будет равна screen width - 200.

var _width= ($(window).width() - 200) 
$("#wrapper").css("width",_width);

После установки этого значения я хочу динамически изменять ширину при изменении размера окна. Я использую следующий jQuery:

$(window).bind('resize', function() {
    var _width_prcnt = (($(window).width()- (200)/($(window).width()/100) );
    $('#wrapper').stop(false,true).animate({
        'width':_width_prcnt+ '%'
    });
});

Я думаю, что это не работает должным образом. Как я могу использовать оператор if-else, чтобы ширина задавалась один раз, а анимация ширины работала только при изменении размера окна?


html jquery css responsive-design window-resize
person galexy    schedule 10.04.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вы должны изменять размер окна только с помощью css. Окно с: 200px легко с margin.

#wrapper{
min-width:500px;
margin:0 100px;
}

Это тоже по центру.

person csaron92    schedule 10.04.2013
comment
Я согласен. Galexy: вы также можете использовать min-width и max-width и/или media queries, если в какой-то момент ширина должна быть статической. - person Joonas; 10.04.2013
comment
это возможно с медиа-запросами, но я хочу установить динамическую ширину оболочки при изменении размера окна - person galexy; 10.04.2013
comment
Вы пробовали код выше? Вы говорите, что ищете простой метод css3, но когда вам дают простой метод css, вы, кажется, отказываетесь от него... Вот пример приведенного выше кода (довольно много): jsfiddle.net/K3u2w/1 и вот то же самое с jquery: jsfiddle.net/K3u2w ...достаточно ли крепко я держу вашу руку? - person Joonas; 10.04.2013
comment
Это решение делает ширину оболочки равной ширине окна. См. мою скрипку для демонстрации. Вы бы предпочли попробовать решение @Joonas, которое совместимо со всеми браузерами. - person Bigood; 10.04.2013
comment
@Bigood Я все время что-то забываю... Ты абсолютно прав. Я продолжал исключать width: 100%; в своей голове, потому что это не нужно, и я забыл, что это на самом деле портит его, потому что задает 100% ширину и добавляет поля по бокам... так что да. - person Joonas; 10.04.2013
comment
@joonas--› На самом деле css3 media требует ширину набора только для определенного набора, я хочу, чтобы моя ширина менялась даже при изменении размера одного пикселя. - person galexy; 10.04.2013
comment
Я видел предоставленный вами jsfiddle. просто просматривая эти справочные ссылки. Спасибо, друзья - person galexy; 10.04.2013

arrow_upward
1
arrow_downward

jQuery .resize() должен работать, несколько минут назад я ответил на другой вопрос об этом в Установить соотношение сторон CSS обратное ширине?. Проверьте мой ответ + связанную скрипку, чтобы узнать, дает ли она вам функциональность, которую вы ищете. Дайте мне знать, работает ли мой ответ для вас, или дайте мне знать, почему .resize() не подходит, и я постараюсь дать лучший ответ.

person asifrc    schedule 10.04.2013

arrow_upward
1
arrow_downward

Для этого можно использовать calc() CSS3 (doc):

#wrapper{
    width:calc(100% - 200px);
    margin: 0 100px; //If you want the content centered
}

При этом #wrapper является прямым дочерним элементом элемента, ширина которого равна ширине окна.

См. эту диаграмму на сайте caniuse.com для совместимости браузеров и эту скрипту для рабочего примера.

person Bigood    schedule 10.04.2013
comment
Проблема в том, что нет поддержки Opera. - person James Coyle; 10.04.2013
comment
Это выглядит просто с методом css3, но я не знаю, работает ли он со всеми браузерами или нет. - person galexy; 10.04.2013
comment
@galexy Смотрите ссылку на мой обновленный ответ для совместимости браузера. - person Bigood; 10.04.2013
comment
Спасибо @Bigood - Хорошая диаграмма совместимости браузера. На самом деле это своего рода адаптивный дизайн, и я вижу, что на некоторых устройствах с браузерами iOS и Android он не поддерживается. - person galexy; 10.04.2013