Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757
Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737 Форумы портала PHP.SU :: Смена z-index у элемента при нажатии на другой элемент
Покинул форум
Сообщений всего: 645
Дата рег-ции: Янв. 2012 Откуда: Армавир, Краснодарский край
Помог: 15 раз(а)
Доброго времени, друзья. Есть задача, на поиск решения которой пошли уже вторые сутки, т.к. JS не знаю совершенно.
На странице будет n-ное количество небольших слайдеров, меняющих размер в зависимости от родителя. Страница на Twitter Bootstrap 3. Ни один из мне известных слайдеров не подойдет, т.к. страница отзывчивая, и div для слайдера постоянно меняет свой размер, а насколько мне известно, все слайдеры работают только с постоянной шириной либо высотой родителя (прячут через overflow: hidden; все картинки, кроме одной, потом сдвигают).
Мне же нужно выстроить их одна за другой, абсолютно позиционировав, а потом менять им z-index.
img.hold (стр. 27) нужен для того, чтобы высота div#carousel была равна высоте картинок (они одинакового размера), т.к. сами картинки img.display абсолютно позиционированы, соответственно, они сами с задачей не справятся. Т.к. и img.hold и img.display у нас img-responsive, эталонная img.hold будет растягивать нам нашего родителя до размеров img.display. Это уже работает (пусть и через ж..пу), т.к. я в инструментах разработчика руками меняю img.display по очереди z-index и происходит то, что должно происходить по нажатию кнопочек.
Я вижу два алгоритма:
1)
1. По нажатию #next проверяем, существует ли объект $current. Если нет, переходим к п. 2, если есть - к п. 4
2. У родителя ищем первого потомка с #rowScroll
3. Присваиваем объекту $current то, что нашли
4. Устанавливаем объекту $currentz-index: 100;
5. Переходим к следующему элементу в дереве, ставим ему z-index: 101;
6. Присваиваем объекту $current найденный в п. 5 элемент
С #prev то же самое, только нужно будет искать предыдущий элемент. И я не в курсе, сможет ли при таком алгоритме браузер хранить объект $current, т.к. я совершенно не работал с JS. Думаю, что может, но если нет, то такой вариант не подходит.
2)
Все то же самое, только у родителя в потомках искать не элементы с #rowScroll (п. 2), а элементы с z-index:101. Естественно, первому img.display нужно будет выставить z-index:101 при любом варианте, но это не проблема.
Как мне кажется, здесь 10-20 строк на jQuery. Фреймворк не принципиален. Помогите, великие знатоки JS, иначе я сойду с ума
Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011 Откуда: Москва
Помог: 221 раз(а)
Отпишись. Если не сработает не один по нескольку штук на странице, поправлю.
Желательно из первой ссылки.
Он, вроде, ничего такой.
Он должен отработать.
Vinyl
Отправлено: 23 Января, 2015 - 18:27:36
Частый посетитель
Покинул форум
Сообщений всего: 645
Дата рег-ции: Янв. 2012 Откуда: Армавир, Краснодарский край
Все гости форума могут просматривать этот раздел. Только зарегистрированные пользователи могут создавать новые темы в этом разделе. Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.