Jump to content
uniGUI Discussion Forums
Israel Portillo

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

Recommended Posts

Hi,

 

... can you try this ?:

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

Best regards.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Hi,

 

Can you try to use this through AddJS:

 

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

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

 

Best regards,

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

 

Thanks!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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();
    });
}

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

rs rs rs rs, 

 

I had tried, but I had not put that .ON
 
My friend, where do I find this information!

Share this post


Link to post
Share on other sites


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.

Share this post


Link to post
Share on other sites


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)
    });
}

 

Share this post


Link to post
Share on other sites

Just for performance, this event occurs when the scrolling stops

Share this post


Link to post
Share on other sites
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)
    });

Share this post


Link to post
Share on other sites

×