Hey,

I'm new to OutSystms and I need help from the community. In my project I need to change the class of a container as the user scrolls on the mobile screen, I am using the following JavaScript code:


window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById('"+myP+"').className = 'test';
  } else {
    document.getElementById('"+myP+"').className = '';
  }
}


PS: I was able to make the same code work on the web by adding javascript to a footer expression, but I couldn't do the same on mobile because there is no such option.

Hi,

I didn't cross check the JS, but just on a high-level are you passing the Correct Container ID & you can check the same in Simulator on Browser - Whether JS has been Injected with right ID or not.

You can share the URL here or message me , may be I can check n let you know

assif_tiger wrote:

Hi,

I didn't cross check the JS, but just on a high-level are you passing the Correct Container ID & you can check the same in Simulator on Browser - Whether JS has been Injected with right ID or not.

You can share the URL here or message me , may be I can check n let you know

Thanks, I believe the java code is correct because I use it on the web. I couldn't add java to the mobile screen, I'm running the code in an onready action, put the oml file in the question and follow the app link below:


 Test App mobile


Hi,


getting the id of an element is different between web and mobile.

On web, you don't know the id at design time, and you have to use the variable <WidgetName>.id.  But on mobile the id is the same as the name you give the element in your design, so looking at your code in for example the LinkOnClick Javascript, you can make it :


document.getElementById('myP').className = "test";

instead of 

document.getElementById('"+myP+"').className = "test";


hope this helps you move forward,

Dorine

Dorine Boudry wrote: 

Hi,


getting the id of an element is different between web and mobile.

On web, you don't know the id at design time, and you have to use the variable <WidgetName>.id.  But on mobile the id is the same as the name you give the element in your design, so looking at your code in for example the LinkOnClick Javascript, you can make it :


document.getElementById('myP').className = "test";

instead of 

document.getElementById('"+myP+"').className = "test";


hope this helps you move forward,

Dorine

Thanks Dorine,

I was able to change the class by clicking the button. However, I need to change the class by scrolling down the mobile screen as per this code. Apparently the code is not happening while scrolling. Do you know where I should put java for it to work when scrolling?


window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById('myP').className = 'test';
  } else {
    document.getElementById('myP').className = '';
  }
}




Hi,


I can't really provide you with an answer there, as I'm new to outsystems too, but i think I found the corner you should be looking in, if I'm correct (but I'm not sure) there are no scroll events but touch events on mobile.

see this for a start.

These touch events can tell you where the user started and stopped, and the distance, but I think you will still have to do some math of your own to figure out what part of the screen is showing...