Does anyone know of a Scrollbar widget suitable for us with HTML5?

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
djkesler
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 55
Joined: Tue Jun 01, 2010 10:37 pm

Does anyone know of a Scrollbar widget suitable for us with HTML5?

Post by djkesler » Wed Jan 03, 2024 11:06 pm

I have been disappointed about the "look" of the web deployed scrollbar control. Does anyone know if there is a widget for this control, or is there some underlying reason that it hasn't been done yet? I haven't yet attempted to make a widget, but I would really like to have something that doesn't look so bad.

Thanks,

David Kesler

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4047
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Does anyone know of a Scrollbar widget suitable for us with HTML5?

Post by bn » Fri Jan 05, 2024 9:56 am

Hi David,

Could you specifiy what kind of scrollbar you need. I did some scrollbars for "web" exactly for the reason you cite.

Maybe a small screenshot of the scrollbar you have in mind?

Kind regards
Bernd

djkesler
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 55
Joined: Tue Jun 01, 2010 10:37 pm

Re: Does anyone know of a Scrollbar widget suitable for us with HTML5?

Post by djkesler » Wed Jan 10, 2024 2:58 am

Really, anyting is better than the two little arrows control. Maybe a line with a circle that would mimic the thumbposition?

here what it looks like now in the attachement.
farmscreenshot.jpg
Thanks for replying! Happy New Year, by the way.

David Kesler

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4047
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Does anyone know of a Scrollbar widget suitable for us with HTML5?

Post by bn » Sun Jan 14, 2024 9:29 pm

Hi David,

What I see is fields with vertical scrollbars and probably a group with a vertical scroll bar.
Those take the "motif" look on web (html) since there are no translations to web apps.

Livecode provides new controls that look good on web like PolyList and PolyGrid. They look the same as in the IDE.
If your license allows for current versions of LC it would be worth the trouble to use those. They have their own api and needs to get used to.
I think they were part of the "Summerbundle".

For some instances you can get away with homemade scrollbars.

Here I post one of those. See if they are of any help for you.
If so please feel free to ask how to modify them when getting stuck.

Kind regards
Bernd
Attachments
sliderVertSimpleDemo.livecode.zip
(4.06 KiB) Downloaded 151 times
sliderVertSimple.livecode.zip
(4.36 KiB) Downloaded 151 times
Last edited by bn on Mon Jan 15, 2024 12:39 am, edited 1 time in total.

djkesler
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 55
Joined: Tue Jun 01, 2010 10:37 pm

Re: Does anyone know of a Scrollbar widget suitable for us with HTML5?

Post by djkesler » Sun Jan 14, 2024 9:56 pm

Bernd,

Thank you very much.

I have not been programming for the last year. I just saw the items on the summer bundle.

I’ll look at the file you were most kind to include.

The main problem was with the large group scrollbar not having a visible “thumb”.
I started to build my own slider and I noticed the property thumbsize. I manually set the thumbsize on the native scrollbar size to 3. When compiled for html the thumb appeared.

This program has a very limit audience. Just 35 customers that use twice a year, so beauty is not paramount. The functionality of a sliding thumb was.

Thanks again for your time and help.

It is very cold here in Texas today -8*C! And we live in a house built in 1890 with no insulation in the walls, so we are trying to keep warm as possible.

David Kesler

PaulDaMacMan
Posts: 644
Joined: Wed Apr 24, 2013 4:53 pm
Contact:

Re: Does anyone know of a Scrollbar widget suitable for us with HTML5?

Post by PaulDaMacMan » Thu Apr 11, 2024 3:36 pm

djkesler wrote:
Wed Jan 10, 2024 2:58 am
Really, anyting is better than the two little arrows control. Maybe a line with a circle that would mimic the thumbposition?

here what it looks like now in the attachement.farmscreenshot.jpg

Thanks for replying! Happy New Year, by the way.

David Kesler
Also in HTML5 version of the engine it seems that the old emulated classic OSes lookAndFeel (which is the actual syntax to look up) can still play a role.
From the dictionary:

Code: Select all

Set the lookAndFeel to {"Appearance Manager"|Macintosh|Motif|"Windows 95"}
Setting this engine-level property will change the appearance of the controls (to some other 1990s OS look, which I kind of like). This also seems to enable some other properties to then be settable on the control (like a '3D' button topBevel's color property becomes functional, for example).

Of course a custom-built grouped-controls slider or a Widget based slider will give you a consistent appearance across all platforms, and you could script that to tweak some properties in order to blend with the modern target OS version that the stack is running on.
I do have a slider in Widget form somewhere. I did some work on one that allowed for either vertical or horizontal orientation and had a few other properties to set. I'll post a link after I find where I put it...

Trevor DeVore did an excellent walk through of creating a slider Widget extension here:
https://www.bluemangolearning.com/livec ... er-widget/
And his custom extension widget controls are available here:
https://github.com/trevordevore/livecode-extensions/
My GitHub Repos: https://github.com/PaulMcClernan/
Related YouTube Videos: PlayList

rayjbenet
Posts: 23
Joined: Tue Feb 10, 2009 2:35 pm
Location: USA - Pennsylvania
Contact:

Re: Does anyone know of a Scrollbar widget suitable for us with HTML5?

Post by rayjbenet » Fri Jun 07, 2024 8:04 pm

bn wrote:
Sun Jan 14, 2024 9:29 pm


Livecode provides new controls that look good on web like PolyList and PolyGrid. They look the same as in the IDE.
If your license allows for current versions of LC it would be worth the trouble to use those. They have their own api and needs to get used to.
In LC 10.0.0 ( dp 8 ) - and before - the polygrid doesn't show scrollbars on the web for me. It does correctly respond to "touchscrolling" but I can't seem to get a scrollbar to appear. It looks and works great on the desktop. When I go into test mode, the scrollbars do not appear.

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4047
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Does anyone know of a Scrollbar widget suitable for us with HTML5?

Post by bn » Tue Jun 11, 2024 10:12 am

rayjbenet wrote:
Fri Jun 07, 2024 8:04 pm
In LC 10.0.0 ( dp 8 ) - and before - the polygrid doesn't show scrollbars on the web for me. It does correctly respond to "touchscrolling" but I can't seem to get a scrollbar to appear. It looks and works great on the desktop. When I go into test mode, the scrollbars do not appear.
Hi Ray,

I just tested a very simple Polygrid with one column and the colorNames as content locally in Chrome (recommended) and Safari on a Mac.

The scrollbar was alway present.

PolyGridInBrowser.jpg
PolyGridInBrowser.jpg (25.94 KiB) Viewed 770 times

Which operating system are you using and which browser? Do you test for mobile devices?

Kind regards
Bernd

rayjbenet
Posts: 23
Joined: Tue Feb 10, 2009 2:35 pm
Location: USA - Pennsylvania
Contact:

Re: Does anyone know of a Scrollbar widget suitable for us with HTML5?

Post by rayjbenet » Tue Jun 18, 2024 12:40 pm

Hello Bernd -
Thanks for this.

Sonoma 14.5 on an M1 (ca 2020) Macbook Pro.

I am using the "Test" mode in the IDE 10.0.0 (dp 8).

Doesn't seem to matter if I choose Safari, Firefox or Chrome.

In the IDE:
PolyG in IDE.png
PolyG in IDE.png (50.06 KiB) Viewed 418 times
In the Test environment in Chrome:
PolyG in Chrome via IDE_Test.png
(Pictures are of the same polygrid - in the IDE I had resized the screen but didn't do that in Chrome as my responsive code currently cuts that margin off on the right when in a browser.)

I repeated your test and got the same result you did, so I agree - the scrollbars _should_ appear. My polygrid is part of a "Main" group that contains a couple of label fields and a calendar widget.

Let me dig into the responsive code pieces and see if that is having an impact.

Will report back.
Again - thanks.
Ray

Post Reply

Return to “HTML5”