I’d like to create a pair of dynamic panels one of which ‘covers’ the other, but be able to click a button in the ‘covered’ panel.
Imagine two dynamic panels, named A and B, each a square and containing an image in its upper half. (For instance an only partially opaque image—not important what it is.) In the lower half, each has a button—“A” in the lower left, “B” in the lower right. Each button has an interaction, for instance linking to a new “page A” or “page B,” respectively. There is nothing in either dynamic panel ‘covering’ the button in the other. The panels are the same size and are positioned one ‘above’ the other. Depending on conditions elsewhere in the app, one panel or the other or both will be shown or hidden.
What I’d like is, in the event that both panels are shown, the user can still click on either button A or button B and deploy its interaction. (At present, even the transparent part of the upper panel intercepts the click and discards it, so the lower panel’s button cannot be used.)
If the full use case here were only two panels, this would be pretty simple, I’d actually use separate dynamic panels for the images and the buttons—each with A, B and A+B states. But the full prototype will have as many as 12 panels in various combinations of two or three together; I think the overhead of managing so many buttons and panels containing them will be overwhelming.
Any ideas? Thank you!
Jacque Harper
…Kind of hard to understand the details of your setup without an .rp file or some sketches.
Are panels A and B both the same size and location? Do both panels have two buttons, or does panel A have one button in lower left and panel B have one button in lower right? If both panels have buttons in the same (x, y) location how would you know which button is intended to be clicked?
Actually, there is… the dynamic panel itself–its entire area–is part of, well, itself. So if your dynamic panel dimensions are 200 x 200 px, then that whole 200 x 200 px area would block anything behind it. There is a javascript hack to make a widget “unclickable” and not block anything behind it, but it would apply to the whole widget area. There’s just not a way to “punch a hole” like so within a widget area.
You could use some clever “bring to front/back” actions to expose panels/widgets behind others. Or, you could use a hotspot in the front-most panel the same relative size and location as a button in a panel behind it. A click of the hotspot can fire the click of a button in another panel.
Here’s a quick demo:
Clicking an obscured button.rp (306.1 KB)
Page 1 shows the method of bringing a panel to front. Page 2 shows the method of “mapped hotspots”.