Move previous/next buttons to top AND bottom of page | XM Community
Skip to main content
Hi all,



I would like to have previous/next buttons at the top AND bottom of the page.



I have found out how to place the navigation buttons to the top of the page (see previous post) by placing the following code in the header CSS



<script type="text/javascript">

Qualtrics.SurveyEngine.addOnReady(function()

{

$(''Header').insert($('Buttons'));

});

</script>



I tried to place them in the footer, by putting following code in the footer:



<script type="text/javascript">

Qualtrics.SurveyEngine.addOnReady(function()

{

$('Footer').insert($('Buttons'));

});

</script>



This then however removes the buttons from the header again....



Anyone who can crack this?



Best,

Kars
Hi @Kars ,



Please go ahead and add below code in header of your survey.



<script>

jQuery('#HeaderContainer').after(jQuery('#Buttons').clone());

</script>



Regards,

Samarth
Hi @Samarth ,



Thanks for your swift reply. I have put the following code in the header:



<script type="text/javascript">

jQuery('#HeaderContainer').after(jQuery('#Buttons').clone());

</script>



It works, however only on the first page, on the second page it disappears again 😞. It kind of floats in and then vanishes. Any idea what this could be?
Put the clone line inside an addOnReady function.
Hi @TomG , @Samarth ,



Thanks for the help again. I put the following code in the header:



<script type="text/javascript">

Qualtrics.SurveyEngine.addOnReady(function()

{

jQuery('#HeaderContainer').after(jQuery('#Buttons').clone());

$('Header').insert($('Buttons'));

});

</script>



This gives me buttons at the top AND bottom of the page, only the buttons at the top don't work. Any idea?
I think it is because the buttons have duplicate id's. You'll have to use JavaScript to find and change the id's of the top buttons.
Hi @TomG ,



Thanks again for your reply. I am afraid I am not capable of using/writing JavaScript on my own.



Would you by any chance have an idiot proof guide to find and change the id's of the top buttons?



Best regards,
Hi @Kars! When you post in the Custom Code section, community users will assume that you already have a basic knowledge of programming and how to integrate it into Qualtrics. If you do not, we recommend checking out W3Schools and our pages on Adding Custom CSS and Adding JavaScript to get a basic understanding!
LOVE THIS! Thank you!
update: The "buttons" at the top do not actually work! You can't click on them, and they stopped the questions from auto-advancing. May have something to do with the new look and feel formatting? I'll search for another solution!
(I just noticed the solution above as well... )
I edited the above clone function to read as follows:



<script type="text/javascript">

Qualtrics.SurveyEngine.addOnReady(function()

{

jQuery('#HeaderContainer').after(jQuery('#Buttons').clone(1));

$('Header').insert($('Buttons'));

});

</script>





This seems to have fixed the duplicate id problem. However, on survey pages with timers there are still issues with the buttons not working. Specifically:



-On pages with timers that record the amount of time spent on a page, the top and bottom buttons both appear, but only the bottom is clickable.

-On pages with timers that prevent the early submission of a survey only the bottom button appears after the minimum required time has passed.



Does anyone know if I have either missed something in the code or what I should change in order to prevent these timer issues?

Leave a Reply


Terms & Conditions