Jquery изменить размер окна браузера
Обновлено: 07.07.2024
jQuery метод .width() получает текущее вычисленное значение ширины для первого элемента в наборе совпавших элементов, или устанавливает ширину каждого соответствующего элемента.
Наглядное отображение использования jQuery метода .width().
Обращаю Ваше внимание, что разница между методами .css( "width" ) и .width() заключается в том, что последний возвращает значение без указания единиц измерения, тогда как первый возвращает значение в пикселях (пример приведен ниже).
jQuery метод .width() рекомендуется использовать, когда необходимо использовать ширину элемента в математическом расчете. Для вычисления высоты элемента используется метод .height().
jQuery метод .width() также сможете найти ширину окна, или документа:
jQuery метод .width() не гарантирует точность в том случае, когда элемент, или его родитель скрыт. Чтобы получить точное значение, убедитесь, что элемент является видимым перед использованием метода. jQuery будет пытаться временно показать, а затем снова скрыть элемент для того, чтобы измерить его размеры, но в этом случае метод не является надежным, это может влиять на производительность страницы. Подобная функция измерения может быть удалена в следующей версии библиотеки jQuery.
Метод с версии jQuery 1.8 вычисляет и возвращает ширину элемента независимо от того какая модель вычисления ширины и высоты используется ( content-box , или border-box свойства box-sizing). То есть метод будет вычитать границы и внутренние отступы. Если Вас это не устраивает, то используйте метод .css( "width" ). Пример сравнения двух моделей и этих методов представлен ниже.
jQuery синтаксис:
Добавлен в версии jQuery
Значения параметров
| Параметр | Описание |
|---|---|
| value | Параметр определяет значение ширины, которое будет установлено. Допускается указывать любые единицы измерения CSS, либо указывать только числовое значение без единиц измерения, в этом случае значение будет установлено в пикселях. |
| function (index, currentValue) | Определяет функцию, которая возвращает новое значение ширины, которое будет установлено выбранным элементам. Внутри функции this ссылается на текущий элемент в наборе. index - возвращает индекс элемента в наборе. currentValue - текущее значение ширины элемента. |
Пример использования
В этом примере мы при нажатии на кнопку:
- с использованием jQuery метода .css() возвращаем и выводим в консоль браузера значение ширины первого элемента <p>.
- с использованием jQuery метода .width() возвращаем и выводим в консоль браузера значение ширины первого элемента <p>, ширину HTML документа и значение ширины области просмотра браузера.
Результат нашего примера:
Пример использования jQuery метода .width() (возвращение значения)
Рассмотрим следующий пример в котором мы рассмотрим отличие метода .width() от метода .css() при использовании моделей вычисления ширины и высоты элементов content-box и border-box :
В этом примере мы при нажатии на кнопку:
- с использованием jQuery метода .css() возвращаем и выводим в консоль браузера значение ширины элемента <p> с классом test1 и test2. Обратите внимание независимо от того какую модель используют элементы результат вывода будет один.
- с использованием jQuery метода .width() возвращаем и выводим в консоль браузера значение ширины элемента <p> с классом test1 и test2. Обратите внимание, что во втором случае, где элемент <p> использует модель border-box , значение вывода не включает в себя как границы элемента, так и внутренние отступы. В этом заключается отличие этого метода от метода .css() при использовании метода border-box .
Результат нашего примера:
Пример использования jQuery метода .width() (модели content-box и border-box)
Рассмотрим следующий пример в котором с помощью метода .width() мы будем устанавливать значения ширины, а не возвращать.
В этом примере мы при нажатии на кнопку с использованием jQuery метода .width() устанавливаем значение ширины элементам <p> с классом test1 равную 150 пикселей, а элементам с классом test2 значение ширины равную 35% от родительского элемента.
Обратите внимание на то, что если вы задаете значение не в пикселях (без указания единиц измерения), то значение необходимо передавать в виде строки.
Результат нашего примера:
Пример использования jQuery метода .width() (установка значений)
Рассмотрим следующий пример в котором в качестве параметра метода .width() мы передадим функцию.
В этом примере мы в качестве параметра метода .width() передаем функцию, которая возвращает и устанавливает новое значение ширины элемента <div> по которому произведен клик. В нашем случае новая ширина элемента высчитывается как текущая ширина элемента минус 50 пикселей.
Результат нашего примера:
Пример использования jQuery метода .width() (функция в качестве параметра)
Рассмотрим следующий пример в котором с помощью метода .resize() и метода .width() будем отслеживать ширину области просмотра браузера и при её изменении устанавливать определённый цвет заднего фона.
В этом примере с помощью метода .resize() и метода .width() мы отслеживаем ширину области просмотра браузера и при её изменении устанавливаем определённый цвет заднего фона элементу <body>. Если ширина области просмотра меньше 1000 пикселей и больше 800 пикселей, то цвет заднего фона будет установлен желтый. Если ширина области просмотра меньше 800 пикселей и больше 600 пикселей, то цвет заднего фона будет установлен зеленый, в других случаях цвет заднего фона будет установлен как синий.
Обратите внимание, что при загрузке страницы цвет будет белый, так как функция запуститься только при изменении размеров окна (jQuery метод .resize()).
Результат нашего примера:
Пример использования jQuery метода .width() при изменении ширины окна jQuery DOM методы
The only problem is that this only works when the browser first loads, I want containerHeight to also be checked when they are resizing the window?
9 Answers 9
javascript
jQuery
How do I stop my resize code from executing so often!?
This is the first problem you'll notice when binding to resize. The resize code gets called a LOT when the user is resizing the browser manually, and can feel pretty janky.
To limit how often your resize code is called, you can use the debounce or throttle methods from the underscore & lodash libraries.
- debounce will only execute your resize code X number of milliseconds after the LAST resize event. This is ideal when you only want to call your resize code once, after the user is done resizing the browser. It's good for updating graphs, charts and layouts that may be expensive to update every single resize event.
- throttle will only execute your resize code every X number of milliseconds. It "throttles" how often the code is called. This isn't used as often with resize events, but it's worth being aware of.
If you don't have underscore or lodash, you can implement a similar solution yourself: JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?
33.1k 15 15 gold badges 89 89 silver badges 132 132 bronze badges
Move your javascript into a function and then bind that function to window resize.
4,420 2 2 gold badges 17 17 silver badges 29 29 bronze badgesTry this solution. Only fires once the page loads and then during window resize at predefined resizeDelay .
It works for me, thank you. But can you please explain why your "var resizer = function ()" gets actually fired? In my understanding, you only set the variable doResize in the $(window).resize event but do not call the function itself. There is a call to the function: resizer(); right after setting the interval. And because the doResize is set to true , it gets fired when document is ready. There is interval set that checks repeatedly every resizeDelay if doResize variable is set to true . And doResize is also set to true on $(window).resize() . So you resize window, that sets doResize to true and during next check resizer() function is called.jQuery has a resize event handler which you can attach to the window, .resize(). So, if you put $(window).resize(function()) then your code will be run every time the window is resized.
So, what you want is to run the code after the first page load and whenever the window is resized. Therefore you should pull the code into its own function and run that function in both instances.
40.8k 16 16 gold badges 102 102 silver badges 140 140 bronze badgesGive your anonymous function a name, then:
This will cause your resize handler to trigger on window resize and on document ready. Of course, you can attach your resize handler outside of the document ready handler if you want .trigger('resize') to run on page load instead.
UPDATE: Here's another option if you don't want to make use of any other third-party libraries.
This technique adds a specific class to your target element so you have the advantage of controlling the styling through CSS only (and avoiding inline styling).
It also ensures that the class is only added or removed when the actual threshold point is triggered and not on each and every resize. It will fire at one threshold point only: when the height changes from <= 818 to > 819 or vice versa and not multiple times within each region. It's not concerned with any change in width.
Совсем недавно, блуждая в системе Google Картинки, я заметил одну прикольную вещь : как только вы изменяете размер окна своего браузера, результаты поиска скрываются или показываются в зависимости от того, получается ли создать из всех изображений целые ряды. У такого приема есть большой плюс - на вашем сайте никогда не будет пустующих мест; сетка будет всегда заполнена, а все не вмещающиеся объекты просто скрыты.
Я решил заново создать данное средство, но только с применением jQuery. Так же как и в системе Google Картинки оно будет проверять сколько изображений может вместиться в каждый ряд и прятать оставшиеся (и все это будет происходить при изменении размера окна браузера).
Различие между моим HTML-кодом и тем, что использует Google, состоит в том, что Google применяет таблицу для отображения изображений.
Код, который использует Google, основан на таблице, в которую размещены изображения. Я же в своей версии воспользовался плавающими изображениями (по существу, все работает также). Чтобы убедиться в этом, посмотрите демо-версию.
Теперь давайте ближе познакомимся с самой проблемой и ее решением, а также научимся создавать код, заставляющий браузер подстраивать контент страницы под свое разрешение.
Проблема
А вот и наши контрольные изображения, которые помогут вникнуть в проблему.
Как видите, замечательный прямоугольник, в котором был заполнен каждый ряд, разрушен, и все из-за другого размера окна браузера. Если вдруг окажется, что у вашего пользователя разрешение браузера не такое как у вас или пользователь захочет изменить размер окна, то произойдет следующее: браузер вытеснит все не вместившиеся изображения и создаст новый ряд для них. И если этот ряд не будет полностью заполнен, то неизбежно появятся пустующие пространства.
Раз вы не хотите, чтобы так получалось, надо найти решение данной проблеме.
Решение
А решение то необыкновенно простое: нужно спрятать все элементы, которых недостаточно для создания полного ряда:
И тут jQuery протягивает нам руку помощи. В код я добавил необходимые комментарии, которые помогут вам лучше понять суть его работы.
Еще раз повторюсь на счет ширины, равной 184 пикселям:
1. Ширина каждого изображения - 100 пикселей
2. У каждого изображения имеется поле - по 40 пикселей вправо и влево
3. У каждого изображения есть рамка - по 2 пикселя вправо и влево
Ну вот, вроде, и все.
Заключение
Вот отличная техника, задачей которой является отображение только полных рядов. Но помните, что она уместна только в том случае, когда не стоит задача показать пользователю сайта все имеющиеся изображения.
5 последних уроков рубрики "Разное"
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг - это будущее Ваших сайтов
Разработка веб-сайтов с помощью онлайн платформы Wrike
Создание вебсайта - процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
Читайте также: