По клику на кнопку добавлять стиль родительскому контейнеру?

Question

[Чёкатилло]

Имеется рабочая заготовка, где при клике на кнопку выкатывается блок снизу, и родительскому .pinbox блоку добавляется стиль

Как бы теперь дополнить все это действо тем, что бы опять же, при клике на кнопку еще и контейнер .boxcontainer, в котором находятся все блоки .pinbox, уменьшать по размеру в процентах и добавлять прозрачность, и все это кроме одного АКТИВНОГО блока .pinbox?? И не блоки .pinbox уменьшать, а именно .boxcontainer

Здесь можно увидеть все то, что есть

При клике на кнопку родительскому блоку .pinbox добавляется стиль, так может, при этом добавлять стиль общему контейнеру .boxcontainer, где его и уменьшим и добавим прозрачность

Вот так вот )



Кто его знает, в реале изменятся ли размеры блоков .pinbox, если изменится размер их общего контейнера .boxcontainer
Наверное нет и поэтому как-то я хз вообще как это сделать

Спасибо за внимание!

Answer 1

[Роман]

https://jsfiddle.net/rrzharikov/9k09hr1e/1/

Идею дал) Дальше сами. Игра со стилями. Сейчас родительскому контейнеру присваивается класс, если хотя бы один пинбокс активен, иначе класс пропадает. Название класса boxcontainer_active

Comments

[Чёкатилло]

Спасибо, спасибо, спасибо ) Вот ток я озадачился посерьезнее походу, ведь контейнер .boxcontainer он сцука резиновый и блоки .pinbox не поддаются тоже изменениям Надо не контейнеру .boxcontainer добавлять стили, а тем блокам .pinbox которые не активны
Пробую изменить просто назначение так: https://jsfiddle.net/ue73e3Lw/ но не пашет

[Роман]

Дмитрий: а может просто в стилях увеличивать активный пинбокс? Ну типа, задать ему ширину 500px посмотреть? А boxcontainer_active всему прозрачность там или еще что нибудь

[Чёкатилло]

Роман Жариков: может да Так явно проще Не хотелось изменять размер активного блока Так и будет наверное )) Единственное пока boxcontainer_active он весь по клику прозрачным становится вместе с активным блоком а активный не должен быть прозрачным

[Роман]

Дмитрий: вместо свойства opacity:0.7 можно поиграться с прозрачностью через бэкграунд: background:rgba(0,0,0,0.5) — это черный фон с прозрачностью 0.5 к примеру. То есть делая так, весь родительский контейнер будет черным, ну или тем фоном которым вы захотите. Ну и плюс всем пинбоксам задать в стилях, например при клике (динамически, в стилях кидаем им прозрачность), а у активного отменяем. Ну это так, по быстрому я сейчас вижу

[Роман]

Дмитрий: https://jsfiddle.net/rrzharikov/9k09hr1e/2/ — вот может так? Быстрое коленочное решение

[Чёкатилло]

Роман Жариков: а я вожусь-вожусь и вот так-то не получалось Спасибо огромное! Все я отстал ))

[Роман]

Дмитрий: Надеюсь мои ответы реально помогают )

[Чёкатилло]

Роман Жариков: блин, зря я вас озадачил не в ту сторону Изменять .boxcontainer не стоит вообще Работать надо только с .pinbox И когда активный стиль .pinbox_active вызван, то всем остальным .pinbox задавать прозрачность и все Больше ничего

[Чёкатилло]

Роман Жариков: еще бы Помогают конечно ) Даже так надо Назначать .pinbox_active а остальным блокам назначать тоже другой стиль .pinbox_NOACTIVE, где и будет прозрачность и даже все что угодно ))
Если не трудно, сделайте в примере так и я отстану все )

[Чёкатилло]

Роман Жариков: Идея на идее ) Или масштабировать весь сайт (уменьшать) управляя имею ввиду масштабом браузера... Масштабировать весь сайт кроме вызванного .pinbox_active

[Чёкатилло]

Роман Жариков: епсельмопсель и надо же zoom: 90%; применять

[Роман]

Дмитрий: лучше под новые задачи создавать новые вопросы, которые будут отмечаться потом как решения. Сделайте новый вопрос, а я посмотрю, как будет время) Но перед тем как задавать новый вопрос, нужно убедиться в том что он решает поставленную задачу. Например зачем решать с помощью кода присвоение класса pinbox_NOACTIVE, если просто элементы, не имеющие класса pinbox_active уже по сути таковыми и являются, не так ли? И применять уже стили в CSS ко всем элементам pinbox, а в pinbox_active делать стили для активного элемента. Просто сначала нужно понимать, что я хочу видеть на сайте, потом как мне это реализовать и имеет ли вообще смысл?) И после этого, хорошо подумав, задать новый вопрос, на который я отвечу, а вы отметите его решением)

[Чёкатилло]

Роман Жариков: Понял-понял Пока сам повожусь ) Спасибо

[Чёкатилло]

Роман Жариков: привеет Есть еще вопросец в развитии этого же скрипта Присоединяйся )
По клику на кнопку добавлять стиль родительскому контейнеру кнопки, одновременно с этим, одноименным контейнерам задавать общий стиль?