Jump to content


Photo

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


  • Please log in to reply
19 replies to this topic

#1 Israel Portillo

Israel Portillo

    Member

  • uniGUI Subscriber
  • PipPip
  • 18 posts

Posted 08 November 2016 - 04:40 AM

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

 

Thanks for your time 


  • 0

#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4991 posts

Posted 08 November 2016 - 05:19 AM

Hi,

 

... can you try this ?:

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

Best regards.


  • 0

#3 Israel Portillo

Israel Portillo

    Member

  • uniGUI Subscriber
  • PipPip
  • 18 posts

Posted 08 November 2016 - 05:43 PM

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.


  • 0

#4 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4991 posts

Posted 08 November 2016 - 09:33 PM

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.


  • 0

#5 Israel Portillo

Israel Portillo

    Member

  • uniGUI Subscriber
  • PipPip
  • 18 posts

Posted 09 November 2016 - 06:46 PM

Thanks Master...


  • 0

#6 mjcramos

mjcramos

    Member

  • uniGUI Subscriber
  • PipPip
  • 39 posts

Posted 09 June 2017 - 08:52 PM

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?


  • 0

#7 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4991 posts

Posted 10 June 2017 - 07:44 AM

Hi,

Can you try to use this through AddJS:

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

Best regards,
  • 0

#8 mjcramos

mjcramos

    Member

  • uniGUI Subscriber
  • PipPip
  • 39 posts

Posted 11 June 2017 - 01:43 AM

Perfect, it worked, thank you.


  • 0

#9 Ken_Sowyer

Ken_Sowyer

    Member

  • Members
  • PipPip
  • 15 posts
  • LocationBrazil

Posted 31 January 2018 - 01:13 PM

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!


  • 0

#10 Ken_Sowyer

Ken_Sowyer

    Member

  • Members
  • PipPip
  • 15 posts
  • LocationBrazil

Posted 31 January 2018 - 01:22 PM

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

 

Thanks!


  • 0

#11 Georges Soares

Georges Soares

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 101 posts
  • LocationCuiabá-MT

Posted 18 April 2018 - 01:49 PM

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.

  • 0

#12 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4991 posts

Posted 18 April 2018 - 04:09 PM

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

  • 0

#13 Georges Soares

Georges Soares

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 101 posts
  • LocationCuiabá-MT

Posted 18 April 2018 - 05:30 PM

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.


  • 0

#14 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4991 posts

Posted 18 April 2018 - 05:46 PM

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

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

  • 0

#15 Georges Soares

Georges Soares

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 101 posts
  • LocationCuiabá-MT

Posted 18 April 2018 - 05:49 PM

rs rs rs rs, 

 

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

  • 0

#16 Georges Soares

Georges Soares

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 101 posts
  • LocationCuiabá-MT

Posted 18 April 2018 - 05:57 PM

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.

  • 0

#17 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4991 posts

Posted 18 April 2018 - 06:15 PM

No


  • 0

#18 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4991 posts

Posted 18 April 2018 - 06:17 PM

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

  • 0

#19 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4991 posts

Posted 18 April 2018 - 06:21 PM

Just for performance, this event occurs when the scrolling stops


  • 0

#20 Georges Soares

Georges Soares

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 101 posts
  • LocationCuiabá-MT

Posted 18 April 2018 - 09:14 PM

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

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users