Focus Form element in menu on mouseover??

[jbruso]

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!

[Ruth]

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://milonic.com/forum/viewtopic.php?p=26292

Ruth

[jbruso]

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

Here is my code:

JavaScript Function

Code: Select all

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

Menu Button Code with onFunction

Code: Select all

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: Select all

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=;");
	}

[kevin3442]

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

[jbruso]

Hi Kevin,

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: Select all

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

Menu Button Code with onFunction

Code: Select all

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: Select all

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=;");
	}

[kevin3442]

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

[Ruth]

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: Select all

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

[jbruso]

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

[jbruso]

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.

[Ruth]

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