radio/checkbox images workaround

More
5 years 2 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 or Create an account to join the conversation.

More
5 years 2 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 or Create an account to join the conversation.

More
5 years 2 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 or Create an account to join the conversation.

More
5 years 2 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 or Create an account to join the conversation.

More
4 years 4 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 or Create an account to join the conversation.

More
4 years 4 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 or Create an account to join the conversation.

More
4 years 4 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 or Create an account to join the conversation.

More
4 years 4 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 or Create an account to join the conversation.

More
4 years 3 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 or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!