PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sat Aug 18, 2018 9:33 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 7 posts ] 
Author Message
PostPosted: Tue Jun 21, 2016 11:08 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4420
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jun 21, 2016 11:38 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4420
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jun 21, 2016 11:42 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
Quick and dirty: https://jsfiddle.net/Ltwbcgmu/

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Jun 21, 2016 11:48 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4420
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jun 21, 2016 11:53 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Jun 21, 2016 12:24 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4420
Location: United Kingdom
Right then, yes that works.
But I have a new issue now. At the moment, when they "tick" the box, it runs this:

Syntax: [ Download ] [ Hide ]
onClick=\"agreesubmit(this)\"

Which runs this:

Syntax: [ Download ] [ Hide ]
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.


Top
 Profile  
 
PostPosted: Tue Jun 21, 2016 12:34 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4420
Location: United Kingdom
<script type="text/javascript" src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 7 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group