Jak vizuálně vypíchnout jeden z více prvků a ostatní zblednout a zakázat na ně klikat

12. 2. 2016 15:53:39

Zdravím,

Mám mikrostránku s několika produkty (zobrazené vedle sebe jako ikonky/obrázky a tlačítka pro koupi).

Při kliknutí na jednu z ikonek bych potřeboval, aby se všechno ostatní kromě ikonky a tlačítka daného produktu "upozadilo" (zbledlo, zašedlo, ...) a nešlo na to kliknout. Při kliknutí jinam než na tlačítko by mělo vše přejít do původního stavu.

To celé má fungovat i když při tom uživatel změní velikost okna (nebo otočí tablet/mobil).

Díval jsem se, jak to řešit, našel jsem jenom případy pro modální okna - div s poloprůhlednou barvou přes celou stránku. To ale znemožní kliknutí na všechno - musel bych pak přes DOM přesouvat aktuální prvek, nastavovat pro něj top, left a position:absolute a pro návrat jej zase vracet a nad to všechno při změně šířky okna složitě všechno přepočítávat a nakonec se stresovat, že toto celé některý prohlížeč na některém zařízení nezvládne.

Neexistuje elegantnější a jednodušší řešení? Napadá někoho?

Díky moc

12. 2. 2016 15:53:39

https://webtrh.cz/diskuse/jak-vizualne-vypichnout-jeden-z-vice-prvku-a-ostatni-zblednout-a-zakazat-na-ne-klikat/#reply1174381

David Musil

(68 hodnocení)

12. 2. 2016 15:58:09

Posli nejakou ukazku, ja si to nedovedu predstavit co potrebujes.

12. 2. 2016 15:58:09

https://webtrh.cz/diskuse/jak-vizualne-vypichnout-jeden-z-vice-prvku-a-ostatni-zblednout-a-zakazat-na-ne-klikat/#reply1174380

crs

(1 hodnocení)

12. 2. 2016 16:10:32

musil.david: Nechci/nemůžu posílat screenshoty.

Představ si vedle sebe čtyři ikonky, každé s tlačítkem pro koupi (plus pozadí a nějaké texty a prvky okolo).

Při kliknutí na jednu z těch ikonek ta jediná spolu se svým tlačítkem zůstane stejně viditelná, vše ostatní zešediví (zbledne) a nepůjde na to kliknout.

Po kliknutí jinam než na tlačítko se vše vrátí do původního stavu.

Jak to udělat bez manipulace jednotlivých prvků a nastavování position:absolute, left, top? Zkoušel jsem si hrát s z-index, to se mi bohužel nechová, jak má.

12. 2. 2016 16:10:32

https://webtrh.cz/diskuse/jak-vizualne-vypichnout-jeden-z-vice-prvku-a-ostatni-zblednout-a-zakazat-na-ne-klikat/#reply1174379

David Musil

(68 hodnocení)

12. 2. 2016 19:34:19

Tak v jquery pomoci addClass a removeClass menit css tridy a jeste k tomu pridavat parametry tlacitkum jako readonly disabled apod. To nebude tak narocne. Na phonu to dohromady nyni nedam, ale bude to hracka.

12. 2. 2016 19:34:19

https://webtrh.cz/diskuse/jak-vizualne-vypichnout-jeden-z-vice-prvku-a-ostatni-zblednout-a-zakazat-na-ne-klikat/#reply1174378

crs

(1 hodnocení)

13. 2. 2016 19:54:40

musil.david)

addClass a removeClass neovlivní, že na daný prvek půjde nebo nepůjde moci kliknout.

"To nebude tak narocne." - to už jsem slyšel od mnoha lidí, ale žádný to nebyl schopný dokázat.

13. 2. 2016 19:54:40

https://webtrh.cz/diskuse/jak-vizualne-vypichnout-jeden-z-vice-prvku-a-ostatni-zblednout-a-zakazat-na-ne-klikat/#reply1174377

Pro odpověď se přihlašte.

Přihlásit