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.
Can a DIV button be "turned on" to replace Checkbox?
Moderator: General Moderators
-
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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?
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.
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.
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?
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.
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.
All the best from the United Kingdom.
Re: Can a DIV button be "turned on" to replace Checkbox?
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.
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?
Right then, yes that works.
But I have a new issue now. At the moment, when they "tick" the box, it runs this:
Which runs this:
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".
But I have a new issue now. At the moment, when they "tick" the box, it runs this:
Code: Select all
onClick=\"agreesubmit(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
}
}
}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.
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?
<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.
<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.
All the best from the United Kingdom.