Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    webfx combo-questions

    Someone at the forum gave a link to http://www.webfx.eae.net/dhtml/combobox/combobox.htm .

    My questions are: Can that combobox be used just like a regular selectlist in a form? And if so what is the name of the object, can it be called with document.formname.etc just like a regular selectlist? Hope you get what I mean...

    CODE OF WEBFX COMBO:
    _________________________________________________

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>ComboBox Demo</title>

    <style>
    body {font-size:9pt;font-family:verdana;}
    button {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;}
    a {color:red;}
    a:hover {color:blue}
    </style>

    </head>

    <body>
    <script src="ComboBox.js">
    /*
    * ComboBox
    * By Jared Nuzzolillo
    *
    * Updated by Erik Arvidsson
    * http://webfx.eae.net/contact.html#erik
    * 2002-06-13 Fixed Mozilla support and improved build performance
    *
    */

    Global_run_event_hook = true;
    Global_combo_array = new Array();

    Array.prototype.remove=function(dx)
    {
    if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false}
    for(var i=0,n=0;i<this.length;i++)
    {
    if(this[i]!=this[dx])
    {
    this[n++]=this[i]
    }
    }
    this.length-=1
    }

    function ComboBox_make()
    {
    var bt,nm;
    nm = this.name+"txt";

    this.txtview = document.createElement("INPUT")
    this.txtview.type = "text";
    this.txtview.name = nm;
    this.txtview.id = nm;
    this.txtview.className = "combo-input"
    this.view.appendChild(this.txtview);

    this.valcon = document.createElement("INPUT");
    this.valcon.type = "hidden";
    this.view.appendChild(this.valcon)

    var tmp = document.createElement("IMG");
    tmp.src = "___";
    tmp.style.width = "1px";
    tmp.style.height = "0";
    this.view.appendChild(tmp);

    var tmp = document.createElement("BUTTON");
    tmp.appendChild(document.createTextNode(6));
    tmp.className = "combo-button";

    this.view.appendChild(tmp);
    tmp.onfocus = function () { this.blur(); };
    tmp.onclick = new Function ("", this.name + ".toggle()");
    }

    function ComboBox_choose(realval,txtval)
    {
    this.value = realval;
    var samstring = this.name+".view.childNodes[0].value='"+txtval+"'"
    window.setTimeout(samstring,1)
    this.valcon.value = realval;
    }

    function ComboBox_mouseDown(e)
    {
    var obj,len,el,i;
    el = e.target ? e.target : e.srcElement;
    while (el.nodeType != 1) el = el.parentNode;
    var elcl = el.className;
    if(elcl.indexOf("combo-")!=0)
    {

    len=Global_combo_array.length
    for(i=0;i<len;i++)
    {

    curobj = Global_combo_array[i]

    if(curobj.opslist)
    {
    curobj.opslist.style.display='none'
    }
    }
    }
    }

    function ComboBox_handleKey(e)
    {
    var key,obj,eobj,el,strname;
    eobj = e;
    key = eobj.keyCode;
    el = e.target ? e.target : e.srcElement;
    while (el.nodeType != 1) el = el.parentNode;
    elcl = el.className
    if(elcl.indexOf("combo-")==0)
    {
    if(elcl.split("-")[1]=="input")
    {
    strname = el.id.split("txt")[0]
    obj = window[strname];

    obj.expops.length=0
    obj.update();
    obj.build(obj.expops);
    if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}//empty
    else{obj.opslist.style.display='block';}
    obj.value = el.value;
    obj.valcon.value = el.value;
    }
    }
    }

    function ComboBox_update()
    {
    var opart,astr,alen,opln,i,boo;
    boo=false;
    opln = this.options.length
    astr = this.txtview.value.toLowerCase();
    alen = astr.length
    if(alen==0)
    {
    for(i=0;i<opln;i++)
    {
    this.expops[this.expops.length]=this.options[i];boo=true;
    }
    }
    else
    {
    for(i=0;i<opln;i++)
    {
    opart=this.options[i].text.toLowerCase().substring(0,alen)
    if(astr==opart)
    {
    this.expops[this.expops.length]=this.options[i];boo=true;
    }
    }
    }
    if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")}
    }


    function ComboBox_remove(index)
    {
    this.options.remove(index)
    }

    function ComboBox_add()
    {
    var i,arglen;
    arglen=arguments.length
    for(i=0;i<arglen;i++)
    {
    this.options[this.options.length]=arguments[i]
    }
    }

    function ComboBox_build(arr)
    {
    var str,arrlen
    arrlen=arr.length;
    str = '<table class="combo-list-width" cellpadding=0 cellspacing=0>';
    var strs = new Array(arrlen);
    for(var i=0;i<arrlen;i++)
    {
    strs[i] = '<tr>' +
    '<td class="combo-item" onClick="'+this.name+'.choose(\''+arr[i].value+'\',\''+arr[i].text+'\');'+this.name+'.opslist.style.display=\'none\';"' +
    'onMouseOver="this.className=\'combo-hilite\';" onMouseOut="this.className=\'combo-item\'" >&nbsp;'+arr[i].text+'&nbsp;</td>' +
    '</tr>';
    }
    str = str + strs.join("") + '</table>'

    if(this.opslist){this.view.removeChild(this.opslist);}

    this.opslist = document.createElement("DIV")
    this.opslist.innerHTML=str;
    this.opslist.style.display='none';
    this.opslist.className = "combo-list";
    this.opslist.onselectstart=returnFalse;
    this.view.appendChild(this.opslist);
    }

    function ComboBox_toggle()
    {
    if(this.opslist)
    {
    if(this.opslist.style.display=="block")
    {
    this.opslist.style.display="none"
    }
    else
    {
    this.update();
    this.build(this.options);
    this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
    this.opslist.style.display="block"
    }
    }
    else
    {
    this.update();
    this.build(this.options);
    this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
    this.opslist.style.display="block"
    }
    }

    function ComboBox()
    {
    if(arguments.length==0)
    {
    self.status="ComboBox invalid - no name arg"
    }

    this.name = arguments[0];
    this.par = arguments[1]||document.body
    this.view = document.createElement("DIV");
    this.view.style.position='absolute';
    this.options = new Array();
    this.expops = new Array();
    this.value = ""

    this.build = ComboBox_build
    this.make = ComboBox_make;
    this.choose = ComboBox_choose;
    this.add = ComboBox_add;
    this.toggle = ComboBox_toggle;
    this.update = ComboBox_update;
    this.remove = ComboBox_remove;

    this.make()
    this.txtview = this.view.childNodes[0]
    this.valcon = this.view.childNodes[1]

    this.par.appendChild(this.view)

    Global_combo_array[Global_combo_array.length]=this;
    if(Global_run_event_hook){ComboBox_init()}
    }

    ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you must

    function ComboBox_init()
    {
    if (document.addEventListener) {
    document.addEventListener("keyup", ComboBox_handleKey, false );
    document.addEventListener("mousedown", ComboBox_mouseDown, false );
    }
    else if (document.attachEvent) {
    document.attachEvent("onkeyup", function () { ComboBox_handleKey(window.event); } );
    document.attachEvent("onmousedown", function () { ComboBox_mouseDown(window.event); } );
    }

    Global_run_event_hook = false;
    }

    function returnFalse(){return false}

    function ComboBoxItem(text,value)
    {
    this.text = text;
    this.value = value;
    }

    document.write('<link rel="STYLESHEET" type="text/css" href="ComboBox.css">')
    </script>

    <script>

    dm=new ComboBox("dm")

    dm.add(
    new ComboBoxItem("barge",1),
    new ComboBoxItem("benluc",2),
    new ComboBoxItem("benlieeeeck",3),
    new ComboBoxItem("taco",4)
    )
    /*
    // generate 1000 more to test performance
    for (var i = 0; i < 100; i++ )
    dm.add(new ComboBoxItem(String(i)));
    */

    </script>

    <br><br><br>

    <button hidefocus onClick="alert(dm.value)">Show Value</button>&nbsp;<button hidefocus
    onClick="dm.add(new ComboBoxItem(window.prompt('Type in the text to add',''),window.prompt('Type in a value to add','')))"
    >Add Item</button>&nbsp;<button hidefocus onClick="dm.remove(window.prompt('Type in an index to remove',''))"
    >Remove Item</button>
    <br>
    <br>

    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should post this at the Webfx webboard.

  • #3
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post
    True. First of all, this is way larger issue than plain HTML & CSS. And second: there exists a separate board for WebFX.
    Zvona
    First Aid for
    Web Design


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •