Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: radio/checkbox images workaround

radio/checkbox images workaround 1 Jahr 6 Monate her #92417

  • adishardis
  • adishardiss Avatar
  • OFFLINE
  • Senior Lime
  • Beiträge: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: radio/checkbox images workaround 1 Jahr 6 Monate her #92446

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6276
  • Dank erhalten: 801
  • Karma: 240
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: radio/checkbox images workaround 1 Jahr 6 Monate her #92458

  • adishardis
  • adishardiss Avatar
  • OFFLINE
  • Senior Lime
  • Beiträge: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: radio/checkbox images workaround 1 Jahr 6 Monate her #92486

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6276
  • Dank erhalten: 801
  • Karma: 240
You don't include imagetick.js

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

Think it can be after TEMPLATEJS
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: adishardis

Re: radio/checkbox images workaround 8 Monate 1 Woche her #102793

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 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>?
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: radio/checkbox images workaround 8 Monate 1 Woche her #102794

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4133
  • Dank erhalten: 763
  • Karma: 347
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: radio/checkbox images workaround 8 Monate 1 Woche her #102797

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: radio/checkbox images workaround 8 Monate 1 Woche her #102803

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4133
  • Dank erhalten: 763
  • Karma: 347
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: radio/checkbox images workaround 8 Monate 6 Tage her #102836

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 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. :)
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.205 Sekunden
Donation Image