Javascript and Focus


I have a question regarding how to set the focus to a specific "spot" on a new page.  

I will go to AAA page first.  AAA page is usually long with vertical scroll bar.  It has a list (bullet points) of texts.  I can make the texts <div> with anchors.   Users can use scroll bar or page Up/Down to go to any spot on AAA page.  Then users have a button on AAA page to go to BBB page.  This BBB page has the same list (bullet points) of texts, but in another language.  This means the lengh of the texts (bullet points) might be very different on the two pages.

We wish to put the focus roughly at the same bullet point on BBB page when user leaves AAA page.  Since users do not really have a focused control when they move from AAA to BBB, it seems we cannot track where they really are (at AAA page).  Or can we?  

Is there a way to do this?  Thanks for any help.

Who is Participating?
programmer1024Connect With a Mentor Commented:
Alternatively you can probably give that element/form a name and use the onFocus() event.
I'm not sure of your question. Do you mean that when a client switches from page A to page B (in your site the both of course) in the B page he must be taken automatically to the same spot that he was in page A?
You can use the # sign within html element/form tags to send the focus.
The new generation of project management tools

With’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Before redirecting the user from page AAA to BBB, you will need to keep track of the last element being focussed by the user on AAA (by using the onFocus() event of every focussable element), pass it alongwith request, and then map it to the corresponding item on BBB and set focus on it. You can achieve it by keeping same element names on all the pages or by providing some kind of mapping.
SRO_TSGAuthor Commented:
Thanks a lot for all the suggestions!!

I think the problem I have is that users might not have a "focusd" element.

On Page AAA, I have a list of bullet points (all texts).  I will give each one an anchor tag such as A, B, C.  Then users can use scroll bar or Page Up/Page Down to scorll on the page.  Users do not need to user Tab or Mouse to "focus" on any thing on the page.  Then users will clik a button which is actually on a seprate frame to make Page AAA go to Page BBB.   When users use scroll bar or Page Up/Page Down to read the html page,  is there actually a focused element?   I might be able to track the distance users scroll down from top, but since Page BBB is in another language, the lenght of the texts might be very different.  Forcing the focus to scroll down certain distance might not have focus "arrive" at similar spot.


muktajindalConnect With a Mentor Commented:
There are two issues that are bothering me about your implementation:

1. How will you measure the length of the page being traversed by the scrollbar??

2. Even if you are able to calculate length anyhow, there is further issue. Different users may have different text size settings on their browser. How will you take care of that while mapping page length to the last element being viewed by the user?

I'm sorry but I don't think it's easy (or I must say possible) to implement what you are talking about.
BasilisciConnect With a Mentor Commented:
This is a bit hard to implement, but I have done a similar system for a intranet webapp. It works, and does not rely on any focussed elements.

Use a common js library on each page, containing the following logic.

- Attach an onscroll event handler to the window object. On each scroll event, store window.scrollTop somewhere (more on that later)
- Attach onload event handler, which checks if a stored scrollposition value for the page is found, and scrolls the window to that position (scrollTo()).

Propably you'll want to store scrollpositions to an "array" indexed by each page's url (var scrollPositions = new Object(); positions[url] = position; ).

The biggest problem is where to store the array so that the variable does not disappear with each page. If you are using frames, you can store it in some frame, or just attach it to top.scrollPositions. Other option would be to keep the position storage in a cookie that is created and updated via javascript, but that would be a bit inefficient, considering that onScroll events get executed very often, so it should be kept lightweight.
SRO_TSGAuthor Commented:

Thanks for the great hints.  I think Basilisci's solution is of great help for this approach (find the position of the scroll).  However, since Page BBB might be in a different language, the position might be very different.   The comment from muktajindal is our concern too.

Page AAA will have a list of bullet points (say i, ii, iii, iv, v, vi, etc).  Users scoll to view these points.  Each point has very different length.  If users scroll down to see roughly point iii, then they press Page BBB, we wish Page BBB go to point iii.  We actually have a few different languages, including Asian languages.  So using the scroll posiiton might not make the page arrive at that "point" users are reading at Page AAA...

But this hint is very very helpful for future reference.  Thanks a lot!!


All Courses

From novice to tech pro — start learning today.