Page jumping

  • Resolved devgains

    (@devgains)


    5 years, 6 months ago

    Hi,

    Firstly, thanks for making such a useful plugin.

    We have a contact form on our page that we are in the process of testing, we have noticed that when clicking on an empty area (say for example the space between the Previous address field and Home tel num) some javascript is causing the page to go to first usage of this plugin which is the ‘Do you need an interpreter’ field.

    PW to page: 12345

    I can’t figure out why this is occurring, any ideas?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Jules Colle

    (@jules-colle)

    Not sure. I’m not a dev tools wizard, but after adding a breakpoint for all the on click events, and then stepping trough the code I think the actual jump happens in /wp-includes/js/jquery/jquery.js?ver=1.12.4-wp which is just WPs default jQuery file. So that’s not very helpful I’m afraid..

    I think if you could find someone who knows their way a bit in the chrome dev tools, it should be fairly simple for them so find the line of code causing the scroll after the click event. Once you pinpointed that line, it should be a pretty straightforward job to get it fixed (hopefully.)

    Anyway, I’m going to have to close this one, as your problem seems unrelated to the conditional fields plugin. But just to make sure.. could you disable conditional fields and verify that the problem persists, even with my plugin disabled? Cause if it does not, I guess I might need to fix it after all.

    Thread Starter devgains

    (@devgains)

    You are correct – I’ve tested with the plugin disabled and the issue is still occuring. The problem only began on Friday after implementing the conditional fields so naturally I assumed the error was related.

    Appologies as I should have really tested that before making the topic.

    I did make some CSS changes too so I will have to look deeper into this on my end.

    Thanks for looking anyway.

    Plugin Author Jules Colle

    (@jules-colle)

    Hey I have been working on my dev tools skills a bit, and finally it hit me what the problem was…

    All your form fields are wrapped inside a <label> element. By definition clicking a label that is wrapped around an imput element, changes focus to that element. In this case it just picks the first element. So if you scroll down and the first field moves out of view, and you click in the blank space, you are actually clicking the label element, switching focus to the first field, and thus scrolling up the page.

    The reason I couldn’t find this with the dev tools is because there was no javascript involved.

    Oh by the way: the solution is to remove the first <label> and the last </label> from your form, and it will work.

    Thread Starter devgains

    (@devgains)

    Ah! You’ve cracked it. The inputs where not wrapped in labels but I had a label tag around some text that already had h2 tags which seemed to be causing the problem.

    All fixed now, thanks Jules.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Page jumping’ is closed to new replies.