How to avoid dom flickering? | XM Community
Skip to main content

Hi!
I randomized the next button position in order to placed it horizontally in three positions (left, center, right). During the question transition the button flashes in the original location before appearing in the corresponding one (e.g. flashes in the left, and then appear in the right side where it should be). Since my code is in AddOnReady, I tried to change in AddOnLoad but still doing the same.
Thank you in advance for your help!

Try hiding your button div onload and once the position is set, show the button div

Hi rondev !
I don't really command JS or HTML. I tried adding this to each question but it's not working:
Qualtrics.SurveyEngine.addOnload(function() {

    $('NextButton').hide();
});


Qualtrics.SurveyEngine.addOnReady(function()
{
// First: find the button object itself
var Button = document.getElementById("NextButton");


//In order to change it's horizontal position, we first need to find the "box" holding the button.
var ButtonContainer = Button.parentNode;

ButtonContainer.style.textAlign = Qualtrics.SurveyEngine.getEmbeddedData("Alignment");
 
$('NextButton').show();
});

Try adding below in CSS:
#NextButton{display:none}

rondev I added it at the beginning and after the current code I have in CSS (Look & Feel) plus the code I posted before in individual questions...but still not working.
CSS (Look & Feel)

Qualtrics.SurveyEngine.setEmbeddedData("Alignment",alignment);
#NextButton{display:none}

Leave a Reply


Terms & Conditions