Appears differently locally and online

[cim0ril]

Hello. First of I would like to thank you for your awesome work. I am not a developer but I am in the process of learning. I noticed that the effects seem to be different when viewed locally, compared to the uploaded file.

The scripts I have included are as follows:

I also tried to change the values of dropRadius and perturbance in the jquery.ripples.js file but it doesn't seem to work when I upload the html file to my ftp server. The changes take effect only when viewed locally.

Not even sure what to look for ㅠ.ㅠ

Thanks in advance!

[sirxemic]

It's just a guess, but have you made sure jquery.ripples.js is at the right place or that js/jquery.ripples.js is the correct path? You can open up your developer tools, open the "Network" tab, and see if the file actually loads correctly.

[cim0ril]

Yes it is loading correctly. I have the same structure both locally and on my ftp server and I get no errors when loading the script.

[sirxemic]

Ok, so I am kinda surprised that it does work locally but not remotely - usually it's the other way around... You don't get any errors in the console about disallowed access to images?

Can I test this out myself somewhere? Or maybe a minimal working example?

[cim0ril]

As a matter of fact I do get an error like that when I open the HTML file locally. My teacher said is probably irrelevant and I should ignore it. I guess that's not the case then... I do not get the error on the uploaded file though. This is the error:

Access to Image at 'file:///E:/Projects/1004%20designs/img/bgimg.jpg' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

I've assigned the background in my CSS file and not in HTML. Could that be a problem?

wrapper{

position:relative; 
width:100%; 
height:100vh;
background:url(../img/bgimg.jpg) no-repeat center bottom; 
background-size:cover;

}

The effect I am trying to do is the one that I see locally. Could you please advise me on how to resolve this issue or what I should be looking for?

Sorry for all the hassle...

[sirxemic]

You say it works locally... which I find weird, since that error is exactly what I would expect to happen on a local machine - when it fails to load the image, it should fall back to a ripple effect where you only see the "shine" of the ripples, but not the distortion.

In any case, it seems like you're using it fine, but I can't help you out with the current information and I can't think of any way to help you unless you give me a minimal working example highlighting the issue.

[cim0ril]

Ok so I tried reading a bit about CORS before bugging you again and I replaced the local img file with the uploaded file as some people on stachoverflow suggested but I still get a similar error.

"Access to Image at '(url was here)' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

So basically you can check the site from (url was here)

The effect I am trying to go for is the one I see locally. A very subtle effect compared to the one that I see when I access the website from the URL. And whether I change the values of dropRadius and perturbance and re-upload the files (i even delete it from the ftp first and re-upload it instead of overwriting, just in case) the changes are not visible. (I reset the values now to the original ones)

[sirxemic]

Ah I get it now - the "broken" local behaviour is what you want online.

Setting perturbance to 0 should give you a similar effect to what you get locally. Alternatively you can apply the effect to an element without background-image set. Like in your specific case you can add an extra element to <div id="wrapper">, and apply the effect to that element.

Something like this:

<div id="wrapper">
  <div style="position:absolute;left:0;right:0;bottom:0;top:0" class="ripple-this">

[cim0ril]

I have to admit I didn't try setting the value to 0 as I thought it would completely disable the effect. It looks much better now. Thanks a lot for your time and for all your hard work to make this plugin and reply to questions here^^