Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Select Box titles: is this possible? 1

Status
Not open for further replies.
WebRic

WebRic

Technical User
Joined
Sep 21, 2004
Messages
95
Location
GB
Hi All,

Is there a way to give select box option individual titles, so that when a user hovers their mouse over the each of the list of values a note would appear?


Richard
 
Sort by date Sort by votes
This works in Firefox (tested in Windows, probably the same on a Macintosh as well):
Code: 
<select>
<option title="one" value="uno">1</option>
<option title="two" value="duo">2</option>
<option title="three" value="tierce">3</option>
</select>
IE 6 (and so, probably all IE for Windows) and Opera 8 (and so, probably all Opera for Windows) don't show the titles.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Thanks Jeff, problem is though, most of my users are on IE, is there an alternative or hack?
 
Upvote 0 Downvote
Here's a maybe-work-around for IE.

It employs an Iframe that sits on top of the drop-down.

When the drop-down is "expanded" or the "iframe" is expanded, it appears that the drop-down opens, but really it's a list of spans.

Anyway, the code isn't that great, nor is it too well documented, but have a look (it's a whole page, so you can try it out) and ask questions if you have them (if this is even anything along the lines of what you're after):

Code: 
<html>
<head>
<style>
#boxDiv{
 margin:0;
 padding:0;
 border:0;
}

#mySelect{
 top:0;
 left:0;
 width:200px;
 height:10px;
}

#myIframe{
 position:absolute;
 width:182px;
 height:21px;
 z-index:4;
}
</style>

<script>
var f;
function moveTextbox()
{
 f = document.getElementById("myIframe");
 var d = document.getElementById("mySelect");
 f.style.top = d.offsetTop;
 f.style.left = d.offsetLeft;
}

function expandMe()
{
 f.style.height = "100px";
}

function shrinkMe(span)
{
 if(!f.style.height || f.style.height == "21px")
 {
  expandMe();
  return;
 }//end if
 else
 { 
  f.style.height = "21px";
  if(span)
  {
   var te = span.innerHTML;
   var ti = span.title;
   var s = document.frames['myIframe'].document.getElementById("chosen");
   s.innerHTML = te;
   s.title = ti;
  }//end if
 }//end else
}//end shrinkMe()
</script>
</head>

<body onload='moveTextbox()'>

<div id='boxDiv'>
<select id='mySelect' onclick='setTimeout("document.getElementById(\"myIframe\").focus();shrinkMe();",0);'>
</select>
</div>

<iframe id='myIframe' scrolling='no'></iframe>
<script>

var frameHTML = "<html><head><style>#myText{position:absolute;top:0;left:0;width:182px;} span{cursor:hand;width:182px;}#chosen{border-bottom:1 solid black;}</style></head><body><div id='myText'></div></body></html>";

document.frames['myIframe'].document.write(frameHTML);

var fd = document.frames['myIframe'].document.getElementById("myText");

var fdInnerHTML = "<span id='chosen' title='' onclick='parent.shrinkMe(this);'>Choose one...</span><br />";

fdInnerHTML += "<span title='' onclick='parent.shrinkMe(this);'>Choose one...</span><br />";

fdInnerHTML += "<span title='one' onclick='parent.shrinkMe(this);'>one</span><br />";

fdInnerHTML += "<span title='two' onclick='parent.shrinkMe(this);'>two</span><br />";

fdInnerHTML += "<span title='three' onclick='parent.shrinkMe(this);'>three</span><br />";

fd.innerHTML = fdInnerHTML;
document.frames['myIframe'].document.close();
</script>
</body>
</html>

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Upvote 0 Downvote
I suppose you could replace the SELECT box with a .gif of the arrow placed immediately next to the IFRAME. 'would save a lot of trouble! Leave it to me to overly-complicate things!

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Upvote 0 Downvote
Cheers dave, thats a funky work around.

R
 
Upvote 0 Downvote
Thanks.

Here's better... with a placeholder for a fake drop-down arrow and highlighting of the "drop-down" options (and more code-comments).

Code: 
<html>
<head>
<style>
#myIframe{
 width:182px;
 height:21px;
}

#fakeArrow{
 visibility:hidden;
 position:absolute;
}
</style>

<script>
var f;
function init()
{
 f = document.getElementById("myIframe");

 //position arrow image
 var a = document.getElementById("fakeArrow");
// a.style.top = f.offsetTop;
// a.style.left = f.offsetLeft + f.offsetWidth;
 a.style.height = f.offsetHeight;
 a.style.width = a.offsetHeight;
 a.style.visibility = 'visible';
}//end init()

//opens up "drop-down"
function expandMe()
{
 f.style.height = "100px";
}//end expandMe()

var highlightedObject = null;

//closes or opens "drop-down", depending on current state
function shrinkMe(span)
{
 //if first time here or in collapsed state:
 if(!f.style.height || f.style.height == "21px")
 {
  expandMe();
  return;
 }//end if
 else //in expanded state
 { 
  f.style.height = "21px";

  if(span) //param not sent when fakeArrow clicked
  {
   var te = span.innerHTML;
   var ti = span.title;
   var s = document.frames['myIframe'].document.getElementById("chosen");
   s.innerHTML = te;
   s.title = ti;
  }//end if

  hightlightObject();
 }//end else
}//end shrinkMe()

//unhighlights currently highlighted object AND
// highlights parameter object (if sent)
function hightlightObject(obj)
{
 //un-highlight previous hightlighted object
 if(highlightedObject)
 {
  highlightedObject.style.backgroundColor = 'white';
  highlightedObject.style.color = 'black';
  highlightedObject = null;
 }//end if

 //hightlight current object
 if(obj)
 {
  obj.style.backgroundColor = 'blue';
  obj.style.color = 'white';
  highlightedObject = obj;
 }//end if
}//end hightlightedObject(obj)
</script>
</head>

<body onload='init()'>

<iframe id='myIframe' scrolling='no'></iframe>
<img id='fakeArrow' src='fakeArrow.gif' onclick='shrinkMe();' />

<script>
//build skeleton of iframe
var frameHTML = "<html><head>";
frameHTML += "<style>";
frameHTML += "#myText{position:absolute;top:0;left:0;width:182px;}";
frameHTML += "span{cursor:hand;width:182px;}";
frameHTML += "#chosen{border-bottom:1 solid black;}";
frameHTML += "</style></head>";
frameHTML += "<body><div id='myText'></div></body>";
frameHTML += "</html>";

document.frames['myIframe'].document.write(frameHTML);

//insert "drop-down" options (spans)
var fd = document.frames['myIframe'].document.getElementById("myText");

var fdInnerHTML = "<span id='chosen' title='' onclick='parent.shrinkMe(this);'>Choose one...</span><br />";

fdInnerHTML += "<span title='' onclick='parent.shrinkMe(this);' onmouseover='parent.hightlightObject(this);'>Choose one...</span><br />";

fdInnerHTML += "<span title='one' onclick='parent.shrinkMe(this);' onmouseover='parent.hightlightObject(this);'>one</span><br />";

fdInnerHTML += "<span title='two' onclick='parent.shrinkMe(this);' onmouseover='parent.hightlightObject(this);'>two</span><br />";

fdInnerHTML += "<span title='three' onclick='parent.shrinkMe(this);' onmouseover='parent.hightlightObject(this);'>three</span><br />";

fd.innerHTML = fdInnerHTML;

document.frames['myIframe'].document.close();
</script>
</body>
</html>

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Upvote 0 Downvote
Thanks, Dave. That would have come in useful last week. I didn't have time to worry about it, so I worked around it.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Consider that further modifications are needed to work in Firefox and Opera (and perhaps elsewhere). [It's CLOSE in these browsers, but not quite what it is in IE6]

'glad you like it though!

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Upvote 0 Downvote
In my case that's not an issue. IE-only compatibility is fine.

What I really needed was a "combox-box" - a list box for selection and a text field for new entries. My solution was a little simpler that yours, but not as elegant. I just added a "New Entry" option to the bottom of the select list (in red text). When that option is selected I just hide the select list and show a text box instead, approximately the same size and postion (I couldn't get it exact, it's about a pixel off). I also show a button next to the text box that, when clicked, hides the text box and shows the select list again. Not ideal, but I was rushed to finish the job and it works. It's also in an obscure part of the application where it is unlikely to be seen by more than a few people.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question Question
Buttons not aligned after another button is clicked
Replies
2
Views
682
gmmastros
gmmastros
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
chikwendu
  • Locked
  • Question Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
394
chikwendu
chikwendu
berkshirea
  • Locked
  • Question Question
Dropdown, Select, Required
Replies
8
Views
787
berkshirea
berkshirea
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
952
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top