Focus Form element in menu on mouseover??

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:40

Focus Form element in menu on mouseover??

Poster: jbruso
Dated: Monday June 20 2005 - 22:13:17 BST

I have this Login prompt working for the e-Services link in the top right corner of this page: http://dev.sheridan.edu/

I was wondering, is it possible to cause the user's cursor to focus on the first input box when they mouseover the e-services button? I'm not sure if that's asking too much of the DOM??

Thanks!

Poster: Ruth
Dated: Tuesday June 21 2005 - 1:45:27 BST

Hi,

I found this one item on searching. Don't know if it's what you want or not. This is in use on a popup but it would work in a regular menu also, as far as I know.

http://www.milonic.com/forum/viewtopic.php?p=26292

Ruth

Not working

Poster: jbruso
Dated: Tuesday June 21 2005 - 16:24:00 BST

I followed Andy's instructions but it is still not working (dev.sheridan.edu)

Here is my code:

JavaScript Function

Code:

<script>
function setFocus() 
{ 
setTimeout("document.forms.login.userName.focus()",100); 
}</script>

Menu Button Code with onFunction

Code:

aI("image=/images/tabs_eserv_new.gif;overimage=/images/tabs_eserv_new_over.gif;showmenu=eservicestop;url=/uportal/test.htm;onfunction=setFocus()");

SubMenu Login

Code:

with(milonic=new menuname("eservicestop")){      
style=eservicesStyle;
top="offset=-26";
left="offset=70";
align="right";
   aI("text=`<FORM onsubmit=doLogonWait() name=login method=post id=formMyVTLogon action=http://www-dev.sheridan.edu:8080/uPortal/Login><input value=login name=action type=hidden><table border=0 width=210 cellpadding=4 cellspacing=0><tr><td colspan=2><font color=#FF6600 size=3><strong>Log On</FONT><hr noshade color=#FF6600 size=1></td></tr><tr><td><font color=#FF3300 size=2><b><label for=logon-pid>User ID:</label></b></font></td><td><input maxlength=16 size=11 name=userName type=text ></td></tr><tr><td><font color=#FF3300 size=2><b><label for=logon-password>Password:</label></b></font></td><td><input maxlength=16 size=11 name=password type=password></td></tr><tr><td></td><td><input type=submit value='Log On'></td></tr><tr><td colspan=2 align=center><A href=/uportal/start.htm class=font1>Activate Your Account</A> <font size=1>|</font> <A href=/uportal/test.htm class=font1>Log On Help</A><BR><A href=/uportal/test.htm class=font1>What is e-Services?</A></td></tr></table></form>`;type=form;align=center;onbgcolor=;onborder=;");
   }

Poster: kevin3442
Dated: Wednesday June 22 2005 - 0:52:03 BST

Hi jbruso,

Quick glance... Your code looks OK, but I notice that your <FORM> has name=login and id=formMyVTLogon. In essence, the form is "labeled" two different ways. Does the id have to be formMyVTLogon? If not, try changing it to id=login, since the pertinent field is addressed as document.forms.login.userName in your setFocus() funciton. If id does have to be formMyVTLogon, then try changing the form's name to name=formMyVTLogon, and use that label in your setTimeout() call; i.e., document.forms.formMyVTLogon.userName.

Hope that helps,

Kevin

Nope

Poster: jbruso
Dated: Wednesday June 22 2005 - 16:10:47 BST

Hi Kevin, :cry:

I was thinking that too since the id tag is just suppoused to replace the name tag, but it's still not working. I'm gonna repaste the code, just in case some detail has changed.

JavaScript Function

Code:

<script>
function setFocus() 
{ 
setTimeout("document.forms.login.userName.focus()",100); 
} 
</script>

Menu Button Code with onFunction

Code:

aI("image=/images/tabs_eserv_new.gif;overimage=/images/tabs_eserv_new_over.gif;showmenu=eservicestop;url=/uportal/test.htm;onfunction=setFocus()");

SubMenu Login

Code:

with(milonic=new menuname("eservicestop")){      
style=eservicesStyle;
top="offset=-26";
left="offset=70";
align="right";
   aI("text=`<FORM onsubmit=doLogonWait() name=login method=post action=http://www-dev.sheridan.edu:8080/uPortal/Login><input value=login name=action type=hidden><table border=0 width=210 cellpadding=4 cellspacing=0><tr><td colspan=2><font color=#FF6600 size=3><strong>Log On</FONT><hr noshade color=#FF6600 size=1></td></tr><tr><td><font color=#FF3300 size=2><b><label for=logon-pid>User ID:</label></b></font></td><td><input maxlength=16 size=11 name=userName type=text ></td></tr><tr><td><font color=#FF3300 size=2><b><label for=logon-password>Password:</label></b></font></td><td><input maxlength=16 size=11 name=password type=password></td></tr><tr><td></td><td><input type=submit value='Log On'></td></tr><tr><td colspan=2 align=center><A href=/uportal/start.htm class=font1>Activate Your Account</A> <font size=1>|</font> <A href=/uportal/test.htm class=font1>Log On Help</A><BR><A href=/uportal/test.htm class=font1>What is e-Services?</A></td></tr></table></form>`;type=form;align=center;onbgcolor=;onborder=;");
   }

Poster: kevin3442
Dated: Wednesday June 22 2005 - 16:47:10 BST

Hi jbruso,

I'll have a closer look at the code. Meanwhile... I was thinking (dangerous sometimes)...

I see that you have an overfilter defined for that menu. This is totally a shot in the dark, but... the delay in the Fade() filter you use in the overfilter property is 0.2 (two tenths of a second). The delay in your setTimeout() call is 100... that's in milliseconds, so only one tenth of a second. So... the call to the focus() method is happening at .1 sec, and the menu is fully visible at .2 sec. Is it possible that, because of the delay imposed by the Fade() filter, the setTimeout() call to focus() the field is firing too soon, before the field is available? Like I said, a long shot. You could test this theory by (a) eliminatig the overfilter for that menus, or (b) increasing the delay in the setTimeout()... try something crazy, like 1000.

Cheers,

Kevin

Poster: Ruth
Dated: Wednesday June 22 2005 - 17:24:27 BST

Hi,

The focus is working in Mozilla.

Now, I have no idea what exactly this means, but I opened your page in my editor which is set for IE as the main view browser and when I moused over the form login button I got this message

Code:

Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus

I have no clue if this has to do with the editor, but I've opened other pages which use a focus and never got that message.

Ruth

AH!!

Poster: jbruso
Dated: Wednesday June 22 2005 - 18:50:50 BST

KEVIN!!

I practically chuckled at your suggestion, and then tried it and it worked!! That is too funny. I had been playing with the milliseconds too, but only in 1-100, not 1000. Thanks for the keen eye there bud!

Ruth, are you still getting that message?? I'm not in IE... although I was once before.

Thanks guys and gals!

John

oh wait

Poster: jbruso
Dated: Wednesday June 22 2005 - 18:56:56 BST

ok, now this is just cruel

The cursor does focus to the input box, but if you try typing the focus changes to other elements instead of just writing inside the input box... which totally defeats the purpose of the focus..

ok, just had an idea, that perhaps the kestroke.js file is causing this behavior... and, yes, it is... I removed the link to it and now I can focus on the input box and type in it at the same time.

Poster: Ruth
Dated: Wednesday June 22 2005 - 19:21:16 BST

Now all you have to do is decide which is the more important, having tab access to the menu or having focus in the login box. Decisions, decisions

Ruth

Industrial Strength JavaScript and DHTML Menus

Focus Form element in menu on mouseover??

Not working

Nope

AH!!

oh wait