JavaScript или jQuery - изменение размера таблицы по высоте div/ширине

У меня есть таблица HTML, которую я использую в качестве календаря. Обычно этот календарь просматривается с шириной 690 пикселей, что делает каждый столбец шириной 98 пикселей (690/7 = 98). Я хочу, чтобы каждая дата была квадратной, поэтому они также составляют 98 пикселей по высоте.JavaScript или jQuery - изменение размера таблицы по высоте div/ширине

У меня есть класс CSS, который используется во всех датах. Это свойство высоты имеет значение 98 пикселей. У меня также есть кнопка внизу, которая позволяет пользователям просматривать календарь на полном экране. Это означает, что ширина таблицы будет установлена на 100% (из-за всех разных разрешений экрана). Но, опять же, мне нужно, чтобы все даты были квадратными. Поэтому мне нужен JavaScript или (желательно) jQuery, чтобы рассчитать, что такое 14% разрешения экрана (потому что 7 дней и 100% экрана, так что теперь каждый столбец будет 14%).

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

Я ничего не знаю о jQuery, и я не знаю, как это сделать с помощью JavaScript.

источник

2013-02-21 Ryan Fitzgerald

Использование jQuery довольно просто. Если вы хотите знать, окно с вами можно использовать

var screenWidth = jQuery(window).width()

End, так как все ваши даты имеют конкретный класс (.dateElement, например), вы можете использовать JQuery, чтобы изменить все из них с помощью

jQuery('.dateElement').width(screenWidth * 14/100).height(screenWidth * 14/100);

Вы должны вызвать этот код, когда функцию изменение размера и JQuery имеют очень приятный случай для этого:

jQuery(window).resize(function(){// Your code });

Надеется, что это помогает Фабио

источник

2013-02-21 22:52:20 wezzy

Я предполагаю, что я должен был сказать, что это будет на отдельной странице. Например. Вы будете на mysite.com/calendar.html, когда увидите стандартный календарь (шириной 690 пикселей). И затем вы будете нажимать «Полный экран», и он перенесет вас на mysite.com/fs_calendar.html. Это будет календарь на 100%. Мне нужно jQuery для вычисления высоты каждого дневного класса. Я добавил следующий код в раздел '' и он возвращает синтаксическую ошибку. ' ' –

Для полного просмотра html/js/css http://jsfiddle.net/PWqYa/ –

Привет, вы сделали все правильно, если вы поместили код внутри вновь открытой страницы, он должен работать. Синтаксическая ошибка исходит из того, что я забыл символ * в своем коде до 14, мне очень жаль. Я только что отредактировал свой ответ – wezzy

Возможно, вам понадобится окно window.innerWidth и $ (window) .on ('resize', fn), чтобы проверить, изменяется ли размер окна.

Но лучший способ просто добавить классы, которые устанавливают ширину до 14% емкости

источник

2013-02-21 22:53:59 vergilius

JavaScript или jQuery - изменение размера таблицы по высоте div/ширине

ответ

Смежные вопросы