BlurJS Not Working

Design help Custom code
1

Hey peeps,

I’m trying to implement BlurJS to my site, but I couldn’t seem to get it to work. Not sure what’s going on here. Looking into the debug console for JS, it seems to say that TypeError: $(…).blurjs is not a function. I’m pretty sure I got all the Custom Codes right and the classes added correctly.

Not sure if it’s Webflow’s own JS conflicting with BlurJS.

Link to site: Prototype website

2

I think it might be because .js file is empty:

1919×952 1.52 MB

3

Hi Sabanna,

Mine’s reporting ok. The file isn’t empty.

1887×963 1.4 MB

4

Well, now on my side it is loading too.
And reason of the problem can be, that you put code in the “head” part. Webflow jQuery will rewrite all your script.
Try to put this script in the footer. I think it should work.

2 Likes
5

Hi @alexanderwong, @sabanna is correct on this :slight_smile: The function you are trying us is jQuery, and jQuery has not loaded yet when this code is read in the Header.

Put that in the Footer and jQuery loads automatically before the code for BlurJS. Then at least that error should go away :slight_smile:

Dave

1 Like
6

Hi Dave,

Thanks it worked. But here comes another problem, it now says that “cannot access local image”. I did some research and it seems that it’s the way BlurJS uses getImageData() method. Any recommendations how I could get this working? Cuz I also understand Webflow stores all our images on a CDN.

And a shout out thanks to Sabanna as well.

7

Hi @alexanderwong, can you share your published site link?

Regards,
Dave

8

Hi Dave,

Here: http://widema.webflow.io/

Edit: It’s ok, the error is gone now for some reason I do not know of. And it seems BlurJS isn’t working the way I expected it to. Please go ahead and close this topic. I’ll just resolve to live without blur effects. Hah.