Best answer by TomG
View original
pre-onLoad jQuery/JS?
Userlevel 1
onLoad is working great with jQuery to hide unwanted elements for customization. For instance, I'm hiding the question text as well as all the slider numbers. I have noticed, however, that there is a slight delay in which you can see all the elements that are eventually hidden in onLoad. I know the reason is because onLoad is not executed until the page is loaded, but this does provide a flash of the ultimately hidden areas to the user when loading the survey. Is there a way to "beat" onLoad to the punch by essentially hiding these elements earlier in the process? I think css would work, but i'm not entirely sure what the page IDs are for the slider numeric labels and the question text, etc. -- or where to really put that. Thanks in advance for any suggestions!
Userlevel 7
+27
A simple solution that works well is just add a div with a lot of top padding to the beginning of your question text to push everything off the screen. Then hide the div at the end of your script. Use an embedded variable to define the padding so it has no impact in edit mode (e.g. padTop = padding-top:2000px).
html:
```
<div class="padTop" style="${e://Field/padTop}"></div>
Your question text goes here.
```
js:
```
Qualtrics.SurveyEngine.addOnload(function() {
/* Your js code goes here */
jQuery(".padTop").hide();
});
```
html:
```
<div class="padTop" style="${e://Field/padTop}"></div>
Your question text goes here.
```
js:
```
Qualtrics.SurveyEngine.addOnload(function() {
/* Your js code goes here */
jQuery(".padTop").hide();
});
```
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.