Blur Effect with Javascript

advanced-prototyping
#1

Hi, I’m trying to blur certain widgets/dynamic panels, but I’m having difficulties making it work. What’s even more puzzling is that the javascript I’ve used successfully in my other prototypes years ago in Axure 8 no longer works, making me wonder if it’s done differently in Axure 10 or if the way how things are written in javascript has changed from before because I get an error in Chrome Inspector saying “Uncaught SyntaxError: missing ) after argument list”.

Below is the javascript that worked previously for applying the blur effect, which was added to the action ‘Open Link’ (only thing I’ve changed would be the data-label value):

javascript:void(
$(’[data-label=DPName1]’).css(‘filter’,‘blur(3px)’),
$(’[data-label=DPName2]’).css(‘filter’,‘blur(3px)’),
$(’[data-label=DPName3]’).css(‘filter’,‘blur(3px)’)
)

Same issue persists even when I’ve tried out different scripts found online. I appreciate any help, thanks.

#2

You have a problem in your code with the ’ sign. change it to ’ and it will work.
I tried it here:

blur.rp (51.1 KB)

#3

I see now that also the editor here in this forum is changing automatically the ’ symbol, so in my reply the symbol looked the same :rofl:
Anyway, look at the RP I uploaded.

#4

Hi @Ilanatam - Thank you so much for the help! Replacing all the curved single quote symbols with a straight version worked. I didn’t even notice those symbols were automatically changing whenever I made any edits to the code which ended up breaking it.