Javascript and Focus

Posted on 2006-07-11
Last Modified: 2012-06-27

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.

Question by:SRO_TSG
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +2

Expert Comment

ID: 17086644
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?

Expert Comment

ID: 17086663
You can use the # sign within html element/form tags to send the focus.

Accepted Solution

programmer1024 earned 43 total points
ID: 17086671
Alternatively you can probably give that element/form a name and use the onFocus() event.
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI


Expert Comment

ID: 17088460
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.

Author Comment

ID: 17090877
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.



Assisted Solution

muktajindal earned 41 total points
ID: 17096595
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.

Assisted Solution

Basilisci earned 41 total points
ID: 17098236
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.

Author Comment

ID: 17099622

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!!



Featured Post

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
If you’re thinking to yourself “That description sounds a lot like two people doing the work that one could accomplish,” you’re not alone.
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…
Simple Linear Regression

626 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