I think this is an HTML question...
With most HTML items e.g textbox, slider, meter etc a change of the variable in code changes the text on the web page.
I have a busy web page and a single button where I want to change its caption when pressed e.g. START to STOP or RUN to PAUSE etc.
Using a variable in code e.g. butcaption$ I can change this and it is reflected when the whole webpage is re-drawn - button$(butcaption$,dobut,"but1") .
Is there a work round where this can be changed just with the refresh command as redrawing the whole page each time causes an annoying flicker with the CLS.
I know I can change the colour with e.g. CSS cssid$("but1", "background-color: red;") .
Change text in a button - without redraw page?
Re: Change text in a button - without redraw page?
Hi bugs
This may not be applicable, but the "replace" command may be of some use.
I used it to change the list box prompt.
l$ = listbox$(Pole$,"4, 5, 6, 8, 10, 12, 20", "lbox1")
l$ = replace$(l$, "Choose here", "?")
html l$
This may not be applicable, but the "replace" command may be of some use.
I used it to change the list box prompt.
l$ = listbox$(Pole$,"4, 5, 6, 8, 10, 12, 20", "lbox1")
l$ = replace$(l$, "Choose here", "?")
html l$
-
- Posts: 147
- Joined: Mon Feb 08, 2021 10:10 pm
- Location: Scotland
- Has thanked: 50 times
- Been thanked: 57 times
Re: Change text in a button - without redraw page?
Hi Zim,
Thanks for the reply. I think I have used replace$ in the past - will look back through my old progs to see if it would help here.
Thanks for the reply. I think I have used replace$ in the past - will look back through my old progs to see if it would help here.
- Electroguard
- Posts: 898
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 291 times
- Been thanked: 333 times
Re: Change text in a button - without redraw page?
Javascript can update just the specified items in the webpage.
My generic EasyNet program allows for an optional clock and temperature displays amongst other things.
The web: subroutine can style the initialial webpage with webfonts and other stuff, but there is too much info on screen to refresh the whole web page every second, so the pulse 1000 timer uses javascript to just update the .innerHTML html id='clock', and similarly for id='temp'
My generic EasyNet program allows for an optional clock and temperature displays amongst other things.
The web: subroutine can style the initialial webpage with webfonts and other stuff, but there is too much info on screen to refresh the whole web page every second, so the pulse 1000 timer uses javascript to just update the .innerHTML html id='clock', and similarly for id='temp'
Code: [Local Link Removed for Guests]
pulse:
if showclock = 1 then jscall |_$('clock').innerHTML = "| + tim$ + |"| ' updates the digital clock display
if showtemp = 1 then jscall |_$('temp').innerHTML = "| + temp$ + "˚" + |"| ' updates the temperature display
Code: [Local Link Removed for Guests]
web:
cls
if showclock = 1 then
a$ = a$ + |<div style='display: table; margin-right:auto;margin-left:auto;text-align:center;borderx:1px solid gray;'>|
a$ = a$ + |<style> @font-face { font-family: clockfont; src: url('| + clockfont$ + |');} </style><br>|
a$ = a$ + |<div [b]id='clock'[/b] style='font-family:clockfont;background:|+clockbak$+|;color:|+clockcol$+|;font-size:|+clocksize$+|em;border:1px solid gray;text-align:center;padding:|+clockpad$+|;| '.18emX
a$ = a$ + |display: table; margin-right:auto;margin-left:auto;border-radius:|+clockrad$+|;padding-left:.4em;padding-right:.4em;'>| + tim$ + |</div>|
endif
if (showtemp = 1) then
a$ = a$ + |<br><div style='display: table; margin-right:auto;margin-left:auto;text-align:center;borderx:1px solid gray;'>|
a$ = a$ + |<style> @font-face { font-family: tempfont; src: url('| + tempfont$ + |');} </style><br>|
a$ = a$ + |<div [b]id='temp[/b]' style='font-family: tempfont;background:|+tempbak$+| ;color:|+tempcol$+|;font-size:|+tempsize$+|em;text-align:center;border:1px solid gray;padding:|+temppad$+|;| '.1em;|
a$ = a$ + |display: table; margin-right:auto;margin-left:auto;border-radius:|+temprad$+|;padding-left:.4em;padding-right:.3em;'>| + temp$ + "˚" + |</div>|
a$ = a$ + |</div>|
a$=a$ + |<br><br>|
endif
You do not have the required permissions to view the files attached to this post.
-
- Posts: 147
- Joined: Mon Feb 08, 2021 10:10 pm
- Location: Scotland
- Has thanked: 50 times
- Been thanked: 57 times
Re: Change text in a button - without redraw page?
Hi Electroguard,
Your code does the job just as I wanted - sample below for (my) future reference...
Many thanks for taking the time.
Your code does the job just as I wanted - sample below for (my) future reference...
Code: [Local Link Removed for Guests]
' button test
but1$="Start" : but2$=">"
gosub dohtml
onhtmlreload dohtml
wait
dobut1:
if but1$="Start" then but1$="Stop" else but1$= "Start"
jscall |_$('but1').innerHTML = "| + but1$ + |"|
return
dobut2:
if but2$=">" then but2$="II" else but2$= ">"
jscall |_$('but2').innerHTML = "| + but2$ + |"|
refresh
return
dohtml:
cls
a$=button$(but1$,dobut1,"but1") & "<br>"
a$=a$ & button$(but2$,dobut2,"but2")
html a$
return