Making T.Greer's JavaScript-synthesised combobox dynamic

[JAM]

I came across T. Greer's very clever demonstration of how to provide an HTML combobox at http://www.tgreer.com/comboArticle.html. I realised, however, that for the purposes of the demonstration the example combobox is placed at an absolute position on the page. I tried to make it dynamic, but have encountered difficulties. Would someone be kind enough to help? (I'm a novice JavaScript programmer.)

Take the original and comment out the '<style type="text/css">...<!--<style type="text/css">' near the top. Alter the order of the HTML of the selector and the input box so that the selector is first. (This does away with the need to use .zIndex, which I couldn't make work in any case.) Remove the 'class="DropDown"' from the selector and the 'class="TxtBox"' from the input box. Add an initial paragraph of text and a reset button. Then change the content of the ieStinks() JavaScript procedure to get the attached HTML/JavaScript file.

This works fine with Firefox on Linux. I've not been able to try it with Internet Explorer. My problem is that I'd like to use the calculated values for selector.style.width, textbox.style.width and the upward adjustment of the textbox position: '"-" + textbox.style.height', but find that only the literal values ("120px", "100px" and "-20px") work. There is also a minor aesthetic problem: the definition of "relative" (see "javascript: The Definitive Guide" by David Flanagan, O'Reilly) says that "The space allocated for the [relative-re-positioned] element in the normal document flow remains allocated for it, and the elements on either side of it do not close up ...". Can this be avoided without repositioning other elements by hand, which would be a nuisance?

The ideal, of course, is to have ieStinks(), fakeCombo() and mySelect() process any synthesized comboboxes placed in the HTML page automatically, without having to pass these procedures their names.

[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.

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!

IE has a bug with z-index and SELECT controls, so you'll never "make it work" until they fix it.

[peter_budo]

:lol: Wow somebody was realy unfortunate.

:mrgreen:Congratulation to JAM in finding his lost friend tgreer

(sorry, but what is the possibility of ocurence for situation like this??)

[tgreer]

I imagine it wasn't a coincidence. We'll have to see what he says, but I imagine he followed a link from my site to daniweb, and posted the question knowing I was here. Wishful thinking on his part, perhaps, because I'm not much interested in taking that little example and fleshing it out to a complete, dynamic program.

You're welcome to take a crack at it, though.

[JAM]

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.

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:

"sel" + x.id.substr(3)

and the "txtCombo" in mySelect() by:

"txt" + x.id.substr(3))

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.

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.

[tgreer]

You're welcome. Thanks for the nice follow-up post.