Solved

Reposition to area of screen after page is submitted ..

Posted on 2011-03-17
2
264 Views
Last Modified: 2012-05-11
Hey all.

I have a situation where I need to focus on an element after the page is submitted but for it to be "smooth".

I have a screen with table data on it, the table has, say, 100 records that cause the page to scroll. An item near the bottom of the page is updated and once it is updated, the page is automatically submitted (refreshed), there's no way around the submittal of the page.

Once the page "comes back", I need for that same element to have focus and for it to happen smoothly. Currently, once the page is reloaded, it is at the top of the page and when I reposition down the page, you can see the page "move down". So, what you have is the page having to load and then visibly "move down" to the focused element. I want to eliminate the viewing of the "moving down" part.

Also, centering the focused element would be nice too, or at least moving it up from the bottom edge of the screen.

Any ideas?
0
Comment
Question by:Webspeeder
2 Comments
 
LVL 8

Accepted Solution

by:
dmeeren earned 500 total points
ID: 35160209
Why not use <a name="positionname"></a> and ad the following to the refresh link #positionname, you will get a link like: http://domain.com/bla.php#positionname
0
 

Author Comment

by:Webspeeder
ID: 35161165
I thought about that but figured it would have same visual affect. I'll try it.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question