Welcome, Guest
Username: Password: Remember me

TOPIC: Custom check boxes and radio buttons

Re:Custom check boxes and radio buttons 3 years 8 months ago #54457

  • holch
  • holch's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2622
  • Thank you received: 307
  • Karma: 113
Hi Shnoulle,

Thanks for the hint. I did not comment jquery-ui.js, at least not intentionally. But it is possible that I messed it up somehow, because I was working in the LS Template Editor, and not in my normal editor.

I will have a look at this.
Have a look at the manual! It is a really valuable source for information. Here some helpful links:
Manual (EN) | Question Types | Question Attributes | Workarounds

If you found this answer helpful and it saved you some time please consider a donation to the project to keep Limesurvey going!
The administrator has disabled public write access.

Re:Custom check boxes and radio buttons 3 years 8 months ago #54473

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4130
  • Thank you received: 763
  • Karma: 347
Okay, it seems that there is a jQuery conflict and the plugin won't work with the shipped version of jQuery so we need a trick.

1) Go to pixelmatrixdesign.com/uniform/ , download the plugin and install the following files/folders in your template directory:
- jquery.uniform.min.js (file)
- /images (folder)
- /css (folder)

2) Go to jquery.com/ , download the latest version and install it in your template directory

3) Add the following to the beginning of your startpage.pstpl. The code will:
- link to the plugin css file
- replace the link to the shipped jQuery file with a link the new version you just installed
- link to the plugin JS file.
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}/css/uniform.default.css" />
<script type="text/javascript">
    $(document).ready(function() {
        $('script[src*="/jquery/jquery.js"]').attr('src', '{TEMPLATEURL}jquery-1.4.4.min.js');
    });
</script>
<script type="text/javascript" src="{TEMPLATEURL}jquery.uniform.min.js"></script>

Add the following to the end of template.js. It will apply the plugin script to all radio, checkbox, dropdown and browser upload elements in the survey:
$(document).ready(function() {
	$('select, input:checkbox, input:radio, input:file').uniform();
});

I've tested back to IE7 and, although IE7 is a little slow to apply the plugin, voila!

Untitled_1-20101221.gif
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 3 years 8 months ago by DenisChenu. Reason: Add a space betwwen link an , ;)
The administrator has disabled public write access.

Re:Custom check boxes and radio buttons 3 years 8 months ago #54475

  • holch
  • holch's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2622
  • Thank you received: 307
  • Karma: 113
Hi Toni!

Looks good. I will give it a try tonight and give feedback.

If all works well and I know how to do it, I will create a alternative how to in the workaround sections.

Wouldn't be the implementation of this into core be a good task for that Google project, or is this already over?
Have a look at the manual! It is a really valuable source for information. Here some helpful links:
Manual (EN) | Question Types | Question Attributes | Workarounds

If you found this answer helpful and it saved you some time please consider a donation to the project to keep Limesurvey going!
The administrator has disabled public write access.

Re:Custom check boxes and radio buttons 3 years 7 months ago #55194

  • ftrifoglio
  • ftrifoglio's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 20
  • Karma: 1
I came across this thread and I found it helpful, but I get some issues.

I downloaded the jquery.uniform.zip and I uploaded the files/folder into ../upload/templates/my_template directory.

I downloaded the jquery-1.4.4.min* and I uploaded it into the same directory above.

Then I add the codes to startpage.pstpl and template.js.

But what does it mean "replace the link to the shipped jQuery file with a link the new version you just installed"?

Maybe the code to add to the startpage.pstpl should look like this
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}/css/uniform.default.css" />
<script type="text/javascript">
    $(document).ready(function() {
        $('script[src*=""]').attr('src', '{TEMPLATEURL}jquery-1.4.4.min*');
    });
</script>
<script type="text/javascript" src="{TEMPLATEURL}jquery.uniform.min.js"></script>

*I dropped the .js otherwise it didn't show it.

If it so, it doesn't work.
Last Edit: 3 years 7 months ago by ftrifoglio.
The administrator has disabled public write access.

Re:Custom check boxes and radio buttons 3 years 7 months ago #55195

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5324
  • Thank you received: 294
  • Karma: 248
ftrifoglio wrote:
But what does it mean "replace the link to the shipped jQuery file with a link the new version you just installed"?
At the beginning of the template the jQuery core file is included (in startpage.pstpl I guess). You have to change that link to the new version of that file.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re:Custom check boxes and radio buttons 3 years 7 months ago #55203

  • ftrifoglio
  • ftrifoglio's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 20
  • Karma: 1
my startpage.pstpl includes just the template.css and the template.js

I tried to add the following line then but nothing yet.
<script type="text/javascript" src="{TEMPLATEURL}jquery-1.4.4.min"></script>

Then I noticed that if I do all that stuff the progress bar disappear.
Last Edit: 3 years 7 months ago by ftrifoglio.
The administrator has disabled public write access.

Re:Custom check boxes and radio buttons 3 years 7 months ago #55219

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4130
  • Thank you received: 763
  • Karma: 347
Hmm...seems that the code got mangled in my original post. The code to be added to the beginning of startpage.pstpl should be:

File Attachment:

File Name: new_2_2011-01-18.txt
File Size: 0 KB



This code, among other things, will change the source of the original link to jQuery to the new file you have included in your template. This means that only the new jQuery is loaded so there is no conflict.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 3 years 7 months ago by tpartner.
The administrator has disabled public write access.

Re:Custom check boxes and radio buttons 3 years 7 months ago #55221

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4130
  • Thank you received: 763
  • Karma: 347
Okay, this forum software is pissing me off! It won't let me insert the code. Line 5 in the above should be as in the attached.

File Attachment:

File Name: new_2.txt
File Size: 0 KB
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 3 years 7 months ago by tpartner.
The administrator has disabled public write access.

Re:Custom check boxes and radio buttons 3 years 7 months ago #55231

  • ftrifoglio
  • ftrifoglio's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 20
  • Karma: 1
ok it makes sense now, but still don't work for me.

it looks like that on chrome8 (but also in ie9). In firefox3 it's like nothing changed.

01.jpg


02.jpg


the progress bar disappears and just the first radio button looks as it should be but it's not selectable.
The administrator has disabled public write access.

Re:Custom check boxes and radio buttons 3 years 7 months ago #55264

  • ftrifoglio
  • ftrifoglio's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 20
  • Karma: 1
I followed what did holch in this survey www.ivp-surveys.com/sc/091SL/index.php?sid=29851&lang=en

I added the following code to the startpage.pstpl

File Attachment:

File Name: 2.txt
File Size: 1 KB


Everything is ok but the progress bar disappears and the radio button are not markable. Actually they are but you have to click on the label. In the array the radio buttons work fine.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.346 seconds
Donation Image