Welcome, Guest
Username: Password: Remember me

TOPIC: radio/checkbox images workaround

radio/checkbox images workaround 1 year 2 months ago #92417

  • adishardis
  • adishardis's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 58
  • Karma: 0
Hi,

I'm trying to apply this workaround to have images instead of the usual checkboxes/radio design. link

according to that I should replace "yourTemplateName" with your template directory name but I'm not sure exactly what line i'm supposed to edit?!
$(document).ready(function(){
	var templatePath = $('head link[href*="template.css"]').attr('href').replace(/template.css/, '');  
	// Apply images to radios 
	$('input[type="radio"]').imageTick({ 
		// Image to use as a selected state of the radio
		tick_image_path: templatePath+"radio.gif", 
		// Image to use as a non-selected state 
		no_tick_image_path: templatePath+"no_radio.gif", 
		// Class to apply to all radio images that are dynamically created 
		image_tick_class: "radios"
	}); 
 
	// Apply images to checkboxes 
	$('input[type="checkbox"]').imageTick({ 
		// Image to use as a selected state of the checkbox  
		tick_image_path: templatePath+"check.gif",  
		// Image to use as a non-selected state 
		no_tick_image_path: templatePath+"no_check.gif", 
		// Class to apply to all checkbox images that are dynamically created 
		image_tick_class: "checkboxes" 
	}); 
});

Peace
/Adam
The administrator has disabled public write access.

Re: radio/checkbox images workaround 1 year 2 months ago #92446

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 5875
  • Thank you received: 722
  • Karma: 223
Hello,

Think it's best to use a div for templatePath.

In the endpage.pstpl:
<div id="templatepath" style="display:none">{TEMPLATEURL}</div>
And replace
var templatePath = $('head link[href*="template.css"]').attr('href').replace(/template.css/, '');
by
var templatePath=$("#templatepath").html();

Denis
The administrator has disabled public write access.

Re: radio/checkbox images workaround 1 year 2 months ago #92458

  • adishardis
  • adishardis's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 58
  • Karma: 0
Ok, now my source shows following error:

Uncaught TypeError: Object [object Object] has no method 'imageTick'

in template.js:48

Does that mean anything to you?

Here's a link to a test survey if you can see anything from that: survey.sevenday.se/survey/index.php/923757/lang-sv

Thanks
/Adam
The administrator has disabled public write access.

Re: radio/checkbox images workaround 1 year 2 months ago #92486

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 5875
  • Thank you received: 722
  • Karma: 223
You don't include imagetick.js

<script type="text/javascript" src="{TEMPLATEURL}imagetick_lime.js"></script>

Think it can be after TEMPLATEJS
The administrator has disabled public write access.
The following user(s) said Thank You: adishardis

Re: radio/checkbox images workaround 4 months 2 days ago #102793

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Silver Donor
  • Posts: 182
  • Thank you received: 5
  • Karma: 5
By the way - this works perfectly. You absolutely rock.

One question, if I want to vertically align the answer text...

<li id="javatbd1295X1X1A1" class="answer-item radio-item">
<img src="/survey/upload/templates/Clear_logo_Clone/no_radio.gif" alt="no_tick" class="radios" id="tick_img_answer1295X1X1A3">
<input type="radio" class="radio" name="answer1295X1X1" value="A3" id="answer1295X1X1A3" style="position: absolute; left: -99999px;">
<label class="answertext" for="radio3">The answer Text</label>
</li>

Any thoughts? Would I have to append styles to the <li>?
The administrator has disabled public write access.

Re: radio/checkbox images workaround 4 months 2 days ago #102794

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 3844
  • Thank you received: 690
  • Karma: 330
Can you provide a screenshot/mockup and activate a test survey?
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.
The administrator has disabled public write access.

Re: radio/checkbox images workaround 4 months 2 days ago #102797

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Silver Donor
  • Posts: 182
  • Thank you received: 5
  • Karma: 5
Here you go...
www.springboltconsulting.com/survey/inde...x/sid/171641/lang/en

It's the second set of questions. Really not a big deal...but I would like to vertically align the labe with the image tick.
The administrator has disabled public write access.

Re: radio/checkbox images workaround 4 months 2 days ago #102803

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 3844
  • Thank you received: 690
  • Karma: 330
I'm still not sure what you want. Can you provide a screenshot/mockup?
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.
The administrator has disabled public write access.

Re: radio/checkbox images workaround 4 months 1 day ago #102836

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Silver Donor
  • Posts: 182
  • Thank you received: 5
  • Karma: 5
I basically want the label text vertically aligned:middle (rather than bottom) next to the radio button. I'll live...I'm whining. :)
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.176 seconds
Donation Image