Pin instructions to top of page as participants scroll through questions.

Hey Ahmed this is so helpful, it worked!!!! You saved my sanity :)
But now another little problem: it shows up in all of the following blocks of questionnaires, while i only want it to show on a single block/page. Do you know how to fix this too?
edit: wait actually im dumb, it did show up on that one page/block.

Updated JS here:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

var base_element = document.querySelector(".SkinInner");
base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

var new_element = document.querySelector("#sticky_vid");

// Change the text below to add the element of your choice
new_element.innerHTML = "PASTE HERE";

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});

Is this possible to do with an image? Is the code any different, thanks for the help! 

@ahmedA Would you happen to know how to do this with a question? I am looking to present my question at the top of the page when it loads so that respondents don’t need to scroll down to view the question. Would the code be any different? Thank you!

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

var base_element = document.querySelector(".SkinInner");
base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

var new_element = document.querySelector("#sticky_vid");

// Change the text below to add the element of your choice
new_element.innerHTML = "PASTE HERE";

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});

Hi @Tom_1842 , can you please update the JS so the image can be pinned at the top of the page. Thank you very much!

@thangnn - you might be interested in the freezeTopQ function. It doesn’t require any custom JS.

Hello @TomG , thank you very much for sharing the JS. Much appreciate!

I use the JS to pin this photo: https://anu.au1.qualtrics.com/CP/Graphic.php?IM=IM_bPCs2KEE87IvgcS

However, the page show the content link: https://anu.au1.qualtrics.com/CP/Graphic.php?IM=IM_bPCs2KEE87IvgcS but not the photo.

Woud you please help with this? Thank you very much and really appreciate your help!

Linh

@Linh - You need to put it in an <img> tag:

<img src="https://anu.au1.qualtrics.com/CP/Graphic.php?IM=IM_bPCs2KEE87IvgcS">

Hi @TomG Awesome! The code works! Thank you very much.

Would you please help with one more solution for this?

Is there any JS to divide the page into frames so that some are fixed (photo on left hand-side) and some allow scrolling (questions on the right-hand side)?

Much appreciate your help! :)

Thank you! Linh

I have a function, sideQs, for this.

hi @TomG , may I know the price to have the funtion sideQs?

Thank you very much!

Linh

Hi there, I’m trying to have a video locked on the screen so that participants can see it play while answering questions about it. I read through this thread and wasn’t able to fix my problem. (I have the video auto-playing and looping, now I just need it to stay in place). I’m not understanding what custom code to insert and where exactly to paste it while I’m in HTML view. 

@CallieRW Did you figure it out? I am trying to do the same thing, with the extra difficulty that my video link is an embedded data from a loop & merge.

This might actually be a solution for you, since my problem comes more from the embedded data I think.

This is my JS:

Qualtrics.SurveyEngine.addOnReady(function()
{
my_video = "${lm://Field/1}"; // this is only needed for the embedded data, in your case you can probably put the link into the src below directly.
var base_element = document.querySelector(".SkinInner");
base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

var new_element = document.querySelector("#sticky_vid");

// Change the text below to add the element of your choice
new_element.innerHTML = `<div style="text-align: center;"> <video id="videoPlayer" class="qmedia" controls="true" height="260" preload="auto" width="450" autoplay="true">
    <source src=“+my_video+” type="video/mp4">
    <embed align="middle" autoplay="true" bgcolor="white" class="qmedia" controller="true" height="300" pluginspage="http://www.apple.com/quicktime/download/" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/quicktime" width="450">
</video>`;

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});

This is the HTML in my question:

<div style="text-align: center;"> <video id="videoPlayer" class="qmedia" controls="true" height="260" preload="auto" width="450" autoplay="true">
    <source src=“${lm://Field/1}” type="video/mp4">
    <embed align="middle" autoplay="true" bgcolor="white" class="qmedia" controller="true" height="300" pluginspage="http://www.apple.com/quicktime/download/" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/quicktime" width="450">
</video>

My problem is that this is currently displaying two videos, on that is stuck to the top (which we want), but that unfortunately stays black, and one that plays as expected, but is not fixed to the top (comes from my html probably).

Anybody knows what is going wrong?

Edit: Fixed my problem. Just had to delete the HTML code out, and change the JS to this:

Qualtrics.SurveyEngine.addOnload(function()
{
my_video = "${lm://Field/1}";
});
Qualtrics.SurveyEngine.addOnReady(function()
{
var base_element = document.querySelector(".SkinInner");
base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

var new_element = document.querySelector("#sticky_vid");

// Change the text below to add the element of your choice
new_element.innerHTML = `<div style="text-align: center;"> <video id="videoPlayer" class="qmedia" controls="true" height="260" preload="auto" width="450" autoplay="true">
    <source src=`+my_video+` type="video/mp4">
    <embed align="middle" autoplay="true" bgcolor="white" class="qmedia" controller="true" height="300" pluginspage="http://www.apple.com/quicktime/download/" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/quicktime" width="450">
</video>`;

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;
});