Auto Hide Menu on scroll

  

Hello everyone,

I have been trying to use JS to hide the menu (Menu_TopMenus) whenever the user scrolls down, but so far no success.

Here is my personal page: https://joao-grou.outsystemscloud.com/ProfilerLiverpool/HomePage.aspx

I used the following code:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById(".Menu_TopMenus").style.top = "0";
  } else {
    document.getElementById(".Menu_TopMenus").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

and uploaded it as a resource on Data, then i imported it in css theme using 

SyntaxEditor Code Snippet

@import url("/ProfilerLiverpool/HideJS.js");

Hi Joao,

I don't believe you're able to import a javascript resource file in css.

Take a look a this post: https://stackoverflow.com/questions/8630625/import-javascript-files-with-css


However, you can use the RunJavascript action from the extension "HTTPRequestHandler" or use an expression setting it's Escape Content attribute to "No" or even the JS block provided by WebPatterns.

Also check this link: https://success.outsystems.com/Documentation/10/Extensibility_and_Integration/JavaScript/Extend_Your_Web_Application_Using_JavaScript/Define_and_Run_JavaScript_Code

It'll provide more information regarding what I previously said.


Best regards,

Davide Résio

Hi João,

Two things:

1 - As far as I know, you can't use CSS @import to import javascript files. To easily add your javascript code to all your pages, you can add it to the "JavaScript" property of a block that is used in every page, like the "Menu" block.

2 - There's a bug in your javascript code. You're using "getElementById", but passing to it a class name. Try to use jQuery instead. Something like:

$(".Menu_TopMenus").get(0).style.top = "0";
Solution

Hi João,

The Layout_Lisbon from LibonTheme has the possibility to "UseHeaderFade" that depends on an input parameter.

They use a CSS and JS to accomplish this behavior.

Perhaps it's worthy to take a look on

Cheers

Solution

when i click in the btn, i received this error



This is right?

Thiago Mari wrote:

when i click in the btn, i received this error



This is right?


Hello, yes it is for now, that is a demo where i am testing several features, in that case i was modifying the FeedbackMessage and i needed to see the changes.

Thank you all for your replies, i am gonna test all of the suggestions and will give further feedback.