Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Keeping an Image Frozen in Place when Scrolling - Issue with spacer element in Javascript & HTML

kwu25
kwu25 Qubie ✭
edited August 2018 in Custom Code

Hi everyone! I'm having issues with a spacer element that I have used successfully in the past. I have edited the HTML and Javascript such that the image stays frozen as the participant scrolls down. This allows participants to view the image as they rate them on various attributes. I pulled the original code from Stack Overflow (https://stackoverflow.com/questions/46286498/how-to-have-entire-item-in-qualtrics-remain-in-position-when-scrolling) - I am not very familiar with either HTML or Javascript, unfortunately.

The issue is that in both the preview mode and in the actual survey, and on multiple computers, the code to keep the image fixed works intermittently among the series of randomized images (each in a different block). It had been fully working in prior surveys (perhaps I did not randomize my blocks then, not sure). For example, if in the javascript, I put "$$('.image')[1]", it appears that the first image will not stay fixed, whereas all subsequent images will. If I put "$$('.image')[0]", the reverse appears to happen.

This is my Javascript code:
Qualtrics.SurveyEngine.addOnload(function() { $$('.image')[1].addClassName('fixed'); });

This is my HTML code:

image
.image{ background: white; width:100%; z-index: 1000; text-align:center; } .image.fixed{ position: fixed; top:0; left:0; } .image_spacer{ heigh t:120px; }

Note that all of the questions are currently sharing the same code, except for the replacement of the link.

Thank you in advance for your help!

Tagged:

Best Answer

  • kwu25
    kwu25 Qubie ✭
    Accepted Answer

    UPDATE: I no longer need an answer for this question. Here is the appropriate Javascript code for any one who is interested:

    Qualtrics.SurveyEngine.addOnload(function() { $$('.image').forEach(ele=>ele.addClassName('fixed')); });

Answers

  • Gomar
    Gomar Maastricht, The Netherlands Qubie ✭

    Dear kwu25, 

    I'm contacting you because I'm currently trying your java script for my survey:

    Qualtrics.SurveyEngine.addOnload(function() { $$('.image').forEach(ele=>ele.addClassName('fixed')); });

    ... but it's not working. I'm not familiar at all with Java or HTML, so I'm probably doing something wrong. 

    My question is: Do I have to just copy and paste the script in the "Edit Question JavaScript" window? Or do I also have to replace some parts of the scripts to adapt it to my files?

    Thanks a lot by advance to take a bit of your time to answer me, 


    Best, 

    Gomar.