- Posts: 64
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Different Smileys with imageTick2
- Andrea01
- Topic Author
- Offline
- Senior Member
Less
More
8 years 6 months ago #126444
by Andrea01
Different Smileys with imageTick2 was created by Andrea01
Dear all!
I want to use imageTick with 4 different images (= 4 smileys). In the beginning, you see the 4 different “no_tick_images”, which is perfect. (= Sceenshot_1)
When you click one of the smileys, it changes to the defined “tick_image”, which is perfect.
My problem: The other three smileys change to “no_tick_image” of the clicked one. (= Sceenshot_2)
Is there a possibility that the other three remain and do not change?
Thank you in advance for your help!
Andrea
Here is the code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var templatePath = $('head link[href*="template.css"]').attr('href').replace(/template.css/, '');
// Apply images to radios
$("input#answer326531X147X2054A1").imageTick({
// Image to use as a selected state of the radio
tick_image_path: templatePath+"1green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"1yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});
$("input#answer326531X147X2054A2").imageTick({
// Image to use as a selected state of the radio
tick_image_path: templatePath+"2green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"2yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});
$("input#answer326531X147X2054A3").imageTick({
// Image to use as a selected state of the radio
tick_image_path: templatePath+"3green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"3yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});
$("input#answer326531X147X2054A4").imageTick({
// Image to use as a selected state of the radio
tick_image_path: templatePath+"4green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"4yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});
});
</script>
I want to use imageTick with 4 different images (= 4 smileys). In the beginning, you see the 4 different “no_tick_images”, which is perfect. (= Sceenshot_1)
When you click one of the smileys, it changes to the defined “tick_image”, which is perfect.
My problem: The other three smileys change to “no_tick_image” of the clicked one. (= Sceenshot_2)
Is there a possibility that the other three remain and do not change?
Thank you in advance for your help!
Andrea
Here is the code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var templatePath = $('head link[href*="template.css"]').attr('href').replace(/template.css/, '');
// Apply images to radios
$("input#answer326531X147X2054A1").imageTick({
// Image to use as a selected state of the radio
tick_image_path: templatePath+"1green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"1yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});
$("input#answer326531X147X2054A2").imageTick({
// Image to use as a selected state of the radio
tick_image_path: templatePath+"2green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"2yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});
$("input#answer326531X147X2054A3").imageTick({
// Image to use as a selected state of the radio
tick_image_path: templatePath+"3green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"3yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});
$("input#answer326531X147X2054A4").imageTick({
// Image to use as a selected state of the radio
tick_image_path: templatePath+"4green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"4yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});
});
</script>
Attachments:
The topic has been locked.
- first
- Offline
- Elite Member
Less
More
- Posts: 227
- Thank you received: 36
8 years 6 months ago #126445
by first
Survey Designer and Programmer
Replied by first on topic Different Smileys with imageTick2
I guess you will need this setup at one or two questions in survey.
I suggest to use images as labels of the answer options . Hide default checkboxes(Overlay images) . This way you can avoid default functions that changes checked/unchecked images for input button interfere with your code..
Hope it will help.
I suggest to use images as labels of the answer options . Hide default checkboxes(Overlay images) . This way you can avoid default functions that changes checked/unchecked images for input button interfere with your code..
Hope it will help.
Survey Designer and Programmer
The topic has been locked.
- first
- Offline
- Elite Member
Less
More
- Posts: 227
- Thank you received: 36
8 years 6 months ago - 8 years 6 months ago #126446
by first
Survey Designer and Programmer
Replied by first on topic Different Smileys with imageTick2
Here is very similar demo at LS demo side.This link will remain active for today only . I have also attached lss. Please change URL of */slider-rating.css as per your installation after importing lss.
demo.limesurvey.org/index.php?r=survey/index&sid=332992&lang=en
demo.limesurvey.org/index.php?r=survey/index&sid=332992&lang=en
Survey Designer and Programmer
Attachments:
Last edit: 8 years 6 months ago by first. Reason: typo
The following user(s) said Thank You: Andrea01
The topic has been locked.
- Andrea01
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 64
- Thank you received: 0
8 years 6 months ago #126512
by Andrea01
Replied by Andrea01 on topic Different Smileys with imageTick2
Hello OMdev!
Thanks for Your help, works perfectly for me!
Thanks for Your help, works perfectly for me!
The topic has been locked.