Set focus to a div

D

Dave Rado

Hi

My users would like to be able to see the menu and the footer
navigation in a website I'm building without first having to scroll to
the top or bottom the screen in order to get to them, which they find
irritating. I realise that suing frames is a no-no these days but I
was excited recently to discover a method using css "pseudo-frames"
that is bookmark-friendly and search engine friendly. However, I've
hit a snag. In order for the user to be able to navigate the
scrollable area using the keyboard without first clicking in that
area, I have to set the focus to the div that defines the scrollable
area. First I tried to do this using:

<body onload="document.getElementById('ScrollableContent').focus()">

That works perfectly in Firefox and IE but doesn't work in Safari or
Opera for some reason. See my mock-up at http://tinyurl.com/3bxktg..

I read somewhere that it is better to set the focus to an anchor
within a div rather than to the div itself, so I then tried creating
an anchor within the 'ScrollableContent' div, as in:

<a name="ContentLink" id="ContentLink"></a>

and then using:

<body onload="document.getElementById('ContentLink').focus()">

But that also works perfectly in Firefox and IE but doesn't work in
Safari or Opera for some reason. See my mock-up at http://tinyurl.com/38osgw.

Does anyone know (a) why Safari and Opera don't recognise
getElementById.focus()? and (b) whether there is any way of doing this
that does work in Safari and Opera?

Dave
 
M

Martin Honnen

Dave said:
Hi

My users would like to be able to see the menu and the footer
navigation in a website I'm building without first having to scroll to
the top or bottom the screen in order to get to them, which they find
irritating. I realise that suing frames is a no-no these days but I
was excited recently to discover a method using css "pseudo-frames"
that is bookmark-friendly and search engine friendly. However, I've
hit a snag. In order for the user to be able to navigate the
scrollable area using the keyboard without first clicking in that
area, I have to set the focus to the div that defines the scrollable
area. First I tried to do this using:

<body onload="document.getElementById('ScrollableContent').focus()">

That works perfectly in Firefox and IE but doesn't work in Safari or
Opera for some reason. See my mock-up at http://tinyurl.com/3bxktg..
Click to expand...

I have tried with Opera 9 and it does not show any script errors in its
JavaScript console.
 
D

Dave Rado

Hi Martin

I have tried with Opera 9 and it does not show any script errors in its
JavaScript console.
Click to expand...

No, it seems to just ignore it completely, but the question is how I
can get it to work in Opera and Safari?

Dave
 
T

Thomas 'PointedEars' Lahn

Dave said:
No, it seems to just ignore it completely, but the question is how I
can get it to work in Opera and Safari?
Click to expand...

You can't do anything but report a bug. If such a feature doesn't work,
it just doesn't work.


PointedEars
 
D

Dave Rado

HI Thomas

You can't do anything but report a bug. If such a feature doesn't work,
it just doesn't work.
Click to expand...

But is there any way of setting focus to a div when a webpage loads
that is cross-browser compatible?

Dave
 
T

Thomas 'PointedEars' Lahn

Dave said:
But is there any way of setting focus to a div when a webpage loads
that is cross-browser compatible?
Click to expand...

Apparently not. However, I double-checked your observations and could not
confirm them for Safari 3.0.4 beta (523.15), at least not with
document.links[0].focus().

It is also possible to focus that link this way in Opera 9.26, but that does
not mean keyboard scrolling of the ancestor `div' element is possible there
then. And the ancestor `div' element's object also has a proprietary
focus() method there, but calling that does not help either.


PointedEars
 
S

SAM

Dave Rado a écrit :
HI Thomas



But is there any way of setting focus to a div when a webpage loads
that is cross-browser compatible?
Click to expand...

<body onload="self.location = '#anchor_1';">



<div id="anchor_1">here to go</div>
 
D

Dave Rado

Hi Thomas

But is there any way of setting focus to a div when a webpage loads
that is cross-browser compatible?
Click to expand...

Apparently not. However, I double-checked your observations and could not
confirm them for Safari 3.0.4 beta (523.15), at least not with
document.links[0].focus().
Click to expand...

document.getElementById('idname').focus() doesn't work with Safari,
but you're right that document.links[0].focus() does work with Safari
(but it doesn't work with Opera) - thanks.

It is also possible to focus that link this way in Opera 9.26, but that does
not mean keyboard scrolling of the ancestor `div' element is possible there
then. And the ancestor `div' element's object also has a proprietary
focus() method there, but calling that does not help either.
Click to expand...

Can you think of any way of fooling Opera into working properly? After
all if I go to Google in Opera, the keyboard focus is in the search
box, so one would have thought what I'm trying to achieve must be
possible?

Dave
 
D

Dave Rado

What am I missing?
Click to expand...

The down-arrow key event is supposed to scroll the content of the div
downwards, and it does in all browsers other than Opera if I use
Thomas's code posted above.

Dave
 
D

Dave Rado

Hi Stephan

<body onload="self.location = '#anchor_1';">

<div id="anchor_1">here to go</div>
Click to expand...

Again that works in Safari (and IE and Firefox) but not in Opera, when
I try it. Have you been able to get it to work in Opera?

Dave
 
M

marss

Again that works in Safari (and IE and Firefox) but not in Opera, when
I try it. Have you been able to get it to work in Opera?
Click to expand...


Try scrollIntoView method.

<body
onload="document.getElementById('ScrollableContent').scrollIntoView(true)">


Mykola
http://marss.co.ua - Casual ideas for web development
 
S

SAM

Dave Rado a écrit :
Hi Thomas

But is there any way of setting focus to a div when a webpage loads
that is cross-browser compatible?
Click to expand...
Apparently not. However, I double-checked your observations and could not
confirm them for Safari 3.0.4 beta (523.15), at least not with
document.links[0].focus().
Click to expand...

document.getElementById('idname').focus() doesn't work with Safari,
Click to expand...

I cant do it working with my Firefox ... :-(
Would you have an example ?
 
D

Dave Rado

Hi marss

Try scrollIntoView method.

<body
onload="document.getElementById('ScrollableContent').scrollIntoView(true)">
Click to expand...

That doesn't work even in Firefox or IE, when I try it - please could
you see if I am doing something wrong? See my mock-up at http://tinyurl.com/2luac4,
which uses your suggested method but doesn't work in IE or Firefox, as
opposed to my original mock-up at http://tinyurl.com/3bxktg which does
at least work in those two browsers.

Dave
 
S

SAM

Dave Rado a écrit :
Hi Stephan



Again that works in Safari
Click to expand...

No, it doesn't in Safari 2 (Mac)
Safari scrolls uniquely the window by arrows keys.
The div can be scrolled by mouse's wheel or arrows keys as soon as this
div gets focus by a click.

Opera 9.0 reacts the same.

(on both cursor doesn't leave the div when it reaches the last or first
line of the div)


(and IE and Firefox)

Firefox jumps to the next or previous div when end or beginning of the
div is reached.
Coming back by arrow keys to the div to scroll, that scrolls this div.

Is there really a normal feature ?
Who is right ? this one which stays in the focused div or that one that
jumps through the dom ?
Perhaps this other that actives only the lift of the window ?
(independently of what could be in the divs whom some ones are empty)
 
S

SAM

marss a écrit :
Try scrollIntoView method.

<body
onload="document.getElementById('ScrollableContent').scrollIntoView(true)">
Click to expand...

Not more with my Safari 2
Not more in Opera 9.0

OK Firefox 2
 
S

SAM

Dave Rado a écrit :
<body onload="document.getElementById('ScrollableContent').focus()">

That works perfectly in Firefox
Click to expand...

No that doesn't ...
as soon as the pointer jumps to footer or menu nothing more works.

Try without using table.
and IE
Click to expand...

Don't know what it is.
but doesn't work in Safari
Click to expand...

No it doesn't
<a name="ContentLink" id="ContentLink"></a>

and then using:

<body onload="document.getElementById('ContentLink').focus()">
Click to expand...

Nothing more or less than above.

Don't use table to arrange your presentation.
 
S

SAM

Dave Rado a écrit :
please could
you see if I am doing something wrong? See my mock-up at http://tinyurl.com/2luac4,
Click to expand...

Your examples are out of order, using arrow keys that doesn't scroll the
window nor anything else in my Firefox.

While these keys work fine with a "normal" page :-(


With tables you'll always meet problems, overall with Safari (without
speaking about IE).
 
D

Dave Rado

Hi Stephan

Your examples are out of order, using arrow keys that doesn't scroll the window nor anything else in my Firefox.
Click to expand...

That's because you are looking at the wrong mock-up.

The original mock-up that I posted at http://tinyurl.com/3bxktg *does*
scroll using the arrow keys in Firefox and in IE. It also scrolls
using the arrow keys in Opera and Safari after you click on the page
but not until then. That mock-up uses:
<body onload="document.getElementById('ScrollableContent').focus()">


marss then suggested using instead of the above:
<body
onload="document.getElementById('ScrollableContent').scrollIntoView(true)">

I tried that and it didn't work even in Firefox or IE, and so I posted
the second mock-up that used marss's suggestion, at http://tinyurl.com/2luac4,
in order to show that it did not work when I tried it, and I asked
marss to look at the mock-up and let me know if I had misunderstood
his suggestion.

So you don't need to tell me that the second mock-up doesn't work
because the reason I posted it was in order to prove that it doesn't
work. But the first mock-up I posted does work, in Firefox and IE.


While these keys work fine with a "normal" page :-(
Click to expand...

Depends how you define "normal". I'm posting this in Google Groups,
using their tree view. In that view the posts appear in a scrollable
div very similar to mine. As with mine, you have to click within the
scrollable area before you can scroll it with the keyboard. Google's
programmers are highly respected and I have never heard them being
criticed for being abnormal.
With tables you'll always meet problems, overall with Safari (without
speaking about IE).
Click to expand...

Taking out all the tables makes no difference to this at all. See my
mock-up at http://tinyurl.com/3bjpz3, which uses:
<body onload="document.getElementById('ScrollableContent').focus()">

.... and which contains no tables at all, and which, just like the
first mock-up I posted, allows you to scroll with the keyboard in
Firefox and IE without having to click in it first, but which you have
to click in before you can scroll with the keyboard in Opera and
Safari.

And see my mock-up at http://tinyurl.com/2qenex, which uses:
<body
onload="document.getElementById('ScrollableContent').scrollIntoView(true)">

and which, just like the second mock-up I posted, does not allow you
to scroll with the keyboard unless you click in it first, in any
browser. The presence or absence of tables does not have any affect on
this issue whatsoever.

Have you managed to set the focus to a scrollable div in Opera such
that one can scroll with the keyboard without clicking in it first? If
so, please could you post some code?

Dave
 
S

SAM

Dave Rado a écrit :
Hi Stephan
Click to expand...

Hi Dave,
That's because you are looking at the wrong mock-up.
Click to expand...

Ha ! Ben ! s'il n'y a que les mauvais exemples !
The original mock-up that I posted at http://tinyurl.com/3bxktg *does*
scroll using the arrow keys in Firefox and in IE.
Click to expand...

more or less ...
That mock-up uses:
<body onload="document.getElementById('ScrollableContent').focus()">


marss then suggested using instead of the above:
<body
onload="document.getElementById('ScrollableContent').scrollIntoView(true)">

I tried that and it didn't work even in Firefox or IE, and so I posted
the second mock-up that used marss's suggestion, at http://tinyurl.com/2luac4,
in order to show that it did not work when I tried it, and I asked
marss to look at the mock-up and let me know if I had misunderstood
his suggestion.

So you don't need to tell me that the second mock-up doesn't work
Click to expand...

OK but ... we are a little lost with yours '3bxktg' '2luac4' '3bjpz3'
whom names are not very expressive
Depends how you define "normal".
Click to expand...

a page without complicated CSS to block (fix) divs on top and on bottom
of window (and without table).
I'm posting this in Google Groups, using their tree view.
Click to expand...

I do not practice (I practice any place where you have to give an e-mail
to enter)
In that view the posts appear in a scrollable
div very similar to mine. As with mine, you have to click within the
scrollable area before you can scroll it with the keyboard. Google's
programmers are highly respected and I have never heard them being
criticed for being abnormal.
:)


Taking out all the tables makes no difference to this at all. See my
mock-up at http://tinyurl.com/3bjpz3, which uses:
<body onload="document.getElementById('ScrollableContent').focus()">
Click to expand...

try it with up arrow key in first ... :-(
... and which contains no tables at all, and which, just like the
first mock-up I posted, allows you to scroll with the keyboard in
Firefox and IE without having to click in it first,
Click to expand...

only if cursor stays in main div ... (ScrollableContent ?)
once it has gone out ... not possible it comes back inside without clicking.

(ask myself if is a good idea to try to scroll by keyboard with a page
with such CSS (footer fixed in bottom of window))
And see my mock-up at http://tinyurl.com/2qenex, which uses:
<body
onload="document.getElementById('ScrollableContent').scrollIntoView(true)">

and which, just like the second mock-up I posted, does not allow you
to scroll with the keyboard unless you click in it first,
Click to expand...

Fx 2 : when I arrow-key stil to jump (I suppose footer or menu) I loose
definitively the cursor and by the fact : scroll by keys
Safari : I have to click in a P by top or bottom (and no cursor, but
keys work in those alone P)
Have you managed to set the focus to a scrollable div in Opera such
that one can scroll with the keyboard without clicking in it first?
Click to expand...

Oh poor, no !
Never I've the idea of a such feature ;-)
(keys working on my less tortuous pages)
 
M

marss

Hi marss




That doesn't work even in Firefox or IE, when I try it - please could
you see if I am doing something wrong? See my mock-up athttp://tinyurl.com/2luac4,
which uses your suggested method but doesn't work in IE or Firefox, as
opposed to my original mock-up athttp://tinyurl.com/3bxktgwhich does
at least work in those two browsers.

Dave
Click to expand...

Hi Dave

This is an example how test results depend on the test environment :)

When I tested I saved this page ( http://tinyurl.com/3bxktg ) using
IE.
It did not save any additional files (stylesheet, images).

In this case scrollIntoView method works properly.
Moreover I just found that focus method also works properly.
In the every browser you mentioned above.

Test example: http://marss.co.ua/temp/test.htm

So, javascript is not guilty :). The problem appeares at the moment
you attach the stylesheet.
You have to analyse in this direction, maybe rework stylesheet.


Regards,
Mykola
http://marss.co.ua - Casual ideas for web development
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to make a div select work? 5
Clickable Div Block 1
New coder with a focus on animating web banners 0
Trying to add text into an editable div that is in an iframe 0
How to set focus to a div? 1
How can I hide a div using an event listener on multiple checkboxes? 6
Set value after clicking in field 11
Pressing Tab to Focus on <div> 3

Members online

Total: 80 (members: 1, guests: 79)
Robots: 215

Forum statistics

Threads
473,982
Messages
2,570,186
Members
46,739
Latest member
Clint8040

Latest Threads

Top