Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3094
  • Last Modified:

SELECT Behaviour

Hi,

<select size=3>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>

When the mouse is over the control, I'd like to be able to select (ie set selected=true) the option it's hovering over.

In other words, I'd like it to work exactly the same way the list portion of a dropdown (single item SELECT) works.

Figuring out which item the mouse is over is fairly straightforward.

-> I'm having a problem figuring out the index of the topmost visible option.

ie, if the example SELECT was scrolled to the bottom, the index of the topmost visible item is 1.  I can't seem to find a property of the SELECT or OPTION that enables me to determine this.

Anyone?
0
brgivens
Asked:
brgivens
2 Solutions
 
lil_puffballCommented:
<quote>
Figuring out which item the mouse is over is fairly straightforward.
</quote>

How would you do that?
0
 
brgivensAuthor Commented:
<html>
<head>
<script language="javascript">
function mo() {var o; document.getElementById("say").innerHTML = Math.round(event.offsetY / (((o=document.getElementById("test")).offsetHeight-6) / o.size));}
</script>
</head>
<body>
<select id="test" size=3 onmousemove="mo();">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<div id="say"></div>
</body>
</html>
0
 
lil_puffballCommented:
I don't think you can do it with a select, but it's definitely possible to simulate one with divs:

<style>
.opt{background-color:white;color:black;padding:2px;cursor:default;}
.over{background-color:316ac5;color:white;padding:2px;cursor:default;}
</style>

<script>
var y,prev=null,sel,t,h,opts;
function init(size){
sel=document.getElementById("select");
opts=sel.firstChild.getElementsByTagName("div");
t=sel.offsetTop;
h=opts[0].offsetHeight;
sel.style.height=h*size;
sel.firstChild.style.height=h*size;
sel.style.width=sel.firstChild.offsetWidth;
sel=sel.firstChild;
}
function selectOpt(){
var scr=sel.scrollTop;
var n=parseInt((y-t+scr)/h);
if(!opts[n]){return;}
if(prev==opts[n]){return;}


opts[n].className='over';
if(prev){prev.className='opt';}
prev=opts[n];
}
</script>

<body onmousemove="y=event.y;" onload="init(3);">

<div id=select style="border-style:solid;border-width:1;border-color:7f9db9;padding:1px;">
<div onmousemove="selectOpt(this);" style="border-style:inset;border-width:1;border-color:f1efe2;width:60;height:60;overflow:auto;">
<div class=opt>one</div>
<div class=opt>two</div>
<div class=opt>three</div>
<div class=opt>four</div>
<div class=opt>five</div>
</div></div>
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
VincentPugliaCommented:
Hi,

  I'm not positive as to what you are asking, but....
The first option in a select is 0, not 1.  So in your case, your options indices are: 0, 1, 2.

function mo()
{
  var o;
var x = Math.round(event.offsetY / (((o=document.getElementById("test")).offsetHeight-6) / o.size)) - 1;
  document.theForm.test.options[x].selected = true;
}
</script>
</head>
<body>
<form name="theForm">
<select id="test" name='test' size=3 onmousemove="mo();">

Vinny
0
 
brgivensAuthor Commented:
lil_puffball,

Thank-you for your effort on this, but I need to stick with the select.

VincentPuglia,

When mo() returns 0, is it referring to option "one" or "two"?

If the select is scrolled to the top, it will be "one"; if it's scrolled to the bottom, it will be "two"; my problem is, I don't know how to determine the scroll status.

Does that make more sense?
0
 
devicCommented:
brgivens, it works fine :)
-------------------------
<html>
<head>
<script language="javascript">
function mo(obj)
{
      if((obj.offsetWidth-event.clientX)<10)return
      var o;
      var s= Math.round(event.offsetY / (((o=document.getElementById("test")).offsetHeight-6) / o.size));
      obj.selectedIndex=s;
      document.getElementById("say").innerHTML = s;
}
</script>
</head>
<body>
<select id="test" size=3 onmousemove="mo(this);">
 <option>one</option>
 <option>two</option>
 <option>three</option>
 <option>four</option>
</select>
<div id="say"></div>
</body>
</html>
0
 
brgivensAuthor Commented:
Well, I'll be darned, it does! :P

The key is offsetY: It works a little differently than I thought it did.  I guess I answered my own question, but I wouldn't've realized it without devic & VincentPuglia's help; I'll split the points between you two.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now