Eliminating graphics flashing | XM Community
Skip to main content
Solved

Eliminating graphics flashing


I have built a question (inside of a loop/merge) that includes 5 buttons. The buttons either become invisible in a static condition or display different graphics in an interactive condition. Sometimes the accompanying graphic is slow to load and flashes. I found a solution to this problem on the community from Feb 23: You can eliminate the flash by putting your question text in a <div> with a lot a top padding, then change the top padding to zero at the end of your JavaScript. That way when the images initially flash they are off the screen: <div id="myqt" style="padding-top:3000px">Question text goes here</div> At end of JavaScript: jQuery("#myqt").css("padding-top","0px"); I have tried this solution in my code. When I put the js statement into the code at the bottom of the addOnLoad function, nothing appears to happen. I have tried to put the statement as the first statement in the addOnLoad, and this works but only some of the time. I am attaching my code - I have incorporated the div as directed above into my .html. I hope that someone will have an idea of where to put the padding-top to 0 px statement. Also, the code in addOnReady is to update backend embedded vars. Thanks in advance for any advice.

Best answer by TomG

I think that original post was from me. So, in order for that to work, you need to put that at the end of your addOnReady code since that is what is causing the flash. The div has to have an id of myqt as follows: ``` <div id="myqt" style="padding-top:2000px"> Question text goes here. </div> ``` P.S. If you don't want it to have a bunch of padding when editing in Qualtrics, put the padding-top:2000px in an embedded variable in the survey flow, then pipe it into your html.
View original

4 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • Answer
  • August 16, 2018
I think that original post was from me. So, in order for that to work, you need to put that at the end of your addOnReady code since that is what is causing the flash. The div has to have an id of myqt as follows: ``` <div id="myqt" style="padding-top:2000px"> Question text goes here. </div> ``` P.S. If you don't want it to have a bunch of padding when editing in Qualtrics, put the padding-top:2000px in an embedded variable in the survey flow, then pipe it into your html.

  • Author
  • 14 replies
  • August 16, 2018
Yes, I got the fix from your post. Your current response works perfectly - thanks!

  • 1 reply
  • April 4, 2019
Hi! I found the comments above helpful to eliminate flashing of the graphic I'm using instead of text in a multiple choice question. However, I also have 8 small graphics as answer options and the file names of those still flash while things are loading. Does anyone know how to prevent that?

Forum|alt.badge.img+3
  • Level 2 ●●
  • 14 replies
  • December 12, 2023

This is going back a long way @TomG but do you know if there is a way to hide the browser scroll bar that flashes up briefly when using this solution?

 


Leave a Reply