radio/checkbox images workaround

More
4 years 7 months ago #92417 by adishardis
adishardis created the topic: radio/checkbox images workaround
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

Please Log in to join the conversation.

More
4 years 7 months ago #92446 by DenisChenu
DenisChenu replied the topic: radio/checkbox images workaround
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

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 7 months ago #92458 by adishardis
adishardis replied the topic: radio/checkbox images workaround
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

Please Log in to join the conversation.

More
4 years 7 months ago #92486 by DenisChenu
DenisChenu replied the topic: radio/checkbox images workaround
You don't include imagetick.js

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

Think it can be after TEMPLATEJS

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
The following user(s) said Thank You: adishardis

Please Log in to join the conversation.

More
3 years 9 months ago #102793 by dweisser
dweisser replied the topic: radio/checkbox images workaround
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>?

Please Log in to join the conversation.

More
3 years 9 months ago #102794 by tpartner
tpartner replied the topic: radio/checkbox images workaround
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.

Please Log in to join the conversation.

More
3 years 9 months ago #102797 by dweisser
dweisser replied the topic: radio/checkbox images workaround
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.

Please Log in to join the conversation.

More
3 years 9 months ago #102803 by tpartner
tpartner replied the topic: radio/checkbox images workaround
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.

Please Log in to join the conversation.

More
3 years 8 months ago #102836 by dweisser
dweisser replied the topic: radio/checkbox images workaround
I basically want the label text vertically aligned:middle (rather than bottom) next to the radio button. I'll live...I'm whining. :)

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now