[JS, IE-Bug] tooltip by select option multiple - Softwareontwikkeling

woensdag 28 maart 2007 15:05

Acties:

Verwijderd

Topicstarter

Ik ben bezig om een tooltip te laten verschijnen bij een <SELECT MULTIPLE> object. Hiervoor gebruik ik de volgende code:

PHP:

 <HEAD> 
<STYLE>
#tooltip {
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: lightyellow;
}
</STYLE>
<SCRIPT>
var descriptions = {
'1': 'This is number 1.',
'2': 'This is number 2.',
'3': 'This is number 3.'
}
function showTooltip (nextTo, tip){
tip=(!tip.target?event.srcElement.value:tip.target.value);
var tt = document.getElementById('tooltip');
tt.innerHTML = descriptions[tip];
tt.style.left = (getPageLeft(nextTo) + nextTo.offsetWidth) + 'px';
tt.style.top = getPageTop(nextTo) + 'px';
tt.style.visibility = 'visible';
}



function hideTooltip () {
document.getElementById('tooltip').style.visibility = 'hidden';
} 
function getPageLeft (el) {
var left = 0;
do 
left += el.offsetLeft;
while ((el = el.offsetParent));
return left;
}
function getPageTop (el) {
var top = 0;
do 
top += el.offsetTop;
while ((el = el.offsetParent));
return top;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="tooltip"></DIV>
<SELECT MULTIPLE ID="aSelect" ONMOUSEOVER="showTooltip(this,event)"
 ONMOUSEOUT="hideTooltip();"
>
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
</SELECT>
 
</BODY>

nou heb ik alleen de volgende problemen bij IE (firefox werkt perfect):

Bij een gewoon onmouseover event blijft de variabele tip leeg (undefined geeft de tooltip)
Wanneer ik de <OPTION> selecteer, en dan onmouseover doe geeft hij wel de waarde

mogelijke oplossingen (maar hoe?)

wellicht weet iemand hoe ik de variabele wel gevuld krijg bij een onmouseover event
een onclick event zou de truuk ook doen, alleen word de variabele tip (onder IE) pas gevult als ik de tweede keer op die regel klik (de eerste keer geeft hij nogsteeds undefined)

woensdag 28 maart 2007 15:15

Acties:

crisp

Devver

Pixelated

Dat is in IE niet mogelijk met een gewoon SELECT-element:

HTML:

<script type="text/javascript">

function doiets(e)
{
    window.status = (e.target || e.srcElement).nodeName;
}

</script>
<select multiple size=10 onmouseover="doiets(event)">
    <option value=1>1
    <option value=2>2
    <option value=3>3
    <option value=4>4
    <option value=5>5
    <option value=6>6
    <option value=7 onmouseover="alert(7)">7
    <option value=8>8
    <option value=9>9
    <option value=10>10
</select>

In IE blijft je event-target altijd de SELECT en nooit een OPTION. Verder ondersteund IE geen events op OPTION-elementen. Fact is dat een SELECT-element in IE gewoonweg niet native geimplementeerd is.

Intentionally left blank

woensdag 28 maart 2007 15:16

Acties:

Verwijderd

Topicstarter

eventuele alternatieven?

Wil (tijdelijk) een stukje extra informatie per option kunnen geven

woensdag 28 maart 2007 15:19

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op woensdag 28 maart 2007 @ 15:16:
eventuele alternatieven?

Wil (tijdelijke) een stukje extra informatie per option kunnen geven

Unobtrusive je select vervangen door een hip dynamisch HTML-geval die verder de functionaliteit van je oorspronkelijke select immiteerd

Intentionally left blank

woensdag 28 maart 2007 15:24

Acties:

Verwijderd

Topicstarter

ik ben niet zo into de hippe dingen

... bestaat er een voorbeeldje van dat je op de plank hebt liggen ergens?

maar vergis ik me nu of gaat dit balletje wel op voor een ONCLICK?

[ Voor 23% gewijzigd door Verwijderd op 28-03-2007 15:33 ]

woensdag 28 maart 2007 15:34

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op woensdag 28 maart 2007 @ 15:24:
ik ben niet zo into de hippe dingen ... bestaat er een voorbeeldje van dat je op de plank hebt liggen ergens?

Ik laat mijn brein doorgaans niet ergens op een plank liggen

Nee sorry, ik heb niets kant-en-klaars voor dit specifieke geval en als je het zo vraagt is dit uiteraard een script-request

Intentionally left blank

woensdag 28 maart 2007 15:37

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op woensdag 28 maart 2007 @ 15:24:
maar vergis ik me nu of gaat dit balletje wel op voor een ONCLICK?

Nee, toch niet helemaal; immers zal bij het selecteren van een optie de value-property van je SELECT gevuld worden en die lees je uit in je handler.

Intentionally left blank

woensdag 28 maart 2007 15:37

Acties:

Verwijderd

Topicstarter

maar hoe verklaar je dan dat het wel werkt? (door er twee keer op te klikken weliswaar)

[ Voor 164% gewijzigd door Verwijderd op 28-03-2007 15:39 ]

woensdag 28 maart 2007 15:44

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op woensdag 28 maart 2007 @ 15:37:
maar hoe verklaar je dan dat het wel werkt? (door er twee keer op te klikken weliswaar)

probeer maar uit:

HTML:

<select multiple size=10 onclick="alert(this.value)">
    <option value=1>1
    <option value=2>2
    <option value=3>3
    <option value=4>4
    <option value=5>5
    <option value=6>6
    <option value=7 onclick="alert('je klikt op 7!')">7
    <option value=8>8
    <option value=9>9
    <option value=10>10
</select>

De laatst geselecteerde optie werkt ook de value-property van het select-element bij. Echter zal een onclick op een option-element in IE nooit uitgevoerd worden.

Intentionally left blank

woensdag 28 maart 2007 15:48

Acties:

Verwijderd

Topicstarter

ik wil niet brutaal zijn... maar probeer jij dit eens onder IE (en even soms beetje doorklikken

)

HTML:

 <HEAD> 
<STYLE>
#tooltip {
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: lightyellow;
}
</STYLE>
<SCRIPT>
var descriptions = {
'1': 'This is number 1.',
'2': 'This is number 2.',
'3': 'This is number 3.'
}
function showTooltip (nextTo, tip){
tip=(!tip.target?event.srcElement.value:tip.target.value);
var tt = document.getElementById('tooltip');
tt.innerHTML = descriptions[tip];
tt.style.left = (getPageLeft(nextTo) + nextTo.offsetWidth) + 'px';
tt.style.top = getPageTop(nextTo) + 'px';
tt.style.visibility = 'visible';
}


function hideTooltip () {
document.getElementById('tooltip').style.visibility = 'hidden';
} 
function getPageLeft (el) {
var left = 0;
do 
left += el.offsetLeft;
while ((el = el.offsetParent));
return left;
}
function getPageTop (el) {
var top = 0;
do 
top += el.offsetTop;
while ((el = el.offsetParent));
return top;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="tooltip"></DIV>
<SELECT MULTIPLE ID="aSelect" ONCLICK="showTooltip(this,event)"
 ONMOUSEOUT="hideTooltip();"
>
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
</SELECT>
 
</BODY>

woensdag 28 maart 2007 15:51

Acties:

crisp

Devver

Pixelated

Wat ik wil zeggen is dat in IE event.srcElement altijd je SELECT is en niet de OPTION waarop je hebt geklikt. Derhalve is je positionering altijd tov je SELECT. Je SELECT heeft ook een value-property en die verwijst altijd naar de value van de laats-geselecteerde OPTION.

In andere browsers is e.target wel de op dat moment geklikte OPTION.

[ Voor 19% gewijzigd door crisp op 28-03-2007 15:52 ]

Intentionally left blank

woensdag 28 maart 2007 15:57

Acties:

Verwijderd

Topicstarter

ok begint beeeetje helder te worden.. de value van OPTION is dus niet in IE gebakken

met onDblClick en ONMOUSEOUT omzeil ik het probleem wel aardig voor nu, mochten er nog mensen zijn met brilliante ideeen.. hoor ik het graag

[ Voor 47% gewijzigd door Verwijderd op 28-03-2007 16:28 ]

Pagina: 1

Reageer