• Resolved mshihinski

    (@mshihinski)


    Is there a way to set an offset when the quiz steps are submitted. When the Next / Previous / Submit buttons are clicked, the questions scroll too high on the page that has a sticky header. Is there a way to set an offset to adjust the top scroll position?

Viewing 15 replies - 1 through 15 (of 15 total)
  • Dear @mshihinski

    Hope you are doing well.

    Can you please share the quiz link with us.

    So I will check and help you to fix the issue.

    Regards,
    Sumit

    Dear @mshihinski ,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    Regards,
    Sumit

    Thread Starter mshihinski

    (@mshihinski)

    I was not able to respond to this due to a site error on the forums, but the URL in reference is https://www.dewpoint.com/cybersecurity-quiz/

    Dear @mshihinski

    We are not able to see the quiz on the link you shared.

    Please check the below-given link for your reference.

    https://nimb.ws/x0Tc6f

    Regards,
    Sumit

    Thread Starter mshihinski

    (@mshihinski)

    @sumitsanadhya The link is fine but it looks like the security team has set up restrictions that block any traffic outside the US. I have requested more info from them.

    Is there a different way we can resolve this? I can provide a video of what is happening. The javascript that scrolls the page does not account for a sticky header which causes the first question to be hidden behind the header.

    Dear @mshihinski ,

    We kindly request that you share the video with us, and to aid us in troubleshooting the reported issue effectively, we would greatly appreciate if you could provide us with the website link.

    If possible can you please share the step-by-step instruction to reproduce the issue at our that will be good.

    Looking forward to your reply.

    Regards,
    Sumit

    Thread Starter mshihinski

    (@mshihinski)

    I have not received permission to share the website to areas outside the US at this time. If that changes, I will report back. This is a video of the form scrolling under a sticky website header.

    https://vimeo.com/847509627/e06c27d603?share=copy

    Steps to reproduce.

    • Create a quiz on a site with a sticky header.
    • Fill out each page of the quiz.
    • Click Next.
    • Watch quiz questions scroll under the header.

    Ideal option would be to have a way to set an offset for the scroll feature.

    Dear @mshihinski ,

    Thank you for sharing the video and steps.

    I request you to please navigate to the quiz options tab > Display > Disable scroll on next and previous button click?

    Please set this option to “Yes” and then check.

    Please check below-given screenshot link for your reference.

    https://nimb.ws/P16izl

    Once you done with the changes then please clear the website and browser cache.

    Do let me know if you need more help.

    Regards,
    Sumit

    Thread Starter mshihinski

    (@mshihinski)

    @sumitsanadhya you should now be able to access the original URL to the live quiz page. Let me know if you still have issues connecting.

    We need this to scroll to the correct offset. Disabling the scroll leaves us with a form that the user has to manually scroll back to the first question of each step.

    Is there no way to create an offset? Or, is there JavaScript events we can hook in to in order to add our own code without modifying the plugin files?

    • This reply was modified 2 years, 10 months ago by mshihinski.

    Dear @mshihinski ,

    Thank you for the quiz link now I am able to see the quiz page.

    Let me discuss this with our technical team. I will keep you posted with further updates soon.

    Thank you for your understanding and cooperation in this matter.

    Regards,
    Sumit

    Dear @mshihinski ,

    You can use this jQuery code to set the scroll offset.

    jQuery(document).on('qsm_scroll_to_top_after', function(e, element){
    			jQuery('html, body').animate({ scrollTop: element.offset().top - 250 }, 1000);
    		})

    Once you add the code please clear the website and browser cache and then check.

    Let me know if you need more help.

    Regards,
    Sumit

    Thread Starter mshihinski

    (@mshihinski)

    @sumitsanadhya This creates a new issue. The page scrolls to the wrong position then scrolls to the new position. While this works it is not an ideal user experience for people using the form.

    Would it be possible to add an option to set the offset the plugin uses other than the default or have a way to override the default script from scrolling and still have the javascript event trigger?

    If I disable the default scroll the event doesn’t fire.

    Thank you for your assistance so far. I appreciate it.

    Thread Starter mshihinski

    (@mshihinski)

    @sumitsanadhya Following up on this. Is this a possibility?

    Dear @mshihinski ,

    First of all, I want to apologize for the late response to your request. It’s not our usual standard and I understand how frustrating this delay must be.

    Our technical team is still working on it. I will keep you posted with further updates soon.

    Thank you for your patience and understanding in this matter.

    Regards,
    Sumit

    Dear @mshihinski ,

    You can Disable scroll on next and previous button click option then use the below-given custom js to scroll.

    Screenshot: https://snipboard.io/YpwbCm.jpg

    Custom js code

    jQuery(document).on(‘qsm_next_button_click_after qsm_previous_button_click_after’, function(e, quiz_id){
    var $container = jQuery(‘.qsm-quiz-container-‘ + quiz_id);
    jQuery(‘html, body’).animate({ scrollTop: $container.offset().top – 250 }, 1000);
    });

    By using this custom script, the scrolling functionality will be handled exclusively by this code, and the plugin’s default scrolling behavior will not interfere.

    Do let me know if you need more help.

    Regards,
    Sumit

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Scroll offset with sticky header’ is closed to new replies.