Running javascript in the Current Window and Axshare plugin set up

Axure RP 8
1

Hello, Technical Guys,

  1. I have an issue with running javascript plugin at AxShare (I have read this Article - _Create or Edit a Plugin on AxShare Tutoria_l. It didn’t help. I’ll explain below why.)

Locally, I can run a javascript blurring the object itself:

javascript:void($(‘img#u1_img’).css(‘filter’,‘blur(5p)’))

(see the attached .rp file, Example 1 )

Yet, when I publish it to AxShare, the javascript doesn’t work. I have read the tutorial mentioned above. But as far as I’m not a front-end developer, I hardly can figure out how to add it in a text field section ( didn’t work). Can you advise me on how to add that into plugins sections? And why it runs locally and doesn’t run as published?

  1. The second question is about Example 2 in the .rp file attached. I want to apply backdrop-blur filter to the semitransparent item (like background blur in iOS when lightboxes pop up, for example)

javascript:void($(‘div#u0_div’).css(‘backdrop-filter’,‘blur(5px)’))

But it doesn’t work neither locally nor as published eventually. Can you please advise on the correct javascript to be used in such a case? Is it possible at all?

I don’t want to use blurred pngs screenshots for Dynamic Panel States as it won’t match the goal (applying a blur to ALL background objects contained for example in a Dynamic panel).

Thank you for reading and looking forward to your help.

Background Blur.rp (93.1 KB)

2

Your first issue is you’re targeting the id of the elements. This won’t work because the id that Axure assigns an element changes every time you add new elements. Instead, you want to select elements based on the name you give them in Axure. Any time you name a widget, Axure adds a data-label property to it with the value as the name you gave. You can use this instead. For example:

$('[data-label=SomeName]').css(/* your styles etc. */)

The second issue might be related to the first issue as you have the same problem. But there’s also possibly the issue of browser support for the backdrop-filter property. As you can see here here, Firefox doesn’t even support it at all, and older versions of the other major browsers don’t. Are you using a browser that supports it?

Lastly plugins are saved to the AxShare project, not the actual Axure file so we can’t see how you’ve set it up. You might share a screenshot of the settings in Axure if it’s still not working.

3

Thank you so much, you’ve been very much helpful. Also, I turned on this effect in my Chrome browser as you advised.
Can you please help me in further with data-labeling in iframe? I’ve read this topic (Open page in iframe-widget with javascript - Open page in iframe-widget with javascript ) and this is exactly what I need to be done. Yet, when I try your example with www.axure.com link it doesn’t work for iframe. Can you please check the file attached?

There are 3 examples (1 is running locally the way it should run, the rest 2 are made based on data-label reference and seems that there is something missing for iframe)

Thank you.

Watch Link.rp (45.2 KB)