Scrolling dynamic panel behind another object

newbie-question

#1

Hi there. I’m really struggling with this, even though it seems like it should be simple. I’m buidling a mobile app demo that is inside a webpage prototype; so maybe a mobile prototype within a web prototype. I’ve got a PNG image of a mobile phone placed inside a web page design, then content to go inside the mobile phone. I’ve set this content as a dynamic panel, with its dimensions restriced so that it is only visible within the screen area of the mobile. This works fine in itself-but as soon as the mobile PNG is in front of it I lose all interactivity, as if the mobile is “in the way” because it’s on top. Is there a way to “ignore” the mobile image so that the screen content / dynamic panel is still interactive behind it?

Thanks


#2

Several years ago someone posted a hack to do this via CSS injection. Worked well in RP7/8 and should in RP9 as well. It is not officially supported by Axure (although I suppose if you applied the CSS via Axure Cloud plugin then technically it would be supported?) Basically, a way to identify a widget the browser should ignore, making it “unclickable” and thus pass click events to anything behind it.

This said, why does your mobile phone image need to be in front of your dynamic panel? I’ve done many similar things in the past, showing how an app would look and behave on a phone, tablet, watch, printer, car dash, embedded UI on a medical device, etc. to show a real-world context for demos and user tests. If the user can interact with something–your mobile phone screen–then it should logically be in front and touchable/clickable. So your dynamic panel represents the screen of your mobile phone, right? It should be in front of the mobile phone (PNG image). The few times I’ve used Gregor’s CSS trick above was to show screen glare and bezel shadows to make things look more realistic–in one case to test and demonstrate how ceiling lights might interfere with a tabletop display.

If you want to use the mobile phone image to mask out your dynamic panel–perhaps your dynamic panel somehow needs to be larger than the screen size–then you can “cut out” a rectangular hole in the mobile phone image. I prefer Photoshop for this, but you can use Axure’s “slice” feature (right-click image and choose Slice Image or use Ctl+Alt+Shift+S) to slice at the screen boundaries then delete the resulting center image (or hide it or send it to back.)


#3

Hi-thanks very much for your reply.
I’m pretty clueless when it comes to code-so not sure how I’ll get on with the CSS hack! I could get some help from our developers, though.
As you suggested, I do have the phone image in front in order to mask out edges of the dynamic panel / screen content-which is largely rectangular, so doesn’t match the curves of the phone screen corners (nor the “notch” at the top).
I did not know about the Slice Image function. Will that actually remove the cut out section and let interaction happen “through” it? How do you mean you prefer to do this in Photoshop? The phone image does have transparency where the screen is-curious as to what more can be done in Photoshop?
Thanks again for your feedback.


#4

Even though it has transparency, it’s still part of the image. So you can “see” through it, but you can’t “touch” through it.

By slicing the image, you’re basically creating lots of smaller images that, when put together, form a ring around the content and there are no images in the middle. That way nothing can interfere and it looks no different to the user.

It’s kind of like cutting out the middle of the phone image. But since you can’t actually do that (images have to be solid rectangles) you can cut out the middle by slicing off the top, bottom, and sides and then deleting what’s left in the middle.

if you have weird curves you might need to do more slicing to make sure you preserve those.


#5

Just that Photoshop has more options and I’m used to using it for slicing images and creating visual effects. Nothing special about transparency really.

Here is a demo showing how to use the “CSS pass through” method from @Gregor, applied to a mobile phone image. Was good to verify this still works in RP9. Also, a page showing a “straight Axure” method with a sliced phone image, where the main phone body is behind a “screen” dynamic panel but the top and bottom with rounded corners are in front.

passingEventsThruWidgets-RP9.rp (290.9 KB)


#6

That is brilliant! Thanks so much for taking the time to put this together-it will really help me out.

There’s always a “But…” at moments like this in forums. “Thanks! You helped me so much-but…” Would it be to make the “app” content scrollable with mouse wheel rather than drag? Obviously drag more purely represents mobile interaction-but, as it’s a mobile app demo within a web demo, mouse wheel makes it more “natural”.

Thanks again


#7

Hi. Thanks for the feedback. I did end up cutting up my image. Tried the newly discovered Slice tool-but wasn’t too happy with the results. Ended up doing it in Photoshop, as @mbc66 suggested.

It works, of course-but it seems very…inelegant! I’m very new to Azure, and relatively new to web / app design. I work mainly in XD, which, while clearly has it’s limitations, does allow for interactivity “through” a top layer. I know it’s not “pure” html interaction-but it still seems a straightforward function to implement. Feature request, I suppose.

Cheers


#8

Yes, I get that… one thing you can do is enable scrolling on the dynamic panel (right-click it and select Scrollbars > Scroll Vertical). When content is longer than the panel a scrollbar will appear on the right. This is a standard HTML scrollbar so it can be dragged and the scrollwheel works as well. You can “hide” the scrollbar by wrapping all that in a dynamic panel and narrowing the width just enough so the scrollbar doesn’t show through (-18 px should do it.) I have an example of this in updated file below.

Combining drag-to-move and scroll on the same dynamic panel doesn’t work so well because when the content is moved the scroll knows nothing about it, so the content can become “trapped” out of view after it is moved by a drag and then attempted to be scrolled. I was able to work around this by using the Scrolled event to move the content back to its default position (at the top.) This does work now with a few minor drawbacks. Example of this also below.

As I was testing this stuff, I realized what we really need is the new RP9 “mobile preview” because that automatically provides scrolling and drag-to-scroll along with a touch/pointer indicator. However, you need the screen area of the phone wrapped by an image of the phone itself, and the phone image should not be scrolled. So, I had brainstorm to use an inline frame widget for the screen area, place all the content on its own separate page, build this page with a mobile preview and then load it in the inline frame. However, the mobile preview does not come across in the inline frame, so that failed.

passingEventsThruWidgets-RP9.rp (702.4 KB)