296
Views
7
Comments
Solved
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");
Staff
Rank: #45
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

Rank: #819

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

Rank: #120

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";
Staff
Rank: #45
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

Rank: #340

when i click in the btn, i received this error



This is right?

Rank: #924

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.

Rank: #924

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

Rank: #2402

Hey all,


How to do this feature in reactive web development? 


The JS that I used from previous posts not working, the code is not executed when i scroll down my page.


Thank you