jQuery ширина документа с математикой

Question

Я все еще изучаю jQuery. Это идет очень медленно, но, по крайней мере, я учусь. Сегодня мне нужна помощь с функцией ширины страницы. Мне нужен скрипт jQuery, который получает ширину страницы, выполняет много математических операций, а затем устанавливает переменные в ширину. Этот сценарий был бы ОЧЕНЬ полезен для меня, потому что я часто использую это, и я всегда застреваю. Вот что я хотел бы сделать:

1. Получить ширину страницы.
2. Вычтите 30 из ширины страницы.
3. Разделите (ширина страницы - 30) на 6.
4. Вычтите 180 из ((ширина страницы - 30) / 6).
5. Установите ширину класса .normal к ширине (((page-width - 30) / 6) -180).
6. И, наконец, мне нужно установить класс .wide в 2 (((ширина страницы -30) / 6) -180).

По сути, это ДОЛЖНО создать 4 четных столбца записей с классом .normal, но иметь один столбец с классом .wide, который будет в два раза больше обычных записей.

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

РЕДАКТИРОВАТЬ: пример того, как я хотел бы, чтобы это выглядело, является ЗДЕСЬ , за исключением того, что он должен быть полноэкранным, за исключением поля в 15 пикселей с каждой стороны и изменения ширины столбцов и элементов в зависимости от на экране разрешения.

Answer 1

Я оставлю материал css (выравнивая .normal-elements прямо по .wide-element) вам (это легко сделать с помощью float: right или absolute positioning) и просто покажу код jQuery:

// you don't need the '$' in your variable - I just think this is more readable
$width = ($(document).width() - 30)/6 - 180;
$('.normal').width($width);
$('.wide').width(2*$width);

Имейте в виду, что это не устанавливает ширину класса 'normal' / 'wide' (как вы бы это сделали в своей таблице стилей CSS), а ширину каждого dom-элемента, который имеет класс 'normal''или' широкий '.

Answer 2

CSS3 возможности расчета, которые могут сделать это для вас:

.normal {
    display: block;
    width: calc(((100% - 30px) / 6) - 180px);
}

Это чистая спецификация CSS, есть расширения поставщиков: -moz-calc и -webkit-calc и т. Д.

Answer 3

Вам нужно 4 четных столбца записей с классом .normal, но один столбец с классом .wide будет в два раза больше обычных записей, что означает, что есть 5 столбцов, 4 с одинаковой шириной и 5-й столбец, в два разаширина отдельного столбца.Я думаю, что это то, что вам нужно.

var oneColumnWidth = ($(document).width()/6);

$('.normal').width(oneColumnWidth);
$('.wide').width(oneColumnWidth * 2);