a "Go to top" floating button in a scrollable form for a mobile application.

[Israel Portillo]

How to implement or simulate a "Go to top" floating button in a scrollable form for a mobile application ?

 

Thanks for your time 

[Sherzod]

Hi,

 

... can you try this ?:

procedure TMainmForm.UnimBitBtn1Click(Sender: TObject);
begin
  UniSession.AddJS(MainmForm.WebForm.JSName + '.getScrollable().getScroller().scrollToTop(true)');
end;

Best regards.

[Israel Portillo]

Thanks for your fast and wise answer.....

 

Im now figurating how to implement a small right bottom float bitbtnbutton across all the scroll form.... How implement a like "OnScroll" event or something similary....

 

And I accept suggestions......

 

Anyway thanks... It good to have your backup in our dary work.

[Sherzod]

Hi,

 

Can you try this ?!:

 

1. MainmForm -> Scrollable -> True

 

2. UniServerModule -> CustomCSS:

#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #f5f5f5;
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: #af286d;
    color: white;
}
#back-to-top.show {
    opacity: 1;
}

3. MainmForm -> ClientEvents -> ExtEvents -> window.painted fn:

function window.painted(sender, eOpts)
{
    var me = this;
    var aTopEl = new Ext.Element(document.createElement('a'));
    aTopEl.setId("back-to-top");
    aTopEl.setHtml("↑");
    aTopEl.dom.title = "Back to top";
    document.body.appendChild(aTopEl.dom);
    aTopEl.hide();

    me.getScrollable().getScroller().addListener('scrollstart', function(a) {
        Ext.defer(function() {
            if (a.position.y > 50) {
                $('#back-to-top').addClass('show');
                $('#back-to-top').show();
            } else {
                $('#back-to-top').removeClass('show');
                $('#back-to-top').hide();
            }
        }, 1000)
    });

    $('#back-to-top').on('click', function(e) {
        e.preventDefault();
        me.getScrollable().getScroller().scrollToTop(true);
        $('#back-to-top').removeClass('show');
        $('#back-to-top').hide();
    });
}

Best regards.

[Israel Portillo]

Thanks Master...

[mjcramos]

Hi, I implemented this tip in a UnimDBListGrid it worked nice, but when I change the screen the button keeps showing up, is there any way to make the button disappear via code?

[Sherzod]

Hi,

 

Can you try to use this through AddJS:

 

$('#back-to-top').removeClass('show');

$('#back-to-top').hide();

 

Best regards,

[mjcramos]

Perfect, it worked, thank you.

[Ken_Sowyer]

I made this in a TUnimDBListGrid. And included a back-to-bottom button, but for this I have to know the scroll size to calculate. But can't figured out.

Like, 

            if (a.position.y > element.scrollHeight) {
                $('#back-to-top').addClass('show');
                $('#back-to-top').show();
            }

I tried many x.scrollHeight, but nothing works... 

 

Thanks in advance!

[Ken_Sowyer]

Never mind, just find out with "me.scrollableBehavior.scrollView.getScroller().maxPosition.y"

 

Thanks!

[Georges Soares]

As this code would be in the new uniGUI, I tested the new version and it does not work.

 

Where to look for a reference of what has changed from extjs 4 to 6, in order to facilitate our migration.

[Sherzod]

Hi,

 

Can you try with these changes?

function window.painted(sender, eOpts)
{
    var me = this;
    var aTopEl = new Ext.Element(document.createElement('a'));
    aTopEl.setId("back-to-top");
    aTopEl.setHtml("↑");
    aTopEl.dom.title = "Back to top";
    document.body.appendChild(aTopEl.dom);
    aTopEl.hide();

    me.getScrollable().getScrollElement().addListener('scroll', function() {
        Ext.defer(function() {
            if (me.getScrollable().position.y > 50) {
                $('#back-to-top').addClass('show');
                $('#back-to-top').removeClass('x-hidden-display');
                $('#back-to-top').show();
            } else {
                $('#back-to-top').removeClass('show');
                $('#back-to-top').addClass('x-hidden-display');
                $('#back-to-top').hide();
            }
        }, 1000)
    });

    $('#back-to-top').on('click', function(e) {
        e.preventDefault();
        me.getScrollable().getScrollElement().dom.scrollTo({top:0});
        $('#back-to-top').removeClass('show');
        $('#back-to-top').hide();
    });
}

[Georges Soares]

perfect thank you!

 

But I made an adjustment for my application, so at the end of the list it loads more products.

 

it is perfect.

 

function painted(sender, eOpts)
{
var me = this;
me.getScrollable().getScrollElement().addListener('scroll', function() {
        Ext.defer(function() {
            if (me.getScrollable().position.y = me.getScrollable().getSize()) {
                 ajaxRequest(me, 'getProdutos', []);}
                  }, 1000)
    });


}

I hope I did it right, if you have suggestions you can send me, thank you.

[Sherzod]

It is better to use scrollend event instead of "me.getScrollable().getScrollElement().addListener('scroll', function() {...})

me.getScrollable().on('scrollend', function(){
    ...
})

[Georges Soares]

rs rs rs rs, 

 

I had tried, but I had not put that .ON

 

My friend, where do I find this information!

[Georges Soares]

function painted(sender, eOpts)

{

 var me = this;

 me.getScrollable().on('scrollend', function(){

   ajaxRequest(me, 'getProdutos', []);

 });

}

It was like this.

but when rolling 50% it already makes the call ajax.

[Sherzod]

No

[Sherzod]

function painted(sender, eOpts)

{

    var me = this;

    me.getScrollable().on('scrollend', function() {

        Ext.defer(function() {

            if (me.getScrollable().position.y = me.getScrollable().getSize()) {

                ajaxRequest(me, 'getProdutos', []);

            }

        }, 1000)

    });

}

 

[Sherzod]

Just for performance, this event occurs when the scrolling stops

[Georges Soares]

the code is wrong.

I checked via console.log.

 

the value of

(me.getScrollable () position.y === me.getScrollable (). getSize () y)

 

It's never the same, and I did not figure out how to make the adjustment, for Desktop I thought, but Mobile did not.

 

so I did a multiplication by 0.9 to adjust.

 

 

Do you have a solution to this difference?

 

var me = this;
    me.getScrollable().on('scrollend', function(event) {
        Ext.defer(function() {
                console.log('posfora:' + me.getScrollable().position.y);
                console.log('sizefora:' + me.getScrollable().getSize().y);
                
            if (me.getScrollable().position.y >= (me.getScrollable().getSize().y * 0.9)) {
                console.log('posDentro:' + me.getScrollable().position.y);
                console.log('sizeDentro:' + me.getScrollable().getSize().y);
            
                ajaxRequest(me, 'getProdutos', []);
            } 
                           

            
        }, 1000)
    });

[SISBLU Software]

I couldn't either. can anyone help?