Just starting out? Need help? Post your questions and find answers here.
Stefan
 
Posts: 8
Joined: Mon Feb 05, 2018 9:44 pm

Gadget scrolling down

by Stefan Mon Feb 05, 2018 9:51 pm

I'm looking for a way for a ListIconGadget or webgadget or any other gadget where text can go to automatically scroll all the way down.
I need that for a chatbox.
Unfortunately, I can not find anything in the Spiederbasic forum.
Is that possible with Javascript?
Does somebody has any idea?
Stefan
 
Posts: 8
Joined: Mon Feb 05, 2018 9:44 pm

Re: Gadget scrolling down

by Stefan Fri Feb 09, 2018 7:43 am

Is there really no way to scroll down to the end of a text in a editorgadget or webgadget?
falsam
 
Posts: 235
Joined: Mon May 05, 2014 9:49 pm
Location: France

Re: Gadget scrolling down

by falsam Fri Feb 09, 2018 2:46 pm

Hello Stefan. I offer you this solution with a bit of JavaScript.
Code: Select all
EnableExplicit

Enumeration
  #mf
  #mfHistory
  #mfMessage
  #mfSend
EndEnumeration

Global w, h, Selector, cr.s = "<br>"

Declare onSendMessage()
Declare onResize()

;Window (Full Screen)
OpenWindow(#mf, 0, 0, 0, 0, "", #PB_Window_Background)
w = WindowWidth(#mf)
h = WindowHeight(#mf)

;User history
TextGadget(#mfHistory, 0, 20, w, h - 100, "Welcome. Type your message and press enter (<em>or button Send</em>)")
SetGadgetColor(#mfHistory, #PB_Gadget_BackColor, RGB(192, 192, 192))

;Insert vertical/horizontal scrollbar
Selector = GadgetID(#mfHistory)
!$(v_selector.div).css("overflow", "scroll")

;User message
StringGadget(#mfMessage, 0, h - 70, w-100, 24, "Your message", #PB_String_PlaceHolder)
ButtonGadget(#mfSend, w - 95, h - 70, 80, 24, "Send")
AddKeyboardShortcut(#mf, #PB_Shortcut_Return, #mfSend)

;Triggers
BindEvent(#PB_Event_Menu, @onSendMessage(), #mf, #mfSend)
BindGadgetEvent(#mfSend, @onSendMessage())
BindEvent(#PB_Event_SizeDesktop, @onResize())

Procedure onSendMessage()
  Protected Buffer.s
  Protected UserMessage.s = GetGadgetText(#mfMessage)
 
  If UserMessage
     Buffer = GetGadgetText(#mfHistory) + cr + UserMessage 
     SetGadgetText(#mfHistory, Buffer) 
     SetGadgetText(#mfMessage, "")
     
     ;Scroll vertical (Time out : 500
    !$(v_selector.div).animate({scrollTop: $(v_selector.div).prop("scrollHeight")}, 500);
  EndIf
EndProcedure

Procedure onResize()
  Protected w = DesktopWidth(0)
  Protected h = DesktopHeight(0)
 
  ResizeGadget(#mfHistory, #PB_Ignore, #PB_Ignore, w , h - 100)
  ResizeGadget(#mfMessage, #PB_Ignore, h - 70, w - 100, #PB_Ignore)
  ResizeGadget(#mfSend, w - 95, h - 70, #PB_Ignore, #PB_Ignore)
EndProcedure
➽ Windows 10 - JDK 1.8 - SB 2.20 - Android 5.5
Mood ☀️
http://falsam.com

Sorry for my poor english
falsam
 
Posts: 235
Joined: Mon May 05, 2014 9:49 pm
Location: France

Re: Gadget scrolling down

by falsam Fri Feb 09, 2018 3:45 pm

I created an APK with this code and tested it with a smartphone on Android. It works.

Image

The application not being signed you are obliged to leave the debugger enabled.

you may not display the debug window in the application with theCloseDebugOutput() command at the beginning of the code.
➽ Windows 10 - JDK 1.8 - SB 2.20 - Android 5.5
Mood ☀️
http://falsam.com

Sorry for my poor english
Stefan
 
Posts: 8
Joined: Mon Feb 05, 2018 9:44 pm

Re: Gadget scrolling down

by Stefan Fri Feb 09, 2018 10:15 pm

No idea why, but it works perfect!
Thanks you very much! :D
Dirk Geppert
 
Posts: 45
Joined: Fri Sep 22, 2017 7:02 am

Re: Gadget scrolling down

by Dirk Geppert Mon Feb 12, 2018 9:57 am

Interesting. Thanks Falsam, I can use it too.
Dirk Geppert
 
Posts: 45
Joined: Fri Sep 22, 2017 7:02 am

Re: Gadget scrolling down

by Dirk Geppert Mon Feb 12, 2018 11:25 am

@Falsam: I use the EditorGadget () to display some text. Unfortunately, SetGadgetText () always scrolls to the bottom of the text.
Is there also a possibility to scroll on top?
User avatar
Peter
 
Posts: 445
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: Gadget scrolling down

by Peter Mon Feb 12, 2018 11:48 am

@Dirk:

Code: Select all
EnableExplicit

Enumeration
  #myWindow
  #cmdScrollDown
  #cmdScrollUp
  #myEditorGadget
EndEnumeration

Procedure EditorScrollDown()
 
  Protected Selector = GadgetID(#myEditorGadget)
  ! $(v_selector.gadget.textbox).animate( { scrollTop: $(v_selector.gadget.textbox).prop("scrollHeight")}, 500); // with animation
  ! // v_selector.gadget.textbox.scrollTop = v_selector.gadget.textbox.scrollHeight; // without animation
 
EndProcedure

Procedure EditorScrollUp()
 
  Protected Selector = GadgetID(#myEditorGadget)
  ! $(v_selector.gadget.textbox).animate( { scrollTop: 0}, 500); // with animation
  ! // v_selector.gadget.textbox.scrollTop = 0; // without animation
 
EndProcedure


OpenWindow(#myWindow, #PB_Ignore, #PB_Ignore, 500, 500, "", #PB_Window_ScreenCentered)

ButtonGadget(#cmdScrollDown, 10, 10, 220, 30, "Scroll down")
ButtonGadget(#cmdScrollUp, 240, 10, 220, 30, "Scroll up")

EditorGadget(#myEditorGadget, 10, 50, 480, 440)

Define Counter
Define Lines.s

For Counter = 0 To 99
  Lines + "Line " + Str(Counter+1) + #CRLF$
Next

SetGadgetText(#myEditorGadget, Lines)

BindGadgetEvent(#cmdScrollDown, @EditorScrollDown())
BindGadgetEvent(#cmdScrollUp, @EditorScrollUp())


Greetings ... Peter
Dirk Geppert
 
Posts: 45
Joined: Fri Sep 22, 2017 7:02 am

Re: Gadget scrolling down

by Dirk Geppert Tue Feb 13, 2018 9:38 am

Works! :D Thx Peter
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 3 guests