Send to screen position after submitting form button

[ampedout]

On mobile devices, after hitting the submit button it sends them to near the bottom of the page. How can I make it so that it sends them to a page location, div, container or anchor?

[Paulie_D]

Your statement is a little vague….the submit button submits what?

Under what circumstances, what browser, what OS? Why just mobile?

Does it go to a new page or the same one?

An anchor is just a reference to a specific point on a page…That’s why they are <a> tags….’a’ is for anchor..that’s what they are for.

[ampedout]

It always stays on the same page. It is an HTML form styled with CSS. After a number of steps, it completes with a “complete” button. Once that button is hit, it creates a set of text and buttons stating that it was to complete and if they wish to create an account etc. You do not see that until you scroll back up a bit. It basically leaves the customer looking at a blank page until they decide to scroll up.

You can check it out yourself on your mobile device by going to:

http://energyreclaimer.com/schedule-an-appointment/

Finish the entire scheduling as it is just a test site for now. Then you will see exactly what im referring to. Thank you for your response also. Greatly appreciated!

I only develop websites every couple of years and I typically have to re-learn a good portion of things. I could not think of the correct wording while searching google for my solution. That may partly why it is a bit vague.

As an example: lets say my page is divided vertically into 8 parts.

1        Scheduled
2        Thank you!
3        [reschdule]
4           [cancel]
5 ╔══════════╗
6 |     customers    |
7 | mobile screen  |
8 ╚══════════╝

After the submit button on the final section of my form is clicked, the view on the customers screen is nearly blank. They only see the bottom of some of the buttons which are part of the confirmation section. Much like shown above. I need it to be coded to automatically position the customers screen in the upper half of the screen. I have some footer space that I will be using in the lower half for other things later.

[Paulie_D]

So you have some Javascript (I assume) that does most of this.

Assuming that the final location already exists in the DOM, you just need to add an extra function to go to that specific anchor point (presumably an #ID).

[ampedout]

Okay, so it is more java related. I will begin my search on how to correct this. Thanks.

[__]

So you have some Javascript …
—Paulie_D

Okay, so it is more java related.

Javascript. Not remotely the same thing.

Looking at this briefly, it seems the form in question is actually on a different page, and displayed inside an iframe (which, BTW, was set at 800px tall when I visited—too short to see the submit button at all). This might complicate things a bit (though I am not sure; you’d have to try it).

[ampedout]

Ill look at things and adjust it tomorrow once I wake up and get back with some results.

[ampedout]

I am not sure where to add this. I am also not sure what the ID or class for it is. Also, sorry that I am VERY VERY new to JS. I have a footer area in my appointment scheduling software’s website that I place my CSS code. Would I put it in there as well? Would I wrap it in something first?

I dont know what id or class to call for this button. Can you tell by this picture?

http://energyreclaimer.com/wp-content/uploads/2014/10/send-to.png

Or would I put all of the code on that page in my wordpress? Meaning I would edit the page and put one piece of code at the top above the iframe, then place another piece of JS code inside of the iframe?

Example: This is my Iframe code for the page. How would I have it look if that was the case?

<iframe src="https://acuityscheduling.com/schedule.php?owner=11313632" width="100%" height="auto" frameborder="0" id="iframe"></iframe>
<script src="https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js" type="text/javascript"></script><code></code>

Like, I was fiddling around with it a bit and ended up with this:

<script type="text/javascript">
    function scrollFrame(position) {
        position += $('#myFrameID').offset().top;
        $('body').animate({ scrollTop: position }, 1000);
    }
</script>

<iframe src="https://acuityscheduling.com/schedule.php?owner=11313632" width="100%" height="auto" frameborder="0" id="iframe">
$("#imageField").click(function () {
        if (window != window.top) // the page is inside iframe
            window.top.scrollFrame(0); // change the position if any. 0 is top
    });
</iframe>
<script src="https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js" type="text/javascript"></script>

I know its not right because it is not working, but at least im trying to understand.

[ampedout]

After hours of reading, I think that some of my tries are not working because the Iframe is loaded from an outside source. How do I check that that is the case or not?

[Author]

Posts