473,320 Members | 2,164 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

in Select Option entries are cut on the right side if they're too long

I use a select box with a fix width (via stylesheet).
So some of the entries are cut on the right side if they're too long.
Is there a way to display them complete like a tool tip on a mouseover?



If I have written code as :-


[HTML]<Select name="selName" style="width: 50">

<OPTION value="">Ball Valve </OPTION>
<OPTION value="">Butterfly Valve </OPTION>
</Select>
[/HTML]
in the browser, in select box it displays Ball Valve in full as written but when some text woth longer length , it cuts it off.

as Butterfly Valve gets only displayed as -- Butterfly v

so , on page display itself....(not any , onChane,, event but onMouseOver..) , i want to show all texts with longer length as ToolTip...

thank u.....
Raghavendra Mahendrakar
Jan 5 '07 #1
9 11632
b1randon
171 Expert 100+
I use a select box with a fix width (via stylesheet).
So some of the entries are cut on the right side if they're too long.
Is there a way to display them complete like a tool tip on a mouseover?



If I have written code as :-


[HTML]<Select name="selName" style="width: 50">

<OPTION value="">Ball Valve </OPTION>
<OPTION value="">Butterfly Valve </OPTION>
</Select>
[/HTML]
in the browser, in select box it displays Ball Valve in full as written but when some text woth longer length , it cuts it off.

as Butterfly Valve gets only displayed as -- Butterfly v

so , on page display itself....(not any , onChane,, event but onMouseOver..) , i want to show all texts with longer length as ToolTip...

thank u.....
Raghavendra Mahendrakar
I've seen this before and in my app I could definitely use the ability to make that text wrap, if not complete with a tooltip. I hope someone has an answer b/c I don't know. I'm going to do some research though.
Jan 5 '07 #2
b1randon
171 Expert 100+
I've seen this before and in my app I could definitely use the ability to make that text wrap, if not complete with a tooltip. I hope someone has an answer b/c I don't know. I'm going to do some research though.
Here's what I'm going to use from now on. It is a script that lets the select box expand an contract.
Expand|Select|Wrap|Line Numbers
  1. var lilPx = "200px"; //size of small select box
  2. var bigPx = "600px"; //size of large select box
  3. var prefix = 'bs';   //prefix used on all select box IDs
  4.  
  5. document.onmouseover = shrinkAll; //handles abandoned selections (no change)
  6.  
  7. function resize(id){
  8.     //get the element in question
  9.     var elem = document.getElementById(id);
  10.  
  11.     //dynamically init/assign the holder variable
  12.     var holder = eval("hold"+id);
  13.  
  14.     //if select not being held open
  15.     if (!holder){
  16.         //go big->small or small -> big
  17.         if(elem.style.width == bigPx)
  18.             elem.style.width = lilPx;
  19.         else    
  20.             elem.style.width = bigPx;
  21.     }else{
  22.         elem.style.width = bigPx;
  23.     }
  24. }
  25.  
  26. function hold(id){
  27.     //swap the hold value, dynamic of course
  28.     eval("hold" + id + " = !hold" + id);
  29.  
  30.     //change size if necessary
  31.     resize(id);
  32. }
  33.  
  34. function shrink(id){
  35.     //get element to shrink
  36.     var elem = document.getElementById(id);
  37.  
  38.     //set width to small
  39.     elem.style.width = lilPx;
  40.  
  41.     //unhold
  42.     eval("hold" + id + " = false");
  43. }
  44.  
  45. function shrinkAll(e){
  46.     //be sure we have the real src, not a bubble or trickle!
  47.     if (!e) var e = window.event;
  48.     var target = (window.event) ? e.srcElement : e.target;
  49.  
  50.     //shrink em all except that one that was the source (possibly)
  51.     var selects = document.getElementsByTagName('select');
  52.     for(i=0; i<selects.length; i++){
  53.         if(selects[i].id.substring(0,prefix.length) == prefix){
  54.  
  55.             //shrink if it wasn't the source (make sure the src isn't parent for <option> in mozilla)
  56.             if(selects[i].id != target.id && selects[i].id != target.parentNode.id ){
  57.                 shrink(selects[i].id);
  58.             }
  59.         }
  60.     }
  61. }
  62.  
[HTML]
<html>
<head><script type="text/javascript" src="script.js"></script></head>
<body onload="" id="body">
<div id="outtie"></div>
<select style="width:200px;" id="bs1" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option>00004546353 - MAKROLON TANK TRUCK</option>
<option>00004567435 - 500 BARRELS OF POLYOL 50 KG ea</option>
<option>00056463543 - POLYURETHANE BLEND</option>
<option>00005464354 - 50% ACID SOLUTION</option>
<option>00056875343 - 50 PALLETS OF RANDOM CHEMICALS</option>
</select>
<br />
<select style="width:200px;" id="bs2" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option>00004546353 - MAKROLON TANK TRUCK</option>
<option>00004567435 - 500 BARRELS OF POLYOL 50 KG ea</option>
<option>00056463543 - POLYURETHANE BLEND</option>
<option>00005464354 - 50% ACID SOLUTION</option>
<option>00056875343 - 50 PALLETS OF RANDOM CHEMICALS</option>
</select>
</body>
</html>
[/HTML]
Let me know if you have problems implementing it. ;)
Jan 5 '07 #3
Hi,

Thankyou very much for your code. It's very very worthful for me.

But i am experimenting on this way...

If i want to insert an image, after the dropdown option :

[HTML]<H1>DIV with Hidden</H1>
<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px"><SELECT title=select >
<option selected>Testing Testing </option>
<option title="This text should appear in a tooltip popup, but does not.">Testing </option>
<option>Testing Testing </option>
<option>Testing Testing Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing Testing Testing Testing Testing Testing Testing</option>
<option>Testing </option>
</SELECT>
</DIV>
[/HTML]
It's showing the hidden div tag. After the DIV Tag, how to insert an rollover image, which should look and feel works like a dropdown menu... When i click on the menu arrows, the dropdown menu should be visiable as the normal menu.

Is it possible....

Waiting for ur reply...
Jan 8 '07 #4
b1randon
171 Expert 100+
Hi,

Thankyou very much for your code. It's very very worthful for me.

But i am experimenting on this way...

If i want to insert an image, after the dropdown option :

<H1>DIV with Hidden</H1>
<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px"><SELECT title=select >
<option selected>Testing Testing </option>
<option title="This text should appear in a tooltip popup, but does not.">Testing </option>
<option>Testing Testing </option>
<option>Testing Testing Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing Testing Testing Testing Testing Testing Testing</option>
<option>Testing </option>
</SELECT>
</DIV>

It's showing the hidden div tag. After the DIV Tag, how to insert an rollover image, which should look and feel works like a dropdown menu... When i click on the menu arrows, the dropdown menu should be visiable as the normal menu.

Is it possible....

Waiting for ur reply...
I'm not really sure what you mean. Do you want replace the select completely or are you trying to build some external controls for it or what?
Jan 8 '07 #5
Hi,

If you see this code

[HTML]<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px">
<SELECT title=select>
<option selected>Testing Testing </option>
<option>Testing </option>
<option>Testing Testing </option>
<option>Testing Testing Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing Testing Testing Testing Testing Testing Testing</option>
<option>Testing </option>
</SELECT>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','up1.gif',1) "><img src="down1.gif" name="Image1" width="17" height="20" border="0"></a></DIV>
[/HTML]
When i insert the image inside the DIV layer, when i click on the image, the select options should be visiable the option values. And the click function should work through scripts.

How to define that...

waiting for ur reply...



I'm not really sure what you mean. Do you want replace the select completely or are you trying to build some external controls for it or what?
Jan 9 '07 #6
Hi,

Thank you very very much for your wonderful script. It's working WOW... I just added DIV layer to fix the width.

[HTML]<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px">
<select class="dropDownLong" name="cusrDtls_DT_FMT" style="width:200px;" id="bs1" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option value="02/" selected>Short Date Format Short Date Format Short Date Format</option>
<option value="03/">Long Date Format</option>
<option>Long Date FormatLong Date Format</option>
<option>Long Date FormatLong Date FormatLong Date FormatLong Date Format</option>
<option>Long Date FormatLong Date FormatLong Date Format</option>
<option>Long Date FormatLong Date Format</option>
<option>Long Date FormatLong Date Format</option>
</select></div>
[/HTML]
But now, whenever i select the menu and using to view UP and DOWN arrows from my keyboard, it's alternatively changing the width of the menu. Why this happening. Is there any way to fix this...

Waiting for your reply.




I'm not really sure what you mean. Do you want replace the select completely or are you trying to build some external controls for it or what?
Jan 9 '07 #7
b1randon
171 Expert 100+
Hi,

Thank you very very much for your wonderful script. It's working WOW... I just added DIV layer to fix the width.

<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px">
<select class="dropDownLong" name="cusrDtls_DT_FMT" style="width:200px;" id="bs1" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option value="02/" selected>Short Date Format Short Date Format Short Date Format</option>
<option value="03/">Long Date Format</option>
<option>Long Date FormatLong Date Format</option>
<option>Long Date FormatLong Date FormatLong Date FormatLong Date Format</option>
<option>Long Date FormatLong Date FormatLong Date Format</option>
<option>Long Date FormatLong Date Format</option>
<option>Long Date FormatLong Date Format</option>
</select></div>

But now, whenever i select the menu and using to view UP and DOWN arrows from my keyboard, it's alternatively changing the width of the menu. Why this happening. Is there any way to fix this...

Waiting for your reply.
That is one downside to the behavior I built. It is because I used the onchange event handler and the arrow keys automatically fire onchange. Unfortunately I don't have the time to go digging back through it to improve. You're welcome to have a shot at it yourself. Just post it back here if you figure it out.
Jan 9 '07 #8
njcu
1
Having a couple problems implementing... I'm using this script with some dynamically created results and the first problem I'm having is that the
Expand|Select|Wrap|Line Numbers
  1. document.onmouseover = shrinkAll;
line is grinding the page to a halt, pretty much crashing the browser, as there alot of fields (bout 500)..
Second problem I'm having (once i've commented the mouseover/shrinkAll line)seems to be with the eval function
Expand|Select|Wrap|Line Numbers
  1. var holder = eval("hold"+id);
Even though "bs123" is a valid id on the page it keeps giving me an error message like; "bs123" is undefined

Code obviously works when I don't mix with my own but I'd like to get it too work properly... any insight?
Dec 24 '07 #9
acoder
16,027 Expert Mod 8TB
Second problem I'm having (once i've commented the mouseover/shrinkAll line)seems to be with the eval function
Expand|Select|Wrap|Line Numbers
  1. var holder = eval("hold"+id);
Even though "bs123" is a valid id on the page it keeps giving me an error message like; "bs123" is undefined
Can you post some of your HTML code? There's no need to use eval for this. You could use something like window["hold" + id].
Dec 26 '07 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

8
by: Michael Winter | last post by:
In a recent post ("About C error" by Victor, 21 Sep 2003), comments were made about the poster's use of macros. What I would like to know is why they are considered bad? I'm not referring to...
1
by: metsymani | last post by:
In my web application, I have a search screen coded in ASP.Net. The Search process takes lot of time. So, I need to show a wait page informing the user that "Search is in progress. Please wait" along...
7
by: Clinton Pierce | last post by:
I'm calling a method in another assembly that's supposed to return a string, and possibly that string might be empty. The code looks something like this: string d = r.Field("date").ToString();...
8
by: CDARS | last post by:
Hi all, I have a confusing question on ASP.NET cookies usage: 1> Response.Cookies("test").value = Now 2> Response.Write(Request.Cookies("test").value) 3> 4> Response.write("<hr>") 5>...
11
by: SuperHik | last post by:
Hi, I was wondering how to make a single .exe file, say some kind od clock, and be able to save some settings (alarm for example) into the same file? Basically make code rewrite it self... ...
34
by: davehowey | last post by:
I have a problem. I'm writing a simulation program with a number of mechanical components represented as objects. When I create instances of objects, I need to reference (link) each object to the...
2
by: beary | last post by:
I have a page with a form which has automatically generated fields, (which come from mysql column names). There could be any number of these fields, and I have no way of knowing exactly what they're...
1
by: Jim in Arizona | last post by:
I've been searching a lot for a simple example to search for a single account name in active directory but have been unable to find what I'm looking for. I did find an exmple (that worked) that...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.