On APP Outsystems 11, I try to fix object with only position y because it has wider than screen and it shouldn't fixed x-axis.

Here is an example of jquery code that I found

https://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y

$(window).on('scroll', function () {

  var $w = $(window);
  $('.position-fixed-x').css('left', $w.scrollLeft());
  $('.position-fixed-y').css('top', $w.scrollTop());

});


It fine when it's just a pure css like this

But when I put Jquery which is on the above.It turn to blank and error

(I put code in OnReady)


Did I miss something or my syntax wrong? Please guide me.

Hi

Try to add document.ready in your jquery code.pls share screen shot of error

also colud you please share oml file,so that we can try to change code

Salman Ansari wrote:

Hi

Try to add document.ready in your jquery code 

also colud you please share oml file,so that we can try to change code

Thank you very much for your advice. I will try it.

and here is my attachment OML file name " AppTestFixY.oml "


Hi,


You missed to add Jquery file in your screen.Please see the updated working oml with your example



Hi Chunyanuch Kimpiam,

I just executed the shared .oml implementation in my personal environmental and it's working fine.

Check this: JS Test Screen

1) Add the jQuery Script file to your application module as mentioned below

                             

2) Check the error logs using the Service Center application

3) Check the browser inspect/console section to trace, occurred run-time JS error


Hope this helps you!


Regards,

Benjith Sam

Salman Ansari wrote:

Hi,


You missed to add Jquery file in your screen.Please see the updated working oml with your example




OH! It doesn't error anymore!!!
... but it doesn't work as well. Jquery should give a result same as this example red box.
[video-to-gif output image]


but it seems my red box still not the same as this example although it uses the same code.
Could you please guide me more? 

Benjith Sam wrote:

Hi Chunyanuch Kimpiam,

I just executed the shared .oml implementation in my personal environmental and it's working fine.

Check this: JS Test Screen

1) Add the jQuery Script file to your application module as mentioned below

                             

2) Check the error logs using the Service Center application

3) Check the browser inspect/console section to trace, occurred run-time JS error


Hope this helps you!


Regards,

Benjith Sam

Thank you for your advice.
It doesn't error and I can test it. However this Jquery code not work.(It doesn't work on my test app )

But from the example, it will add Top when scroll by window.I wonder why my same code doesn't trigger a red box top.


Solution

Chunyanuch Kimpiam wrote:

Salman Ansari wrote:

Hi,


You missed to add Jquery file in your screen.Please see the updated working oml with your example




OH! It doesn't error anymore!!!
... but it doesn't work as well. Jquery should give a result same as this example red box.
[video-to-gif output image]


but it seems my red box still not the same as this example although it uses the same code.
Could you please guide me more? 

Hi


Please check the attached example.


Solution

Salman Ansari wrote:

OHHH!!! It's work! It's because I should use OnRender and it work only scroll by the outer screen ( window scroll).
Thanks a bunch.

You give me a light now. With this, I'm sure it's a useful technic.

Chunyanuch Kimpiam wrote:

Salman Ansari wrote:

OHHH!!! It's work! It's because I should use OnRender and it work only scroll by the outer screen ( window scroll).
Thanks a bunch.

You give me a light now. With this, I'm sure it's a useful technic.

My pleasure!

Good to hear I can help and you got the solution

Happy coding :)


Finally, I found a solution to fix y in DIV Scroll.
I will post more here for the other to use it.

As discussed about window scroll if you want to add this function in DIV object.

You can add it by adding a class name of div and place that name over the word "window"
 

example My div name "Box" then my Jquery should be

$('.Box').On('scroll', function () {

  var $w = $('.Box');
  $('.position-fixed-y').css('top', $w.scrollTop());

});

Result: Red box can position fix the y-axis only in DIV!

Chunyanuch Kimpiam wrote:

Finally, I found a solution to fix y in DIV Scroll.
I will post more here for the other to use it.

As discussed about window scroll if you want to add this function in DIV object.

You can add it by adding a class name of div and place that name over the word "window"
 

example My div name "Box" then my Jquery should be

$('.Box').On('scroll', function () {

  var $w = $('.Box');
  $('.position-fixed-y').css('top', $w.scrollTop());

});

Result: Red box can position fix the y-axis only in DIV!

Good to see you are on right track