473,857 Members | 2,065 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Editable combobox with javascript (source included) - please feedback!

Hello!

This ist the source-code for an editable combobox implemented with
HTML,CSS and Javascript.

I have tested it with IE and Mozilla. But I don't know, if it will
work in other browsers (Opera, Konqueror, etc.) So I need your
feedback...

Regards
Oliver

--- SNIP ---

<html>
<head>
<style type="text/css">
<!--
div.cbhide {
position:absolu te;
visibility:hidd en;
overflow:hidden ;
height:0px;
}
div.cbshow {
position:absolu te;
visibility:visi ble;
overflow:visibl e;
}
table.combo {
width:100%;
border: 1px solid #000000;
}
#cbtext {
background-color:#FFFF99;
}
#cbbtn{
border-color:#FFFFFF;
border-width:2px;
border-style:outset;
cursor:pointer;
background-color:#CCCCCC;
text-align:center
vertical-align:middle;
margin:0px;
padding:0px;
height:100%;
}
td.passive {
color:#000000;
background-color:#FFFF99;
}
td.active {
color:#FFFFFF;
background-color:#0000FF;
}
-->
</style>

<script type="text/javascript">
<!--
function mousedown(obj) {
var select = document.getEle mentById('cbsel ect');
var temp = obj.target;
while(temp != null && temp != select) {
temp = temp.parentNode ;
}
if(temp == select) {
obj.target.hand leEvent(obj);
} else {
hide();
}
}

function hide() {
document.getEle mentById('cbsel ect').className ='cbhide';
document.getEle mentById('cbbtn ').onclick=show ;
document.onmous edown = null;
return true;
}

function show() {
var node = document.getEle mentById('cbtex t');
var x = Number(node.off setLeft) + Number(document .body.leftMargi n);
var y = Number(node.off setTop) + Number(node.off setHeight) +
Number(document .body.topMargin );
var w = Number(node.off setWidth)
var div = document.getEle mentById('cbsel ect');
div.className=' cbshow';
div.style.top = y;
div.style.left = x;
div.style.width = w;
document.getEle mentById('cbbtn ').onclick=hide ;
if(document.add EventListener) {
document.onmous edown = mousedown;
} else {
document.getEle mentById('cbbtn ').onblur=hide;
}
}

function select(td) {
td.className='p assive'
var text = td.firstChild.n odeValue;
document.getEle mentById('cbtex t').value = text;
hide();
}
//-->
</script>
</head>
<body>
<table class="comboinp ut" cellspacing="0" cellpadding="0" >
<tr class="comboinp ut">
<td class="comboinp ut"><input id="cbtext" type="text"
name="test"></td>
<td class="comboinp ut">
<button id="cbbtn" type="button"
onmousedown = "this.style.bor derStyle='inset '"
onmouseup = "this.style.bor derStyle='outse t'"
onmouseout = "this.style.bor derStyle='outse t'"
onclick="show() ">
<img src="open.gif">
</button>
</td>
<!-- <td class="comboinp ut">
<button type="button" onclick="alert( 'Click')">Click </button>
</td> -->
</tr>
</table>

<div id="cbselect" class="cbhide">
<table class="combo" cellspacing="0" cellpadding="0" >
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Apple</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Cherry</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Melon</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Lemon</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Peach</td>
</tr>
<tr class="option">
<td nowrap class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Plum</td>
</tr>
</table>
</div>
</body>
</html>
Jul 23 '05 #1
1 14550
Oliver Hoehle wrote:
Hello!

This ist the source-code for an editable combobox implemented with
HTML,CSS and Javascript.
Using a table to implement a select seems silly. Why not just put a
select under the text input that is shown when the button is clicked,
then when a selection is made, hide it again and put the selected text
into the text input?

Example below.

I have tested it with IE and Mozilla. But I don't know, if it will
work in other browsers (Opera, Konqueror, etc.) So I need your
feedback...
It sort of works in Safari, but:
[...] <style type="text/css">
<!--
Don't bother trying to hide scripts/styles
div.cbhide {
position:absolu te;
visibility:hidd en;
overflow:hidden ;
height:0px;
}
Why change the class when you want to hide something? Just use:

elementRef.styl e.display = "none";
div.cbshow {
position:absolu te;
visibility:visi ble;
overflow:visibl e;
}
and to show it again:

elementRef.styl e.display = "";

If you want to use visibility:

elementRef.styl e.visibility = "hidden";
elementRef.styl e.visibility = "visible";

[...] function mousedown(obj) {
var select = document.getEle mentById('cbsel ect');
You should include a document.all method for old IE (see the group
faq at <URL:http://www.jibbering.c om/faq>).

[...] function hide() {
document.getEle mentById('cbsel ect').className ='cbhide';
document.getEle mentById('cbbtn ').onclick=show ;
document.onmous edown = null;
return true;
}

If you just position your select in the page with HTML and simply
hide/show it by changing its display attribute, you don't need either
of these functions.

A simple function could toggle the display attribute;

function showHide(anId) {
var thing;
if (document.getEl ementById) {
thing = document.getEle mentById(anId);
} else if (document.all) {
thing = document.all[anId];
}

if (thing.style.di splay == '') {
thing.style.dis play = 'none';
} else {
thing.style.dis play = '';
}
}

Of course, you can remove the above completely if you use the form
elements collection or reference form elements differently (see the
code below - it doesn't use getElementById or getElementsByTa gName).
function show() {
var node = document.getEle mentById('cbtex t');
var x = Number(node.off setLeft) + Number(document .body.leftMargi n);


Attempting to locate the coordinates of an element in the page in a
cross-browser manner is problematic. But if you just put the element
in the page where you want it, then show/hide it, you don't have to do
it at all.

Document.body.l eftMargin will not work in Safari (and I suspect
it's failing in all the other browsers too), try:

document.getEle mentsByTagName( 'body')[0].style.marginLe ft

similarly for your attempt at "topMargin" :

document.getEle mentsByTagName( 'body')[0].style.marginTo p

But this is dependent on the browser supporting getElementsByTa gName
and the DOM style object (so OK for IE 6 but probably not 5).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><ti tle>Editable Select</title>

<script type="text/javascript">
function showHide(btn,el e) {
if (ele.style.disp lay == 'none') {
ele.style.displ ay = '';
btn.value = 'Hide list';
} else {
ele.style.displ ay = 'none';
btn.value = 'Show list';
}
}

function addValue(sel,tx t) {
txt.value = sel[sel.selectedInd ex].value;
}
</script>

</head><body>

<form action="">
<input type="text" style="width: 150px" name="cbtext">
<input type="button" value="Show list" style="width: 10em;"
name="showHideB utton" onclick="
showHide(this,t his.form.fruitL ist);
">&nbsp;
<input type="reset">
<div style="position : relative;">
<select name="fruitList " style="display: none; position: absolute;"
onclick="
addValue(this,t his.form.cbtext );
showHide(this.f orm.showHideBut ton,this.form.f ruitList);
this.style.disp lay = 'none';
">
<option value="Apple" >Apple</option>
<option value="Cherry"> Cherry</option>
<option value="Melon" >Melon</option>
<option value="Lemon" >Lemon</option>
<option value="Peach" >Peach</option>
<option value="Plum" >Plum</option>
</select>
</div>
</form>
Here is some text. Here is some text. Here is some text. Here is some
text. Here is some text. Here is some text. Here is some text. Here
is some text. Here is some text. Here is some text. Here is some
text. Here is some text. Here is some text. Here is some text. Here
is some text. Here is some text. Here is some text. Here is some
text. Here is some text. Here is some text. Here is some text. Here
is some text. Here is some text. Here is some text. Here is some text.
</body>
</html>

And the caveats:

1. This page is utterly dependent upon JavaScript to function. I would
normally have made the select visible and hidden it with script when
the page loads, that way it would still be visible if JS is not
available/activated.

However since JS is required to put the selected value into the text
area anyway, there seems no point.

2. The text on the show list button changes, but it may be better to
just have "Show/hide list" and leave it at that. I hate things that
change when I don't expect it to. It may be better to have the button
hidden by default and only shown if JS is enabled. That way users wont
try to click on a button that doesn't do anything.

3. Please excuse my use of styles. I've used some minimal stuff just
for this demo.

I'm done.

--
Rob
Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
6335
by: bboyle18 | last post by:
Hi, I am working with a table sorting script which can be found here http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting This script works very nicely, but when there is a large amount of data to sort e.g > 200 then there is a slight delay in the table sort. To cater for this I want to provide some feedback to the user to inform them that the sort function is processing. My idea is to add a "sorting...." message...
0
9923
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
11082
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10711
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10394
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9549
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7939
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5967
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4592
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3215
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.