Preamble: Asked to write a simple one-page, without admin. Quickly minted on the bootstrap, what was needed, and added animation of the appearance of sections (the same scrollreveal.js)

Everything worked great like this.

<head> <script src="scrollreveal.min.js"></script> <script src="jquery.min.js"></script> </head> <body> <section class="animated"> </section> <section class="animated"> </section> <section class="animated"> </section> <script> ScrollReveal().reveal('.animated'); </script> </body>

Ambula: later, asked to transplant this page to ERP Odoo. That's where the problems started - scrollreveal.js stopped working. More precisely stopped working half. All sections with the class animated script are opacity:0 , but when the section is in the viewport, the section opacity does not become = 1, i.e. remains transparent.

Experienced to find out that events onscroll do not work at all. I added a small script to the page code:

 <script> window.onscroll = function () { console.log('qwe'); }; </script>

Nothing was logged. (I checked the same script locally on the html page, where did you go wrong? No, the log is written locally, the scan is working).

I don’t know where to dig further. Maybe you have any thoughts on this? Thank you in advance.

upd. Another moment header with absolute positioning in odoo for some reason behaves like position:fixed (или stiky) remains glued to the top of the viewport. (Again, it behaves normally on a simple html page). I do not know if there is a connection with the problem above, but maybe someone will push on the right thought.

upd2. In order for odoo to create a page, it is necessary that it be in xml. The code in which onscroll doesn't work looks like this.

 <?xml version="1.0" encoding="UTF-8"?> <odoo> <template id="myhomepage" inherit_id="website.homepage"> <xpath expr="." position="replace"> <t name="Homepage" priority="29" t-name="website.homepage"> <!--Дальше всё как в работающем html--> <head> </head> <body> </body> <!--Ну и закрывающие теги для xml--> </t> </xpath> </template> </odoo>
  • one
    I do not know what an Odoo ERP is, but by the description of the problem, it looks like your page is running in some container. Explore the page, see how it all works. You can even throw the page code here. - Stepan Kasyanenko
  • By the way, yes. Completely forgot to add. The entire odoo backend on python (but this role probably does not play). But the frontend on xml is imposed, which can be important. Now add the page code to the question. - Sjeurt
  • one
    And you look in DevTools code of the current page. I do not think that the browser parses xml. - Stepan Kasyanenko
  • Really. In devtools, the structure is plain <html><head></head><body></body></html> . But doctype is not declared - Sjeurt
  • one
    Well, in this regular structure, where are your sections? Right in the body? - Stepan Kasyanenko

2 answers 2

Most likely you forgot something in your new myhomepage template for Odoo. For example, the <t t-call="website.layout"> call is required

    The problem was in the lost <!doctype html> . The solution that helped me, and maybe help someone else, is to declare a doctype in the template itself:

     <?xml version="1.0" encoding="UTF-8"?> <odoo> <template id="myhomepage" inherit_id="website.homepage"> <xpath expr="." position="replace"> <t name="Homepage" priority="29" t-name="website.homepage"> + <!--declare doctype--> + &lt;!DOCTYPE html&gt; + <!--declare doctype/--> <html> <head> </head> <body> </body> </html> </t> </xpath> </template> </odoo>

    Ps If you are an experienced Odoo user, then most likely you will be able to solve the problem correctly, "in the spirit of the world." I met Odoo out of necessity and just a few days ago. I will supplement my answer when I find another, beautiful solution.