Member Avatar for worldoflefty

Can you add and alignment feature to a <UL> tag so it appears at a top of a page?

<ul class=mainForm id="mainForm_2">
  • 4 Contributors
  • 4 Replies
  • 105 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

This is a viewport/scroll problem, not an HTML “alignment” attribute on a UL. The simplest robust fix is: after the script makes the next panel visible, programmatically move the viewport (or the scrollable container) to the top of that panel and give keyboard focus to the first field so users don’t miss anything. That must run after the panel is actually displayed (after any animations).

Example — scroll the panel into view and focus it:

var panel = document.getElementById('mainForm_2');
if (panel) {
  panel.tabIndex = -1;                  // make focusable without changing layout
  panel.focus();                        // help keyboard/screen-reader users
  panel.scrollIntoView({                // bring the panel to the top
    behavior: 'smooth',
    block: 'start'
  });
}

If you have a fixed header, subtract its height so the panel isn’t hidden under the header:

var headerOffset = 60; // pixels
var rect = panel.getBoundingClientRect();
var top = rect.top + window.pageYOffset - headerOffset;
window.scrollTo({ top: top, behavior: 'smooth' });

Implementation notes: run this only after your expand function finishes (use a callback, transitionend, or a small setTimeout if the expand is synchronous). If the page uses an inner scrollable container (not the window), call container.scrollTop = 0 or compute the offset against that container. Validate markup (unclosed tags or invalid attributes can produce odd layout/scroll behavior). As suggested, a screenshot/test page speeds diagnosis; 's request for full markup is relevant when the fix above doesn't behave as expected; and 's emphasis on correct HTML underscores why validating the markup helps prevent layout bugs.

Reference: Element.scrollIntoView()

Recommended Answers

All 4 Replies

Member Avatar for zomex

At the top of the page? Can you provide a screenshot of where it is on your page and where you would like it?

Jack

Member Avatar for shaya4207

First of all the class name needs to be enclosed in 'quotes (")', second you have to explain yourself a bit more

Member Avatar for worldoflefty

Sorry for the lack of details, I am new to this and really didn’t know how to explain it. I have a multi-page registration form. When I click the button to go to the next page, it opens up in the middle or bottom of the next page. Obviously I would like it to go to the top of the next page so people don’t fail to fill in some of the fields. I was told by another individual all I had to do is edit that line of code to align to the top of the page since that is the link to open the next page………I don’t know if that is correct or not? I’ll post the portion of the code that is between two of the pages (I can post more if needed).

Thanks for all your help with this.

<!-- next page buttons --><li class="mainForm">
					<input type=button onClick="if (validatePage1()) { collapseElem('mainForm_1'); expandElem('mainForm_2');}" class="mainForm" value="Go to page 2"/>	
				</li>
		<!-- close the display stuff for this page -->
		</ul>
<ul class=mainForm id="mainForm_2">
Member Avatar for Arkinder

Please post the complete markup or a link to your test page. Simply telling us you want it at the top could mean several things, and wastes everyone's time.

Regards, Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.