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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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".
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply