Link to home
Start Free TrialLog in
Avatar of Marco Gasi
Marco GasiFlag for Spain

asked on

Javascript doesn't work on smartphones and iPad

I have this page www.piccologroup.com/Main/index2.
I saw in my Android smartphone and in my Android tablets it just doesn't work: the overlay element doesn't fade out so the site remains inaccessible.
So I set in my media-queries the display property of the overlay to none, but on iPad the overlay still didn't fade out.
I commented out the overlay element from the page and I got this result
Normally www.piccologroup.com, but still on iPad the five images of the restaurants remains invisible.
I thought javascript wasn't enabled on iPad (I don't have an iPad: it's my client who noticed the issue), but this wouldn't explain why the original version didn't work on my smartphone and tablet, where I'm sure the javascript is enabled, so maybe it's another thing.
Google didn't help: any idea?
Thank you in advance for any suggestion.

The javascript:
<script type="text/javascript">
	$( document ).ready( function () {
		$('body').ripples({
			resolution: 512,
			dropRadius: 20,
			perturbance: 0.04
		});
		$('body').ripples('play');
		$('.overlay').ripples({
			resolution: 512,
			dropRadius: 20,
			perturbance: 0.08,
			interactive: true
		});
		var counter = 0;
		var interval = setInterval(function() {
			counter += 1;
			var $el = $('.overlay');
			var x = Math.random() * $el.outerWidth();
			var y = Math.random() * $el.outerHeight();
			var dropRadius = 20;
			var strength = 0.04 + Math.random() * 0.04;
			$el.ripples('drop', x, y, dropRadius, strength);
			if (counter === 10){
				clearInterval(interval);
				$('.overlay').fadeOut(2000);
				$('#restaurants:hidden').fadeIn(5000);
			}
		}, 100);	
	} );
</script>

Open in new window

Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image

I'm not able to access the site.
Gives me 403 Forbidden.
Avatar of Marco Gasi

ASKER

Try it with FireFox, it won't work either.

The problem is with a jquery plugin you're using: jquery.ripples.js
If you remove it everything should work properly.

Even if you open the plugin page  with FireFox you'll see the error on the bottom left corner saying:
Error: Your browser does not support at least one of the following: WebGL, OES_texture_float extension, OES_texture_float_linear extension.
The same should be happening in Safari.
Alexandre, I'm sorry, but in my Firefox (39.0) everything works well, though I think the cause is the plugin me too. Probably, Safari has not fixed the bug (if it's a bug).
I'll try to remove it and see if my client can access the site.
But I'm sorry to leave that effect... Maybe you know how I can test if it is supported and then enable/disable the plugin?
ASKER CERTIFIED SOLUTION
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you very mutch, Alexandre.
I think we'd need some ultyimate tool to test anything: the fact the same version of the same browser give different results in different machine makes it almost impossible to debug something.
I'll drop the plugin, but in the desktop/laptop the effect was quite amazing.
Cheers
Web development has these things! :)

Anyway, always pay attention to the CPU usage of these fancy plugins, usually they take way too much CPU.
My last experience with this was our designer that came up with this pretty cool loading spinner done completely with CSS3. The problem was when I saw the CPU usage of that thing on normal client machines. I was surprised to see a steady 100%!! :)
Once the spinner was hidden, everything was going back to normal.
In this case, GIF's are our friends! :)

Cheers mate!