Page 1 of 1

Can a DIV button be "turned on" to replace Checkbox?

Posted: Tue Jun 21, 2016 11:08 am
by simonmlewis
We have an ecommerce site where users have to tick a box to declare they are 18 years or over.

But on a mobile, that tick box isn't so easy to tick. So is there an alternative, that will enable the checkbox, via the "onclick" of a DIV ?

So the Checkbox would still be there, but below it on a mobile, "I am 18 or over", and clicking that would do two things:

1) checks the "checkbox"
2) stays lit when clicked.

It would help sales I am sure, as people can more easily declare it.

Any ideas would be helpful.

Re: Can a DIV button be "turned on" to replace Checkbox?

Posted: Tue Jun 21, 2016 11:38 am
by simonmlewis
http://kleinejan.github.io/titatoggle/#howto
I'm thinking something like this, but I don't see how it works.
Be good if all the CSS could be hosted locally.
There was another one I found, which is nicer, and these sliders would be better than divs.

Re: Can a DIV button be "turned on" to replace Checkbox?

Posted: Tue Jun 21, 2016 11:42 am
by Celauran

Re: Can a DIV button be "turned on" to replace Checkbox?

Posted: Tue Jun 21, 2016 11:48 am
by simonmlewis
Nice one, I could easily CSS that.
Just wondering how those Bootstrap slider ones work, as they loko really nice.
http://www.bootstraptoggle.com/

But I don't know what I have to host from our server, nor what "jquery" scripts I have to have in place to make them work.

But I like the look of them. AS people are use to these sliders.

Re: Can a DIV button be "turned on" to replace Checkbox?

Posted: Tue Jun 21, 2016 11:53 am
by Celauran
Dead simple. https://jsfiddle.net/Ltwbcgmu/1/

I'm sure you're already using jQuery in your app, so you shouldn't need to load it again.

Re: Can a DIV button be "turned on" to replace Checkbox?

Posted: Tue Jun 21, 2016 12:24 pm
by simonmlewis
Right then, yes that works.
But I have a new issue now. At the moment, when they "tick" the box, it runs this:

Code: Select all

onClick=\"agreesubmit(this)\"
Which runs this:

Code: Select all

var checkobj
function agreesubmit(el){
checkobj=el
if (document.all||document.getElementById){
for (i=0;i<checkobj.form.length;i++){  //hunt down submit button
var tempobj=checkobj.form.elements[i]
if(tempobj.type.toLowerCase()=="submit")
tempobj.disabled=!checkobj.checked
}
}
}
That then enables a Submit button so they can "buy now".

Brilliant. Just changed the onclick to onchange which enables a button too. Trying to see how I can tweak it's colors so they are "on brand".

Re: Can a DIV button be "turned on" to replace Checkbox?

Posted: Tue Jun 21, 2016 12:34 pm
by simonmlewis
<script type="text/javascript" src="https://gitcdn.github.io/bootstrap-togg ... "></script>
<link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-togg ... le.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css">

Which of these three are overriding all my links and colours on the page I am using?

Such a pain. I guess the only way to get around that is to get the CSS of those two, host them myself, and then remove the basic a {} from each.

Otherwise I have to go thru all my CSS and add !important.