|
|
Hi All,
i want to add a tool tip to the drop down using layers.i got the script from internet and am trying to do but facing some problems.
i am having a series of drop down boxes one by one in a row. my tool tip script works fine if there is only 1 drop down box.when i have a set of drop downs some part of my tool tip is hiding behind oneof the drop down(see attachement).
i want it to be shown on top of the drop down box. how can i achieve this.
pls guide me.
this is the script i have used :
<layer name="nstip" width="1000px" bgColor="lightyellow" > </layer> <!-- placed in Head-->
<div id="tooltip2" style="VISIBILITY: hidden; CLIP: rect(0px 500px 50px 0px); POSITION: absolute; BACKGROUND-COLOR: lightyellow; z-index: 1000"></div> <!--Body-->
function showtip2(current,e,text)
{
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<P style="border:1px solid black">'+text+'</P>';
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10;
document.all.tooltip2.style.width = text.length * 7 + 5; // where 7 = size of font in points.
document.all.tooltip2.style.visibility="visible";
}
else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>');
document.tooltip2.document.nstip.document.close();
document.tooltip2.document.nstip.left=0;
//currentscroll=setInterval("scrolltip()",100);
document.tooltip2.left=e.pageX+10;
document.tooltip2.top=e.pageY+10;
document.tooltip2.visibility="show";
}
thanks & regards,
Mahesh
|
|
|
|
I assume you ask for dropdown in IE.
I have to disappoint you, but the answer is: you can't.
In Internet Explorer dropdown controls are not rendered by the IE engine, but the native Windows GUI engine. To ensure their visibility on the webpages, Microsoft decided (or more likely were forced) to put these controls on top of all other content. In result any drawing that sould appear on top of them, appear below regardles their z-index property or cration order. To fix some misbehavior, most ot the dhtml developers create scripts to hide the dropdowns when another element might appear above.
More complex scripts check the position of such elements and wither they overlap a dropdown to hide only the colliding ones.
I perosnaly see a way to further improve that workarrownd to partialy hide the collision areas from the dropdowns, using the clip css property, which is dynamically calculated by a dhtml script. But such a complex scripting usually doesn't worth it.
The best and easiest workaround i recommend is to put the tip outside (and easiest for caluclation is to put it below) the dropdown. That is what i would do.
<Added>
I assume you mean for "dropdowns in IE".
I'm sorry to disappoint you, but the answer is: you can't put them below.
In Internet Explorer dropdown controls are not rendered by the IE engine, but the native Windows GUI engine. To ensure proper visibility of the webpages, Microsoft decided (or more likely were forced) to put these controls on top of all other content. In result any drawings that should appear on top of them, appear below, regardles any z-index properties and creation order.
This was not a problem in the ages of static html, but sometimes it is a real pain for the dynamic content. AFAIK the first to invent a workaround are Microsoft themselves.
To fix this missbehavior the dhtml developers use scripting to hide the dropdowns when another element might appear above. You may remember microsoft.com some years ago, when the main site had black dropdown menus in the top right corner. Experienced user could notice that when the mouse was over that menus, all the dropdowns inside the page disappear, and reappear when the mouse moves out of the menu area.
More recent scripting (and more resource consuming) involve calculating of the position of the floating elements and wither they overlap a dropdown to hide only the colliding ones.
I perosnaly see a way to further improve that workaround to partialy hide(cut) the collision areas from the dropdowns, using the CSS clip property, which should be dynamically calculated by the dhtml script. Anyway IMHO it doesn't worth the time and cpu usage.
While hiding the dropdown doesn't seem an option in your case, the best and easiest workaround i see is to put the "tip" outside the dropdown. That is what i would do.
I cant provide "fixed code" because yours is incomplete.
Hope all that help.
|
|
|
|
thanks alot Mr.venimus for ur reply.
regards,
Mahesh P
|
|
|
|
There are some tricks you can do to overcome the select list issue in IE, but they can be quite hard to implement. This Codetoad Forum thread discusses some of these techniques.
http://www.codetoad.com/forum/20_22736.asp
|
|
|
|
|
|
|
|
|
|
itsmaheshp
Troy Wolf
