-3

A web page normally loads some JS scripts like (animate.je, wow.js, scrollpage.js, and so on) when loading. I have realized one of these scripts are affecting the layout on mobile devices like smartphones when rotated in landscape position. Is there any way to say: If you are in landscape mode, disable the script 'animation.js'?

Edit: The problem pops up if the page is loaded in landscape mode and after that the device is rotated in landscape mode.

bog
  • 1,323
  • 5
  • 22
  • 34

2 Answers2

0

You can append script to DOM with a condition

Example:

<html>
    <body>
    <script>
        if (!landscape) {
        const script = document.createElement('script');
        ...
        const body = document.getElementsByTagName('body')[0];
        body.appendChild(script);
        }
    </script>
    </body>
</html>
saidfurkandize
  • 216
  • 1
  • 8
0

First of all you shouldn't really disable the script animation.js you should extend it to not trigger when screen is landscape.

To do so you need to detect screen size change. Just follow this question Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions (this could be omitted if you detect landscape with each iteration/trigger/event or whenever your animation.js content is executing troubling functions)

Now you need to make reusable function that detects if you're in landscape (that's answered in other question as well).

Final step is to apply it inside animation.js - first on load, meaning you need to prevent animation.js to function from executing in above function says it's landscape. Then You need to react on switch to landscape.

kWeglinski
  • 411
  • 4
  • 14
  • Oh thanks I thought I could just "unload" a js when landscape mode is detected. I was wrang. So I should edit animation.js and prevent its execution if the device is in landscape mode? – bog Jan 04 '20 at 06:23