How To: Disable JQuery animations on smaller screens

[Guest]

Sometimes you don't want to have the fancy animations that are used in vBulletin 5. On desktops it will give you a richer browsing experience, but on mobile devices the animations can be choppy, slow and thus annoying.

You could replace all the .animate JQuery functions, but there are a lot of them. Fortunately JQuery has a general function to disable ALL animations.

If you would like to disable the animations for smaller screens, you could do something like this:

1. Go to AdminCP -> Style Manager -> Add New Template
2. Name the Title disable_animate
3. In the Template use the following code:

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   	
   	<script>
   	if($(window).width() < 1024){
   	$(function() {
   	 jQuery.fx.off = true;
   	});
   	}
   	</script>

4. Click Save
5. Go to Products & Hooks -> Manage Hooks -> Add New Hook
6. Select for Hook Location header_head
7. Give the hook a Title, for example Disable JQuery Animations
8. In the fieldTemplate Name fill out disable_animate
9. Click Save

On screens smaller than 1024 pixels, the animations will be globally disabled. Of course you could also remove the 'if' part to disable animations for all visitors. The code would look something like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>
$(function() {
  jQuery.fx.off = true;
});
<script>

I'm not sure if jquery also supports something like pixeldensity to determine of the script is running on a mobile device? Maybe that would be even better to exlude mobile devices like phones and tablets. Anyone?