Solved

displaying further information when selecting a value in Drop-down box

Posted on 2003-11-12
1
196 Views
Last Modified: 2010-04-09
Hi !

I'm using a drop-down box in a HTML-form:
Code :
<select style='font-size:10px' name='projects' class='general' >
   <option type='text' value='PJ01' selected>PJ01</option>
   <option type='text' value='PJ02'>PJ02</option>
</select>

The user can choose between "PJ01" and "PJ02". In order to give the user more information about the selected Projects, i want to display further information to the user somehow (e.g. next to the mouse-arrow..). If the user selects "PJ01" in the drop-down list then he should read the "help"-text : "Project 1 ...". If he selects "PJ02" he should read "Project 2...." . I know how to enable a helptext in textfields with the on mouseover-event but not with drop-down lists. So how can i achive this goal in a dropdown-list??
Thanks for any help  :-)

Best regards

Axel
0
Comment
Question by:the_real_axelf
1 Comment
 
LVL 15

Accepted Solution

by:
OMC2000 earned 250 total points
ID: 9730822
There is no way to display extended info for drop-down list items using standard tags.
You should make DIV with style like the following:
<div id="tips" style="display:none;position:absolute;width:200;height:100;">
</div>

then onchange event you should set desired text(innerHTML) to this div, set display block and define div's position like that:
divEl = document.getElementById("tips");
selEl = document.getElementById("mySel");
divEl.innerHTML = "extra info";
divEl.style.display = "block";
divEl.top = getAbsoluteOffsetTop(selEl) + 20;
divEl.left = getAbsoluteOffsetLeft(selEl) + 200;

and use functions like these:

    function getAbsoluteOffsetTop(obj) {
         var top = obj.offsetTop;
         var parent = obj.offsetParent;
         while (parent != document.body) {
              top += parent.offsetTop;
              parent = parent.offsetParent;
         }
         return top;
    }
   
     function getAbsoluteOffsetLeft(obj) {
         var left = obj.offsetLeft;
         var parent = obj.offsetParent;
         while (parent != document.body) {
              left += parent.offsetLeft;
              parent = parent.offsetParent;
         }
         return left;
    }

also you could add processing of on MouseOver and OnMouseOut to your selection in order to hide/show this tooltips.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

919 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now