Move previous/next buttons to top AND bottom of page

KarsKars AmsterdamCommunity Member Qubie ✭
edited July 2018 in Custom Code

Move previous/next buttons to top AND bottom of page

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

Best Answer

  • SamarthSamarth INDIA Guru ✭✭
    Accepted Answer

    Hi @Kars ,

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

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

    Regards,
    Samarth

Answers

  • KarsKars AmsterdamCommunity Member Qubie ✭
    edited July 2018

    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?

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    Put the clone line inside an addOnReady function.

  • KarsKars AmsterdamCommunity Member Qubie ✭

    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?

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    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.

  • KarsKars AmsterdamCommunity Member Qubie ✭

    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,

  • EmilyEmily Provo, UTCommunity Administrator Administrator

    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!

  • EllenKEllenK MarylandCommunity Member Qubie ✭

    LOVE THIS! Thank you!

  • EllenKEllenK MarylandCommunity Member Qubie ✭

    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!

  • EllenKEllenK MarylandCommunity Member Qubie ✭

    (I just noticed the solution above as well... )

Sign In to Comment