Solved

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

Posted on 2003-11-12
1
200 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

691 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