15 comments found.
Good luck with your sales
Hi awgeorge,
You write, “for perfect results use jQuery 1.8+”.
Can it be compatible with jquery 1.4.4.
Regards
Claude
Hello Claude,
This script makes use of the .on function that is in the later version of jQuery. That said, it should be very simple to use the now deprecated .live method.
I will check this for you in the morning. Keep an eye out for the results.
W
Thank’s, i will
Claude
Hey,
Just to let you know that I have got the script working on jQuery 1.4.4 
I used the .delegate method instead of .on, also $.isNumeric needed defining.
If your still interested, I can send you the updated code after you’ve purchased.
W
Thank you very much sir, i will send you an email to receive your updated code.
Sincerly Claude
Hi there,
Very nice bit of code – I have one question for you. Is there anyway at all to make it so that once someone has clicked the button in one direction, it remembers. For example – If I wanted to install this on a member site and then have it so that it remembers that the user has clicked it and it remains the same every time the user logs in until he changes it again.
Is that possible?
Many thanks, Dan.
Certainly. Because the plugin sits on top of a standard checkbox, you can load the page with checked=”CHECKED” on the input field.
Because its an input, you can save the value in a database like you would on a normal form.
Hope this points you in the right direction
W
Thanks Very Useful tool to make PhoneGap and HTML5 apps with!
Hey George,
I am trying to make different-sized switches for mobile and desktop… but I can’t figure out how to change the size of the switch via CSS only – is this possible? (You seem to indicate this is styleable via font-sizing?)
I changed the size of the MobileCheckboxContainer but then my Handle is not in the correct position.
Appreciate your help!
Good Morning,
Presently there is no redraw function on the checkboxes which means when you shrink the window and the CSS changes, the checkboxes will not change size. If this is a requirement I will take a look and check whether it is feasible.
Sizing of the checkboxes can be done with the font-size as the JS builds itself around the font-size you give it. If you need any help you can email me (through the button on the profile screen) and i can assist you further.
W
How can I programmatically set status of checkbox? I tried following with no lucky. $(”#Checkbox2”).prop(‘checked’, ‘checked’); or $(”#Checkbox2”).prop(‘checked’, true);
Could you please give sample code? Thanks,
Hello,
You can change the status of the checkbox by using the API provided.
$(“input[type=’checkbox’]”).mobileCheckbox(“checked”, true);
You can also disable the checkbox this way:
$(“input[type=’checkbox’]”).mobileCheckbox(“disabled”, true);
Or Toggle:
$(“input[type=’checkbox’]”).mobileCheckbox(“toggle”);
I have been working with the “mobileCheckbox.js” and everything is running ok. Even though i need to integrated it with an html file in order to leave it running with some other .js files.
To be clear i need to know how to get values from mobileCheckbox, I mean is that possible to use something like the following sentences:
$(“input[type=checkbox]”).text; $(“input[type=checkbox]”).value;
I need to know the value of the checkbox from javascript.
Best regards,
Have you tried the jQuery function .val()? If you wish to see if the checkbox is checked try .is(’:checked’)
William, this is an entirely different question so I’m creating a separate post.
o I would like the checkbox to say BEGINNER and ADVANCED.
o These words are longer than ON and OFF so I’m wondering whether your checkbox automatically adjusts it’s length based on length of the text?
o If not, then can I tweak the code to adjust the checkbox length?
o Can I control the color of BOTH sides of the checkbox? And color of the text?
Thank you! Mark B
Mark, The checkboxes do automatically grow depending on the text size. I may wish to use CSS to reduce the font size as well to make sure they are not overly big.
Within the JS code there is only a property to change the (on) background color. However, you can completely override the look and feel of the checkboxes with CSS so you can change the color of both sides and text.
Thank you. Just now purchased. Very simple to install and implement. Love it!
Author wrote: This is uses the jQuery callback function tied into the animation, on complete it will trigger correctly for you. I will submit the updated code to be available for all.
Author wrote: I have been thinking this one through and does seem a little silly having two callbacks, a complete and change. If you pm me i can give you the code i will upload to CC later. It just delays the call to change until the animation is complete. Cheers W
Hi,
1) Does the new version include the above mentioned changes? (the one that delays the call to change until the animation is complete)
2) What code do I use to go to a new webpage? (after click or animation complete)
3) I plan to use more than one ios checkbox on my webpage. Can each one trigger a separate event? (after click or animation complete)
Hello,
1) The current version online has the method you are asking for.
2) In the completion function you can use a window.location.replace or window.location.href
3) Yes each checkbox can have a different completion method. Let me take some time to create some sample code for you.
W
Thank you! Examples would be great : – )
What would be better than changing pages, would be to show/hide the contents within my DIV tags, based on the checkbox selection being “Beginner” or “Advanced”. The content might be like this….
<div id="Beginner"> some newbie content here! </div>
<div id="Advanced"> some Advanced content here! </div>
If you could include a working example of this type of show/hide in the sample code you provide me, I would be forever grateful!
I have sent you a demo file that should help you out. Thank you for purchasing XD
Thank you. Best support ever!
Author has fixed the above issue, in just a few hours. Very professional follow through.
This javascript looks great and I will be purchasing : – )
The round and square slide switches display incorrectly in Opera and Safari. See screenshots…
A great resource you may want to check out is browsershots.org where you can see how your webpages or images display in all versions of all browsers, on all platforms and OS systems.
Hi, did you release the new version?
Yes, new version is up online
Thank you George. Does the new version include a fix for incorrectly displayed images in Opera and Safari? (see my next post)
Which version of Safari are you running? Are you on a Mac? Unfortunately i couldn’t find a way in Opera to stop this from happening. I did however manage to get Safari and all the mainstream browsers work correctly by using a CSS fix. So it is strange that you are finding problems with Safari.
The screenshots below are from your demo on CodeCanyon. Safari 5.19 on Mac. Does your CodeCanyon demo include the CSS fix for Safari?
Very Interesting, as of Safari 6 it has been fixed. I will try and get a fix for v5. When Opera makes the switch to Webkit this issue should be resolved on that browser too. Unfortunately this is a weird bug found in older browsers causing the background to leak out of border-radius.
Hi George, Safari 5.1.9 is not an older browser version. It came out a month and a half ago. ( http://support.apple.com/kb/dl1569 )
(Safari 6 is only for somewhat newer Macs which include the Mountain Lion OS)
Just to let you know, I had a thought that after experimenting with Opera, it seems to have worked. I have applied border-radius to all the affected elements which clears up the browsers clipping bug.
If your still interested. I can send you the updated code (after purchase) or you can wait until the patch gets approved by CC.
Thank You for helping me improve the codebase.
William George
Awesome. Does that clipping bug fix also work in Safari?
I don’t see why it wouldn’t, if you would like to be 100% certain i can quickly edit the demo.
That would be great, thanks!
See if that has resolved the issue. You may need to clear the Cache.
That fixed the issue. Thanks for updating your demo.
When will you be issuing a new release, that includes that fix?
Good morning, I will be submitting the new version to the store this morning. I will let you know when it has been approved.
Good evening. Shouldn’t be too long now, hope your project hasn’t been held up. If you are wishing to speed things up send me a PM.
William,
I’m working on a project that won’t be launched for 3 months, so I’m in no hurry. I appreciate the offer to speed things up if I was in a pinch. Take your time and I’m happy to purchase anytime. Mark
Hello. New version is online
I was hoping to trigger javascript functions when the buttons change state. I tried using the code below. It works the first two times the switch is moved (on, then off), but after that the behavior is a bit erratic, returning the wrong on/off state or in most cases with one click the page alerts both on and off messages before the switch is done moving. Any thoughts?
$(“input[type=checkbox]”).mobileCheckbox() $(“inputtype=’checkbox’).on(‘change’, function(e) { if($(this).is(“)) { alert(“ON”);} else { alert(“OFF”);} });
Hello,
Thank you for purchasing the script. The change events are currently fired when the hidden checkbox has changed its value. In the case of dragging, this is after the user has performed the mouse up action. However in regards to clicking the checkbox, as rightly pointed out the on change event is currently fired at the time of the user click. So this code:
$("input[type=checkbox]").on("change", function(e){
var self = $(this);
if(self.is(':checked')){
alert("ON");
} else {
alert("OFF");
}
});Would be fired if dragged on mouse up, or on click. For your scenario we need to implement an on animation complete. Does that sound similar to what you are trying to accomplish?
W
You got it. Basically I just need to do something whenever the user turns the switch on or off, whether they slide it or click it.
Awesome: To get your project on the way in jquery.mobileCheckbox.js line 137 change to:
//Set Handle Pos
$CheckboxHandle.animate({
left:endPos
}, options.animation.duration, options.animation.easing, function(){
$(element).trigger("complete");
});This is uses the jQuery callback function tied into the animation, on complete it will trigger correctly for you.
I will submit the updated code to be available for all.
I have been thinking this one through and does seem a little silly having two callbacks, a complete and change. If you pm me i can give you the code i will upload to CC later. It just delays the call to change until the animation is complete.
Cheers W
By the way I updated line 137 as you mentioned, and it didn’t fix the issue. I’ll wait for you to send the updated code, and I’ll give it another shot.
dont work on android 4
I will check it out. Thanks for letting me know.
Tested it out on an Android 4 device, seemed to work as normal, what did you discover that was broken. It is perhaps a little sluggish on a phone with less than 300Mb of ram. But great on a nexus.
Can you confirm if you were using the native browser? Or a thirdparty.
samsung galaxy s2, android 4.0.4, native browser
I think we have one of those at work, I will check tomorrow when I have it in my hands. Do the checkbox show up and not slide? Or nothing at all?
checkbox show up but not correct and switching dont work
If possible, it would be amazing if you could send me a screenshot? Thank you for pointing this out will.george@me.com
Hello, we have a problem on Android and IOS browsers. The button show up normally and it visually changes on and off when slide or click. The only problem is that they dont work in the mobile browsers. So the buttons works visually but nothing happens. On the normal pc they work perfect in chrome and firefox etc. What can be the problem why it does not work on the mobile browsers Android and IOS?
How we call a function on click? the button has to work on all browsers of course also the mobile browsers.
Thanks so much in advance for your urgent reply!
This does seem a little odd. If the checkboxes are displaying then it means that there is no errors. It could be something to do with the touch events. Does your application override any of these events which would stop the event bubbling down to the checkbox?
If you have the latest version 1.2 then you can add to the onChange event of the checkbox. This calls when the checkbox has been checked/unchecked.
If you PM me your site: http://codecanyon.net/user/awgeorge (bottom right) I can take a look and debug with you.
William
