Solved

Javascript and Focus

Posted on 2006-07-11
11
284 Views
Last Modified: 2012-06-27
Hi,

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.

TSG
0
Comment
Question by:SRO_TSG
[X]
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
11 Comments
 

Expert Comment

by:ObiRenoKenobi
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?
0
 
LVL 4

Expert Comment

by:programmer1024
ID: 17086663
You can use the # sign within html element/form tags to send the focus.
0
 
LVL 4

Accepted Solution

by:
programmer1024 earned 43 total points
ID: 17086671
Alternatively you can probably give that element/form a name and use the onFocus() event.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 5

Expert Comment

by:muktajindal
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.
0
 

Author Comment

by:SRO_TSG
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.

Thanks!!

0
 
LVL 5

Assisted Solution

by:muktajindal
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.
0
 
LVL 6

Assisted Solution

by:Basilisci
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.
0
 

Author Comment

by:SRO_TSG
ID: 17099622
Hi,

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

TSG

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.
Computer science students often experience many of the same frustrations when going through their engineering courses. This article presents seven tips I found useful when completing a bachelors and masters degree in computing which I believe may he…
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…
Six Sigma Control Plans

729 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