Eliminating graphics flashing | XM Community
Solved

Eliminating graphics flashing

  • 16 August 2018
  • 4 replies
  • 108 views

Userlevel 2
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.
icon

Best answer by TomG 16 August 2018, 21:18

View original

4 replies

Userlevel 7
Badge +27
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.
Userlevel 2
Yes, I got the fix from your post. Your current response works perfectly - thanks!
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?
Userlevel 2
Badge +3

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