Need to extract a value from css

new BookmarkLockedFalling
greg56
New Member
*

greg56 Avatar

Posts: 32

Post by greg56 on Jan 11, 2018 18:45:19 GMT -5

Using the code below, how do I extract the state of the checkboxes (checked or unchecked) to RunBasic?
Any help would be greatly appreciated.



html "<!DOCTYPE html >"
html "<html >"
html "<style>"


' The container
html ".container {"
html " display: block;"
html " position: relative;"
html " padding-left: 35px;"
html " margin-bottom: 12px;"
html " cursor: pointer;"
html " font-size: 22px;"
html " -webkit-user-select: none;"
html " -moz-user-select: none;"
html " -ms-user-select: none;"
html " user-select: none;"
html "}"
html ""


' Hide the browser's default checkbox
html ".container input {"
html " position: absolute;"
html " opacity: 0;"
html " cursor: pointer;"
html "}"
html ""


' Create a custom checkbox
html ".checkmark {"
html " position: absolute;"
html " top: 0;"
html " left: 0;"
html " height: 25px;"
html " width: 25px;"
html " background-color: #eee;"
html "}"
html ""


' On mouse-over, add a grey background color
html ".container:hover input ~ .checkmark {"
html " background-color: #ccc;"
html "}"
html ""


' When the checkbox is checked, add a blue background
html ".container input:checked ~ .checkmark {"
html " background-color: #2196F3;"
html "}"
html ""


' Create the checkmark/indicator (hidden when not checked)
html ".checkmark:after {"
html " content: '';"
html " position: absolute;"
html " display: none;"
html "}"
html ""


' Show the checkmark when checked
html ".container input:checked ~ .checkmark:after {"
html " display: block;"
html "}"
html ""


' Style the checkmark/indicator
html ".container .checkmark:after {"
html " left: 9px;"
html " top: 5px;"
html " width: 5px;"
html " height: 10px;"
html " border: solid white;"
html " border-width: 0 3px 3px 0;"
html " -webkit-transform: rotate(45deg);"
html " -ms-transform: rotate(45deg);"
html " transform: rotate(45deg);"
html "}"
html "</style>"
html "<body>"
html ""


html "<h1>Custom Checkboxes</h1>"

html "<label class='container'>One"
html " <input type='checkbox' checked='checked'>"
html " <span class='checkmark'></span>"
html "</label>"

html "<label class='container'>Two"
html " <input type='checkbox'>"
html " <span class='checkmark'></span>"
html "</label>"

html "<label class='container'>Three"
html " <input type='checkbox'>"
html " <span class='checkmark'></span>"
html "</label>"

html "<label class='container'>Four"
html " <input type='checkbox'>"
html " <span class='checkmark'></span>"
html "</label>"
html ""
html "</body>"
html "</html >"

wait


meerkat
Senior Member
****

meerkat Avatar

Posts: 250

Post by meerkat on Jan 12, 2018 6:51:27 GMT -5

You need to give it a name and sometimes a id. Once you submit you can get the checkbox with a #request

Here I gave checkbox one a name. You need to do this for all the checkboxes.


ckNames$ = "One Two Three Four"
dim ckd$(4)
ckd$(3) = "on"
call setCss
html ""

html "<h1>Custom Checkboxes</h1>"

for i = 1 to 4
html "<label class='container'>";word$(ckNames,ドルi)
chk$ = ""
if ckd$(i) <> "" then chk$ = "checked"
html " <input type='checkbox' name='c";i;"' id='c";i;"' ";chk$;" >"
html " <span class='checkmark'></span>"
html "</label>"
next i

html ""
button #ck, "Get the checks",[doChecks]
wait

[doChecks]
for i = 1 to 4
ck$(i) = #request get$("c";i)
print "Check ";i;" is:"; ck$(i)
next i

wait

' ------------------------------
' set css
' ------------------------------
SUB setCss
' Style the checkmark/indicator
CSSClass ".checkmark:after","{
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}"

' The container
CSSClass ".container", "{
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}"

' Hide the browser's default checkbox
CSSClass ".container input", "{
position: absolute;
opacity: 0;
cursor: pointer;
}"

' Create a custom checkbox
CSSClass ".checkmark", "{
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}"

' On mouse-over, add a grey background color
CSSClass ".container:hover input ~ .checkmark", "{
background-color: #ccc;
}"

' When the checkbox is checked, add a blue background
CSSClass ".container input:checked ~ .checkmark", "{
background-color: #2196F3;
}"

' Create the checkmark/indicator (hidden when not checked)
CSSClass ".checkmark:after", "{
content: '';
position: absolute;
display: none;
}"

' Show the checkmark when checked
CSSClass ".container input:checked ~ .checkmark:after", "{
display: block;
}"

END SUB



Hope this helps..
Last Edit: Jan 12, 2018 12:06:05 GMT -5 by meerkat
StefanPendl
Global Moderator
*****

StefanPendl Avatar

Run for BASIC ...
Posts: 945

[b]Stefan[/b] - [a href=http://stefanpendl.runbasichosting.com/]Homepage[/a][br][br][b]Please give credit if you use code I post, no need to ask for permission.[/b][br][br]Run BASIC 1.01, Fire-/Waterfox (IE11, Edge), Windows 10 Professional x64, Intel Core i7-4710MQ 2.5GHz, 16GB RAM
meerkat
Senior Member
****

meerkat Avatar

Posts: 250

Post by meerkat on Jan 13, 2018 4:07:01 GMT -5

StefanPendl Avatar
Why create pure HTML controls?
It is easier to use the RB ones and apply styles to them.


AGREED!
When I first looked at the code, I thought something that should be simple has been made complex.

Even if you want to stick with HTML, why all the complex css. A lot of the css styles can be placed within the checkbox command itself. And a lot of it is not necessary to do the same thing.

Also not sure why the other stuff like <body>.


greg56
New Member
*

greg56 Avatar

Posts: 32

Post by greg56 on Jan 15, 2018 12:30:01 GMT -5

Thank you meerkat and Stefan.
My choice was really out of ignorance.
Using the code below, I could not figure out how to apply styles to them properly.
Greg



[start]
cls
cssid #chkboxes, "{
Width: 100px;
Height: 25px;
border-width:6px;
border-style:outset;
background-color:lightgreen;
margin:10px;
}"

checkbox #ch1, "Option 1", 0
#ch1 setid("chkboxes")
print

checkbox #ch2, "Option 2", 0
#ch2 setid("chkboxes")
print

checkbox #ch3, "Option 3", 0
#ch3 setid("chkboxes")
print:print

link #get, "Get Checkbox Value", [getCheck]
print
wait

[getCheck]
for n=1 to 3
'note handle variable!
ch$="#ch";n
isSet = #ch$ value()
print "Checkbox ";n;
if isSet then
print " is checked."
else
print " is clear."
end if
next n
print
link #nxt, "Again?", [again]
wait
[again]
goto [start]