CODEWITHSUNDEEP
javascripthtmlprototypejsqualtrics
Dave
Dave

Reputation: 111

How to have entire item in Qualtrics remain in position when scrolling?

I am presenting an image embedded in a descriptive text item, followed by several questions about that image. I would like that item to remain in place while the participant scrolls.

I've been able to get the entire image to remain in place using something like this HTML code:

<html>
<style>

.image{position: fixed; background: white;}

</style>

<div class = "image">
<img src="LOCATION OF IMAGE FILE" style="width: 395px; height: 395px;" />
</div>
</html>

But this freezes the image itself in a very awkward place (it actually does this in the editor itself, which blocks me from doing anything else). Is there a way to keep the presentation of the item exactly the same as it is normally, but just keep it in place?

Edit: This is how it should appear, as a separate item from the questions to follow. I would then like it to remain frozen in place while the user can scroll through the questions.

This shows how it currently appears. The image is frozen in place, but not where it should appear (i.e., above and separated from the questions that follow.

Upvotes: 1

Views: 2750

Answers (2)

Anthony Rivas
Anthony Rivas

Reputation: 962

You can use a spacer element to align the starting height of other elements. For example:

<div class = "image">
    <img src="LOCATION OF IMAGE FILE" width="395px" height="395px"/>
</div>

<div class = "image_spacer">
    This is a spacer element
</div>

<style>
    .image{
        position: fixed; 
        background: white;
        z-index: 1000;
    }
    .image_spacer{
        height: 395px; 
        visibility: hidden;
    }
</style>

Visually speaking, I may recommend adding a width of 100% to your image div as well, so that other elements are fully covered when you scroll.

To fix at the top on scroll, do the following:

<div class = "image">
    <img src="IMAGE LOCATION HERE" width="395px" height="395px"/>
</div>

<div class = "image_spacer">
    This is a spacer element
</div>

<style>
    .image{
        background: white;
        width:100%;
        z-index: 1000;
        text-align:center;
    }
    .image.fixed{
        position: fixed;
        top:0;
        left:0;
    }
    .image_spacer{
        height: 395px; 
        visibility: hidden;
        display:none;
    }
    .image_spacer.fixed{
        display:block;
    }
</style>

In addition, add this to the JavaScript for the question:

Qualtrics.SurveyEngine.addOnload(function()
{
var space = $$('.image')[0].cumulativeOffset().top;
console.log(space);
window.addEventListener("scroll", function(){
    if( document.body.scrollTop >  space){
            $$('.image')[0].addClassName('fixed');
            $$('.image_spacer')[0].addClassName('fixed');
    }
    else{
            $$('.image')[0].removeClassName('fixed');
            $$('.image_spacer')[0].removeClassName('fixed');
    }
});
});

Upvotes: 2

Prashanth kumar
Prashanth kumar

Reputation: 985

Did you try using the Text/Graphic option? enter image description here

As I am seeing no problem if I add an image that way, and the survey questions are in their place, check the image below for reference.

enter image description here

Upvotes: 0

Related Questions