Back to top button

Targets Web
1

Hello all, first post here.

I’m trying to implement a Back to top button for Xojo Web.

Is there a quick hack for that? I’ve created one with a WebContainer (it’s working) but Its static position remains the same, I need it to follow the scrolling up/down. Can’t manage to have it relocated with Lock Right/Left while scrolling .

I have the code here with CSS and JavaScript for bootstrap(https://mdbootstrap.com/snippets/standard/mdbootstrap/2964350#js-tab-view) but I don’t really know if this will work with SDK. I’m from a very old Xojo version (Real Basic), so I’m new to the Xojo web version 2 bootstrap.

Any help would be appreciated.

2

Wouldn’t it make more sense to always have the top button at the bottom right of the page? That way no matter how much you scroll it will always be at the bottom right of the page.

image
image616×570 23.8 KB

3

Thanks for your reply,

Actually, your screenshot is for Desktop, I’m looking for a Webpage bootstrap design (Xojo WebApplication) with behavior like this one W3Schools Tryit Editor

So lock right can be applied, but not the lock bottom, the Height must be changing as we are scrolling the webpage up and down, from the footer, mid-page etc…

4

Desktop or web, locking the button works the same. For Web if you really want it to work like that you will need to adapt the JavaScript to run in Xojo.

ExecuteJavaScript(script As String)
5

Ok, thanks, I will look in to creating my own JavaScript function for this.

Just thought that someone here would have one easy routine to implement, since this is a feature that 50% of the webpages out, there have.

6

I have such a control in Web SDK, I will share it if needed

2 Likes
7

Oh yes, please, that would be nice.

8

Scroll To Top Button

The position doesn’t matter, it depends on the “Right” and “Bottom” properties - I’ll change it someday. The width of the button matters.
If there’s a feature missing, I’ll be happy to add it :slight_smile:

1 Like
9

I ran this in the Debugger and the Scroll to Top button never showed up so I lengthened the page to 2000 pixels and added a TextArea with greeked text to fill the page length. When I ran again it worked as expected so I can only assume there needs to be some threshold of page length not visible for the button to work. If that is the case one would think that there should be a way to set that threshold.

10

Yes, this is pretty much what I was looking for. Thanks!

Yes, you can change the JS code, so the button gets visible at a certain px height.

Something like this

    document.body.scrollTop > 20 ||
    document.documentElement.scrollTop > 20

Would it be possible to get the WebSDKUIControl code Decrypted?

11

I followed this example from w3schools.com
When I learned how to encrypt controls, I decided to do it because in the future I would like to publish all my controls, but of course I can make an exception :wink: (please download again)

Yes, the threshold is in this function:

         scrollFunction() {
             let buttonEl = document.getElementById("ScrollToTopButton");
             if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                 buttonEl.style.display = "block";
             } else {
                 buttonEl.style.display = "none";
             }
         }

I don’t know if it will be easy to change it depending on the parameter, I have no idea how to go about it. Anyone have an idea?

1 Like
12

Perfect my friend, and yes, if I change both 20 to 100 then the button will appear when scrolling top reaches 100px. If we change to 500+, then it will appear around the 2nd page, depending on the screen size.

I personally don’t know yet how to have it change into the “update control(data)”. I’m an SDK newbie.

As soon as I find out, I will post it here.

Just have to create a variable in JavaScript and have it link to something like below

            if (typeof json.width !== 'undefined') {
                this.buttonEl.style.width = `${json.width}px`;
            }

Well, for now, thank you so much for the decrypted code.

13

Yes, many thanks for the decrypted version. It would be great if the control had a setting for the threshold under “Behavior” so you can encrypt it again. I’m not sure if you can do that with an SDK control though.

14

With a bit of tweaking, I got exactly what I needed.

Adding in the CSS the fontawesome arrow up using the unicode f062 to get fa-solid fa-arrow-up.
2024-02-01_164525

For a multi-language site, the arrow is better than “TOP” text.

You will also need to add the fontawesome script in the HTML header. You can use your own lib or the remote kit like:

<script src="https://kit.fontawesome.com/CHANGETOYOURKITNUMBER.js" crossorigin="anonymous"></script>

and here the full SDK

2 Likes