HTML or CSS to move user view

skewray · 2025-03-06 16:10:49

It is pretty standard to add #section to a web link to have the contents with <div id="section"> be at the top of the web browser view port. However, I want to achieve the same effect without changing the web address. Is there some way to achieve this with HTML and/or CSS?

My use case is that I have a form that, if filled out correctly, will generate a plot. I want to have the user see the plot at the top of the screen if successful, otherwise the top of the form. So, the top “row” of the user’s view port depends on the contents of the page.

I suspect that this is easy, but I can’t find the answer because google search no longer works.

jakob · 2025-03-06 20:50:51

Is this a com_connect form? If so, maybe you can achieve that using the thanks_form. That only shows on successful submission.

Otherwise I guess you need some kind of trigger to determine if the form submission was successful or not, e.g. as get or post variable. Then you could use <txp:page_url type="your_trigger_var" /> to retrieve that. Place that in a txp:variable (e.g. similar to example 6 in the docs) and then act on that accordingly using if_variable and some javascript, e.g. using scrollIntoView:

<script>
    document.getElementById('plot').scrollIntoView({behavior: "smooth"});
</script>

where <div id="plot">…</div> is the container for the plot.

skewray · 2025-03-08 15:46:21

I am using txp -> php -> C. C generates the form and the plot, while the php directs the inputs, outputs, and errors.

What I get from this (and thank you!) is that I need JavaScript to scroll to a spot. I’ve managed to avoid JavaScript ever since I switched to txp, but one harmless line won’t hurt.

Can I put the JavaScript anywhere on the page? (As opposed to the header?) If so, the C can generate it along with the plot.

skewray · 2025-03-10 16:53:15

I put the JavaScript into the Txp article source, pretty much cut-and-paste from above, but it doesn’t work in three different browsers. As far as I can determine from looking up all the parts online, it should. Mysterious.

Bloke · 2025-03-10 17:13:02

skewray wrote #339250:

I put the JavaScript into the Txp article source, pretty much cut-and-paste from above, but it doesn’t work in three different browsers.

If you’re pasting it directly into the article body, is your article using Textile? That will foul up the encoding.

skewray · 2025-03-10 17:27:22

I’m not using Textile for this article. The page source looks okay to me in the browser tools.

The page in question is www.skewray.com/tools/modulation-transfer-function . I’ve got it (not) jumping to the top of the form instead of the top of the plot, just for testing.

jakob · 2025-03-10 23:16:34

I can’t look in detail right now, but … wild guess … could it be that the javascript is firing before the element you want to jump to exists, or has been painted into? If so, maybe wait until the page or DOM has loaded, e.g.

window.onload = function () {
…
}

or

document.addEventListener ("DOMContentLoaded", () => {
…
});

or add a timeout to delay the jump firing.

phiw13 · 2025-03-10 23:38:10

Filling in that form and after clicking the submit button, I get the following error in the console:

TypeError: null is not an object (evaluating 'document.getElementById('plot').scrollIntoView')

skewray · Yesterday 01:59:32

Okay, well, I recall why I don’t do JavaScript. I don’t think I will pursue this avenue. At my age, I only have a few brain cells left, and JavaScript isn’t what I want to spend them on. Thank you, both.

jakob · Yesterday 08:47:13

phiw13 wrote #339256:

Filling in that form and after clicking the submit button, I get the following error in the console:

TypeError: null is not an object (evaluating 'document.getElementById('plot').scrollIntoView')...

skewray wrote #339257:

Okay, well, I recall why I don’t do JavaScript. I don’t think I will pursue this avenue …

No need to despair. You’re calling the javascript before defining the element itself, so it’s looking for an element that is yet to come. You could change the order, but maybe simply try my suggestion from above:

<script>
	document.addEventListener ("DOMContentLoaded", () => {
		document.getElementById('plot').scrollIntoView();
	});
</script>

which says “once the page node structure has loaded, find the element with id="plot" and scroll it into view”.

I could only try this on an offline-version of your page and it scrolled down to the form but without the script I can’t test the output stage.

Also, if you want it to scroll past the form to the plots, then you need to place #plot around the generated plot, i.e. after the fieldset. At present you have it around the entire form, so it will always scroll to the top of the form, e.g.

<form method="POST">
    <fieldset class="toolsection">
        <!-- your form fields -->
    </fieldset>
    <div id="plot">
        <!-- your generated svg plots -->
    </div>
</form>

If you have some way of testing for whether the form details were successful, you can use that to insert the javascript only when the submitted form fields are valid/complete. Or you can change the target to scroll to, so that it scrolls back to the form in the case of an error, or to the plot if all details were correct.

skewray · Yesterday 19:06:45

Okay, it works now. All I had to do was move the JavaScript until after the <div>.

(My previous test put the <div> around the form for testing. Now the C code generates the <div> and JavaScript only when the plots appear.)

jakob · Yesterday 19:55:42

Glad you got it working!

Textpattern CMS

Textpattern CMS support forum

#1 2025-03-06 16:10:49