Show 'next' button after slider has been moved | XM Community
Skip to main content

Hi all,

I have the following code, which hide the ‘next’ button until an answer has been selected:

this.hideNextButton();

this.questionclick = function(event,element)
{
if (element.type == 'radio')
{
this.showNextButton();
}
}

In other questions, I use a slider.

Is it possible to hide the ‘next’ button until the slider has been moved?

Thanks for any help :)

If you have a slider with a single statement, adding the below the OnReady section of the question’s JavaScript will make it so that the next button is hidden until the slider track is interacted with:

var that = this;
var q = jQuery("#"+this.questionId);
var clicked = "no";

this.hideNextButton();

q.find(".track").on("mousedown , touchstart", function() {
clicked = "yes"
});

q.find(".QuestionBody").on("mouseup , touchend", function() {
if(clicked == "yes"){
that.showNextButton();
}
});

 


Thanks, @Tom_1842 ! 

I’ve just noticed one potential issue, which is that the mouse button seems to need to be depressed while still hovering over the slider. That’s fine if someone clicks the value that they want but it could cause issues if someone wants to select extreme values. In that case, they’ll likely pull the cursor past the slider before depressing the button.

Do you know if that code could be changed to allow for this?

Regardless, thanks again! :)


I see what you mean. Try the below:

var that = this;
var q = jQuery("#"+this.questionId);
var clicked = "no";

this.hideNextButton();

q.find(".track").on("mousedown , touchstart", function() {
clicked = "yes"
});

jQuery("#Wrapper").on("mouseup , touchend", function() {
if(clicked == "yes"){
that.showNextButton();
}
});

 


Beautiful! This has saved me from solving several other problems caused by my workaround.

Thanks so much, @Tom_1842 


Leave a Reply