Welcome, Guest
Username: Password:
  • Page:
  • 1
  • 2

TOPIC: Adding animation when changing question divs from display:none to display:block?

Adding animation when changing question divs from display:none to display:block? 3 years 8 months ago #86095

  • sydeburn
  • sydeburn's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi all, I've just started using LimeSurvey and I'm amazed at all it can do.

I've been doing some customizing on the visual side of things and there's one point I'm stuck at.

Several of the questions in my survey are conditionalized so they only appear if the question before them is answered in a certain way. From the code I can see that this is done by changing the css property display:none to display:block. I'd like to change this so they use the jquery slideDown/slideUp animations, something like:

function showDiv(divId) {
$("#" + divId).slideDown(250);
}
function hideDiv(divId) {
$("#" + divId).slideUp(250);
}

I assume this is done with the "checkconditionals" onclick function, but I can't figure out how to change it. Can someone point me in the right direction, or am I creating more work than what it's worth?
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86258

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5900
  • Thank you received: 1292
  • Karma: 522
The JavaScript that dynamically shows or hides questions is generated by the core file classes/expressions/LimeExpressionManager.php. Search for "show()" in that file.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86260

  • sydeburn
  • sydeburn's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Thanks for the response. I don't have a classes folder, and a search for LimeExpressionManager.php came up empty. I'm using v2.00+. Where else should I look?
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86377

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5900
  • Thank you received: 1292
  • Karma: 522
application/helpers/expressions/em_manager_helper.php
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86413

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8927
  • Thank you received: 1249
  • Karma: 371
Maybe it can be great if EM use a:
.lsHide() / lsShow fnction to be easyly replaced by own scripting.

And put an handler at end of this function too :).

For 2.1 i think.

Denis
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86483

  • sydeburn
  • sydeburn's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Thanks for your help! I got this to work.

I agree a custom function would be a nice addition for future versions.

For my own reference (esp. after upgrades), and anyone else interested, I got this to do what I wanted by doing the following:

In
application/helpers/expressions/em_manager_helper.php

changed line 6488:
$relParts[] = " $('#question" . $arg . "').show();\n";
to
$relParts[] = " $('#question" . $arg . "').slideDown();\n";

changed line 6521:
$relParts[] = " $('#question" . $arg . "').hide();\n";
to
$relParts[] = " $('#question" . $arg . "').slideUp();\n";
Last Edit: 3 years 7 months ago by sydeburn.
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86546

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8927
  • Thank you received: 1249
  • Karma: 371
sydeburn wrote:
I agree a custom function would be a nice addition for future versions.
Please,

Make a Feature request :) : ideas.limesurvey.org/

Denis
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86551

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5964
  • Thank you received: 364
  • Karma: 259
It would be nice to have a survey setting to have conditional questions either pop-up directly or slide in. Shouldn't be too hard to implement, maybe a good idea for Google Code-in!?

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86582

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8927
  • Thank you received: 1249
  • Karma: 371
Mazi wrote:
It would be nice to have a survey setting to have conditional questions either pop-up directly or slide in.
No, best is to have a jquery extension like lsHide, lsShow, the user ca do what thez want in lsHide/lsShow.
For exaple you can change the opacity, pur a visibility:hidden etc ... (in template.js).


If you put an option, it's hard to add an different option. And the option we choose are not good for whole peaople.

Shouldn't be too hard to implement, maybe a good idea for Google Code-in!?
Less than 30 minute of work ...

Denis
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86601

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8927
  • Thank you received: 1249
  • Karma: 371
Hello,

You don't have to change LS core to do this. You can do it in your template.

Add this at your template.js file:
(function($){
	$.fn.hide = function(){
	    $(this).slideUp('slow');
	    $(this).css('display','none');
	};
	$.fn.show = function(){
	    $(this).slideDown('slow', function() {
	    if($(this).is('tbody')){
	        $(this).css('display','table-row-group');
	   }else{
	        $(this).css('display','block');
	   }
    });
 
	};
})(jQuery)

See demo here : demonstration.sondages.pro/54895/lang-en

Denis
PS: See to update doc after.
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 3 years 7 months ago #86619

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5900
  • Thank you received: 1292
  • Karma: 522
Yup, good thinking Denis ;)

The more flexibility, the better.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 2 months 1 day ago #133600

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5964
  • Thank you received: 364
  • Karma: 259
Denis, I was just checking this nice solution at the link you provided (demonstration.sondages.pro/54895/lang-en) but it doesn't seem to work anymore. I can't find the mentioned adjustment at the template.js file at demonstration.sondages.pro/upload/templa...flatblue/template.js.

Did this get overwritten accidentally?

Can you post an updated link?

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 1 month 4 weeks ago #133700

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8927
  • Thank you received: 1249
  • Karma: 371
Mazi wrote:
Denis, I was just checking this nice solution at the link you provided (demonstration.sondages.pro/54895/lang-en) but it doesn't seem to work anymore. I can't find the mentioned adjustment at the template.js file at demonstration.sondages.pro/upload/templa...flatblue/template.js.

Did this get overwritten accidentally?

Can you post an updated link?
Arg .....

Upadte , update, and update again .... i don't fix the template used for this worklaround.

I do a plugin when i found time ....
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 1 month 4 weeks ago #133716

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5964
  • Thank you received: 364
  • Karma: 259
I'd love to see a working example based on the LS 2.5 shipped templates... :-(

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Adding animation when changing question divs from display:none to display:block? 1 month 3 weeks ago #133960

  • OMdev
  • OMdev's Avatar
  • Offline
  • Platinum Lime
  • Posts: 324
  • Thank you received: 34
  • Karma: 15
I tried some animation while displaying the question.
<script>
$(function(){
var $nodiv = $('div[style="display: none;"]');
$('body').on('click',function(){
var $nodivQwrap = $('table.question-wrapper', $nodiv).hide();	
	setTimeout(function(){
		$nodiv.each(function(){
			if($(this).css('display') != 'none'){
				$(this).find('table.question-wrapper').show("slow")
			}
		});
	},50);
});
});
</script>


File Attachment:

File Name: limesurvey...1449.lss
File Size:14 KB



Version 2.06+ Build 150612
Template: Defalut
Survey Designer and Programmer
"I always suggest to have a group by group display layout and create a seprate group for each question. This will be extra work but you will get flexiblity to create your question by using more than more lime survey question types."
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.282 seconds