Jump to content


Photo

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


  • Please log in to reply
7 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
  • 3430 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
  • 3430 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
  • 38 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
  • 3430 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
  • 38 posts

Posted 11 June 2017 - 01:43 AM

Perfect, it worked, thank you.


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users