...

View Full Version : is there any way to mimic the "alt" or "title" behaviors on option?



umen1
10-10-2004, 03:41 PM
Hello
is there any way to mimic the way "alt" or "title" properties works on html objects
but on select box options , that is when i select option there will be title with the option text in it.
thanks

jkd
10-11-2004, 02:51 AM
Actually try it. Gecko-based browsers have no problem with it. I know IE can't do it, but I am unsure with Opera and KHTML...

umen1
10-11-2004, 08:15 AM
well what can i do but our application is only working with IE.
i need to find some alternative way ..
there must be something out there...

Kor
10-22-2004, 09:27 AM
Hm. Unfortunately it looks like IE doesn't accept any event (onfocus or onmouseover) inside <option> tag, so I am affraid the only crossbrowser solution could be using onchange event...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#txt{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #FFFFCC;
display: none;
padding: 2px;
border: 1px solid #0000CC;
position: absolute;
z-index: 10;

}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function showT(s,t){
if(s.offsetParent){
pLeft=s.offsetParent.offsetLeft;
pTop=s.offsetParent.offsetTop
}else{pLeft=0;pTop=0}
var x=s.offsetLeft+s.offsetWidth+pLeft;
var y=s.offsetTop+pTop;
var a=document.getElementById('txt');
a.innerHTML='';
a.style.display='none';
if(s.selectedIndex>0){
a.appendChild(document.createTextNode(t));
a.style.left=x;
a.style.top=y
a.style.display='block';
}
}
</script>
</head>
<body leftmargin="0" topmargin="0">
<select onchange="showT(this,this.options[this.selectedIndex].text)">
<option selected>Select item</option>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<div id="txt"></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum