admin / 15.02.2018

Форум jQuery • Просмотр темы — Проверка видимости элемента

Проверка видимости элемента

Если Вы совсем новичок и слабо представляете себе возможности jQuery, не можете понять в каком форуме задать свой вопрос — Вам сюда.

Модераторы:TRAHOMOTO, tuareg, Gennady

Вернуться в Вопросы от совсем новичков

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 5

Сообщений: 4 • Страница 1 из 1

Проверка видимости элемента

Cuprum » 11 апр 2013, 23:58

У меня имеется самописный плагин, который позволяет применять к элементам эффект slideDown/slideUp и сохранять данное состояние в куку. Плагин вполне рабочий но есть один вопрос.

В большинстве решений, которые я видел при клике на элементе его текущая видимость определяется на основе проверки .is(‘:visible’)/is(‘:hidden’). Но я решил сделать чуть по-другому и видимость "кликнутого" элемента определяется путем чтения состояния из куки (т.к. кука с текущими состояниями элементов ставиться сразу при вызове плагина). Вот и думаю, какой способ надежнее…

Cuprum
 
Сообщений: 16
Зарегистрирован: 17 авг 2010, 21:06

Re: Проверка видимости элемента

zandroid » 12 апр 2013, 11:16

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

zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Проверка видимости элемента

Cuprum » 12 апр 2013, 13:41

zandroid писал(а):В абстрактном случае надёжнее, конечно, проверять видимость непосредственно у элемента, т.к. его могут скрыть/показать из другого кода, а не только из вашего плагина и тогда реально состояние элемента и сохранённое в куки окажется рассинхронизировано.

Да, этот вариант я как-то упустил из виду. Пожалуй, перепишу

Cuprum
 
Сообщений: 16
Зарегистрирован: 17 авг 2010, 21:06

Re: Проверка видимости элемента

Cuprum » 07 май 2013, 22:51

Закинул плагин на гитхаб. Хотелось бы услышать критические замечания по коду от более опытных товарищей . Нужно ли в данном случае определять для события "клик" свое пространство имен (равное названию плагина) ?
Cuprum
 
Сообщений: 16
Зарегистрирован: 17 авг 2010, 21:06
Сообщений: 4 • Страница 1 из 1

Материал из JQuery

Перейти к: навигация, поиск

<< Рецепты

Если вам нужно определить, какие элементы попадают в данный момент в видимую область окна браузера, следует использовать информацию о позиции интересующих элементов на странице и размер горизонтальной прокрутки:

После добавления этой функции в скрипт вашей страницы, можно будет найти все div-элементы класса box таким образом:

Используемые методы jQuery

// функция, которая по заданному селектору // найдет соответствующие ему элементы, которые// при этом попадают в видимую область окнаfunction inWindow(s){var scrollTop = $(window).scrollTop();var windowHeight = $(window).height();var currentEls = $(s);var result =[]; currentEls.each(function(){var el = $(this);var offset = el.offset();if(scrollTop <= offset.top&&(el.height()+ offset.top)<(scrollTop + windowHeight)) result.push(this);});return $(result);}
var boxesInWindow = inWindow("div.box");   // сделаем фон этих элементов красным boxesInWindow.css("background-color","red");

В jQuery получить координаты элемента можно относительно всего документа и относительно родительского слоя, при помощи функций jQuery.offset() и jQuery.position() соответственно.

.offset()

Функция возвращает переменную типа объект с координатами относительно документа (свойства и ).

.position()

Функция возвращает переменную типа объект с координатами элемента относительно родительского слоя (свойства и ).

Пример

Есть 2 слоя, родительский и дочерний.

Проверить видимость элемента с помощью jquery

Задача получить координаты обоих слоев.

Онлайн-пример получения координат.

Родительский слой

При нажатии на кнопку Координаты родительского слоя появится примерно следующий результат.

Дочерний слой

При нажатии на кнопку Координаты дочернего слоя появится примерно следующий результат.

Примечание

В разных браузерах может быть разный результат.

Материал из JQuery

Перейти к: навигация, поиск

<< Манипуляции

.offset()  .position()

С помощью этих функций, можно узнавать координаты элемента на странице. Кроме этого, с помощью offset(), можно изменить координаты элемента. Имеется несколько вариантов использования функций:

.offset() .position():integer1.2

обе функции возвращают координаты выбранного элемента (JS объект с полями top и left). Если выбрано несколько элементов, то значение будет взято у первого. Метод возвращает координаты относительно начала страницы, а относительно ближайшего родителя, у которого задан тип позиционирования (css-свойство position равно relative или absolute или fixed).

.offset(value):jQuery1.4

изменяет координаты всех выбранных элементов делая их равными value.

Значение value должен быть объектом с двумя полями — .

.offset(function(index, value)):jQuery1.4

устанавливает новое значение координат элементов, которое возвращает пользовательская функция. Функция вызывается отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущие координаты элемента.

Примеры использования:

$(«div.content»).offset() возвратит координаты первого div-элемента с классом content, относительно начала страницы.
$(«div.content»).position() возвратит координаты первого div-элемента с классом content, относительно ближайшего родителя с заданным позиционированием.
$(«.content»).offset({top:30, left:100}) устанавливает координаты относительно начала страницы, равные (100, 30) для всех элементов с классом content.

[Javascript] Проверка реальной видимости элемента в html

Замечание 1: при изменении координат с помощью функции , все выбранные элементы, у которых не задан тип позиционирования (то есть position = static), автоматически изменят позиционирование на относительное (relative).

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

В действии

Первый элемент из списка опустим на 30 пикселей.

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src=»https://steptosleep.ru/wp-content/uploads/2018/06/75411.jpg»~gt~~lt~/script~gt~ ~lt~style~gt~ ul{ margin: 10px; } .item{ float: left; height:20px; width:80px; margin: 1px; padding: 3px; background-color: #eee; list-style-type:none; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id=»list»~gt~ ~lt~li class=»item»~gt~ Выше ~lt~/li ~gt~ ~lt~li class=»item»~gt~ Быстрее ~lt~/li ~gt~ ~lt~li class=»item»~gt~ Сильнее ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $(«.item:first»).offset(function(i,val){ return {top:val.top + 30, left:val.left}; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Ссылки

FILED UNDER : IT

admin

Submit a Comment

Must be required * marked fields.

:*
:*