?
Solved

SELECT Behaviour

Posted on 2004-04-03
7
Medium Priority
?
3,088 Views
Last Modified: 2008-02-01
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
Comment
Question by:brgivens
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10749386
<quote>
Figuring out which item the mouse is over is fairly straightforward.
</quote>

How would you do that?
0
 
LVL 7

Author Comment

by:brgivens
ID: 10749476
<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
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10749951
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Assisted Solution

by:VincentPuglia
VincentPuglia earned 240 total points
ID: 10752328
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
 
LVL 7

Author Comment

by:brgivens
ID: 10752599
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
 
LVL 25

Accepted Solution

by:
devic earned 260 total points
ID: 10752671
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
 
LVL 7

Author Comment

by:brgivens
ID: 10752701
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

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question