Jump to content

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


Israel Portillo

Recommended Posts

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.

Link to comment
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.

Link to comment
Share on other sites

  • 7 months later...
  • 7 months later...

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!

Link to comment
Share on other sites

  • 2 months later...

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();
    });
}
Link to comment
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.

Link to comment
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)
    });
}

 

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

  • 1 year later...
×
×
  • Create New...