Originally Posted by tgreer
T. Greer happens to be a member of Daniweb. In fact he moderates this forum. In actual fact, he's me. I haven't looked at that example in quite awhile. I removed your attachment because I have it on good authority the author doesn't wish the code distributed.
Ah, my apologies. Since I couldn't see any copyright notice on the original page with your code, I didn't realise that you wouldn't want me to post your original code with my changes as an attachment in this forum. I'm from a University, and I'm interested in your demonstration for educational and not commercial purposes. Yes, I had seen the connection between the author of the code and the moderator of this forum - from my point of view that was coincidental, since the problem I was having was one with JavaScript in general and not with the specifics of your example. I've now solved my own problem.
Originally Posted by tgreer
However, please reply with your own code listing of the mods you've made. I'm not entirely clear what you're wanting to do. Modifying the code to support any/all select/text input combos on the page would be quite a task, one I'm not willing to do for free!
I didn't expect you to enhance your code for me - or anyone else - without reward. What I wanted to do was to allow the use of more than one such synthesised HTML combobox, and at any position on the page. Here are the changes required for my own fully dynamic, unparameterised, solution:
Comment out or delete the <style...</style> part, and the class=... attribute assignments in the selector and the input box. Exchange the order of the selector and the input so the selector is first. Define a max() function and replace the body of the ieStinks() function with:
function max(x, y)
{
return (x > y) ? x : y;
}
function ieStinks()
{
for (var formindex = 0; thisform = document.forms[formindex]; formindex++) {
for (var elementindex = 0; thiselement = thisform.elements[elementindex]; elementindex++) { /* DEBUG alert('element name="' + thiselement.name + '" id="' + thiselement.id + '"');*/
if (thiselement.id.substr(0, 3) == 'sel') {
var sel = thiselement;
var txt = document.getElementById("txt" + thiselement.id.substr(3));
if (txt) {
var maxw = max(parseInt(sel.offsetWidth) - parseInt(sel.offsetHeight), parseInt(txt.offsetWidth));
var selw = maxw + sel.offsetHeight; /* Assume pulldown is square */
var txtw = maxw;
/* DEBUG alert('sel.id = "' + sel.id + '", txt.id = "' + txt.id + '"'); */
sel.style.border = "0px";
sel.style.width = selw + "px";
txt.style.width = txtw + "px";
if (navigator.appName != "Microsoft Internet Explorer") {
txt.style.position = "relative";
txt.style.top = "-" + sel.offsetHeight + "px";
}
}
}
}
}
}
All selector and input pairs which are to form a synthesised combobox must be given ids of the form 'sel'* and 'txt'*, where '*' is a unique identifier - e.g. 'selCar' and 'txtCar'; 'selCity' and 'txtCity'; etc.
Replace the "selCombo" in fakeCombo() by:
and the "txtCombo" in mySelect() by:
You can then place several selector/input combobox pairs anywhere on your web page. You can apply a CSS style to them if you wish, but you cannot make a text box have an absolute position. The only little problem is the aesthetic one I mentioned, for which I see no solution.
I'm just a novice JavaScript programmer - started yesterday. It's very likely my code - which has complexity O(n**2) in elements - can be improved.
Originally Posted by tgreer
IE has a bug with z-index and SELECT controls, so you'll never "make it work" until they fix it.
Indeed, that was clear from your original article.
I still think your idea and implementation is very clever. Thank you very much for putting it on your web site, as it has been a very useful educational exercise in JavaScript for me.
