blur select menu 3

[realtree]

I don't know much about javascript at all. I need to blur or set the focus elsewhere after clicking an option in a select box.(so that the mousewheel scrolls the page and not the options)

<select onChange="document.location = document.htmlMenu.htmlSelList.options [document.htmlMenu.htmlSelList.selectedIndex].value; document.htmlMenu.htmlSelList.blur();" name="htmlSelList" size="1" style="background:#eee; font-family:arial; font-size:12; color:#930030;">

it seems logical the way i put it. i also tried using a seperate onChange event. din't work.

 

[tsdragon]

You just need to set the focus to a different control. Try

document.[i]formname[/i].[i]control-name[/i].focus();

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[realtree]

there are no other forms or controls. i tried to use a 2x2 image set to 0x0 (it still appears on page) to focus on.

<input border="0" src="images/bs.gif" name="nul" width="0" height="0" type="image">

didn't work either.

 

[tsdragon]

Have you tried setting the focus to the form itself? I don't know if that would work or not, but it's worth a try.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[realtree]

I tried document.focus(), document.1.focus() (referring to <a name=1>), document.htmlMenu.focus() and document.htmlMenu.blur() all to no avail. I even tried switching the order of the statements. There's got to be an easy answer to this!

 

[trollacious]

Just add this.blur() at the end of the JS code in the select.

Lee

 

[realtree]

this.blur() doesn't do anything in either order of the statements. Is there something I'm missing out on? From what I understand, blur() sets the focus away from an object. Right? Am I using proper syntax or something like that?

 

[trollacious]

You can clean your code up a bit to:

<select onChange="document.location = this.options [this.selectedIndex].value; this.blur();" name="htmlSelList" size="1" style="background:#eee; font-family:arial; font-size:12; color:#930030;">

If you're changing the page, though, why do you need to set the focus away from the select?

Lee

 

[realtree]

I'm not changing the page, I'm navigating to bookmarks on the page. <a name=1> etc.

 

[realtree]

I was able to make it work on a different page that has another form called search with a textbox called string - as long as I put the focus() method first...

<select name="htmlSelList" onChange="document.search.string.focus();document.location = this.options [this.selectedIndex].value;"

This doesn't really count as a solution, but it helps define the 'rules'.
What would be good now is an invisible form object for which the focus() method is valid, or any other object that takes the focus() method.

 

[MOrac]

What you can do is to focus on the bookmark to which you are navigating. All <a> tags can take focus, even 'invisible' ones containing no text and having no href. In fact, by focussing on an <a> tag you will actually achieve the page navigation you desire without even having to set the location.href - any object which is focussed upon will be moved into the viewport in exactly the same manner as with the tag-location call you are using. A code snippet:

function focus_anchor(a) {
  var i;

  for (i = 0; i < document.anchors.length; i += 1) {
    if (document.anchors[i].name == a) {
      document.anchors[i].focus();
      return true;
    }
  }
  return false;
}

and then call this from the select box with:

<select onChange="focus_anchor(this.options[this.selectedIndex].value);">

having changed the value-list of your select box to just the tag-name (no url, no #, just the contents of the <a name="..."> tags.

 

[MOrac]

Incidentally, your original problem is probably based around the fact that changes to the location object can be counted as page-reloads, thus the VM is permitted to stop processing commands after the location change is requested. You may be able to get the original code to work if you only change the anchor-tag part of the location object - as in:

window.location.hash = '#...'; this.blur();

again using only the tag-names, not the url, although this time with a leading '#'. I have not tested this theory, however but this should give you some idea of what was going on, anyway.

 

[realtree]

Thanks to all of you for all your help. I got the thing to work already, and MOrac's solution is by far the most efficient and sensible way - I might fix it that way instead.

But overall, my knowledge of javascript in the last 2 weeks has shot up about %5000. It's really not that different from C++... just tailored for the www.