forcing IE 6 to allow select input with different width for option

if you floow the link above you can read a nice description of the problem. IE6 sucks, we know...

the solution in the other blog is interesting. here is one that uses jQuery and it's wrapped into a little extension.

The principle is thus: if (IE6) {wrap a container div around the input and control its width and overflow} else {use CSS only}

THe reason why this works is that IE6 uses the O/S to draw the select box, so once the box is open, it really doesn't matter what is going on in the page. Back in the day I used iframes to mimic drop down menus inside web apps.

.simpleSelectBoxContainer {width:18em;position:relative;}
.simpleSelectBoxContainer .selectContainerOverflow {width:16.7em;overflow:hidden;}
.simpleSelectBoxContainer img {position:absolute;right:0px;top:0px;}
.simpleSelectBoxDefault {width: 17.5em;}

and the use in the script:

$('.simpleSelectBox').simpleselectbox();

and the function:

jQuery.fn.extend({
    simpleselectbox: function(options) {
        return this.each(function() {
            if ($.browser.msie) {
                // create the spacer option
                var option = document.createElement("option");
                option.text = new Array(60).join(' ');
                option.value = '';
                this.options[this.options.length] = option;
                var o = $(this)
                    .wrap(' < div class=simpleSelectBoxContainer>< div class=selectContainerOverflow>< /div>< /div>')
                    .closest('.simpleSelectBoxContainer').append('< img src=css/images/icon_dropdownArrow.png/>');
            } else {
                $(this).addClass('simpleSelectBoxDefault');
            }
        });
    }
});

nice site about sorting arrays in javascript

http://solutoire.com/2007/05/02/sorting-javascript-arrays/

hover help tooltip function

hover help tooltip function

often I want to do a simple hover help and the libraries I see are bloiated. All I want is to bea ble to occasinoally have an inline link so the hover should remain active.
I pass the text to be placed in the first argument, and the second can be added (or omitted) if I want the hover to remain alive while the mouse moves over the tooltip.

 $('#costrating > span').hoverhelp('this is cost rating');
 $('#qualityrating > span').hoverhelp('this is quality rating',1);

$.fn.hoverhelp = function(txt,sticky) {
 return this.each(function() {
  $(this).hover(
   function(e){
    $T = $(this).position().top+$(this).height();
    $L = $(this).position().left;
    $('#hhcontent').empty().html(txt);
    $('#hoverhelp').css({top:$T,left:$L}).show();
   },
   function(){
    switch(sticky){
     case 1 : // use with inline links
      $('#hoverhelp').hover(
       function(){$(this).show();},
       function(){$(this).hide();}
      );
     break;
     default :
      $('#hoverhelp').hide();
     break;
    }
   }
  );
 });
}; 

little chat class

found this - haven't tested it but it looks like a nice start to make a simple chat.

function InitializeXMLHttpRequest(req){
 if (req != null) req.abort();
 if (typeof XMLHttpRequest != "undefined") req = new XMLHttpRequest();
 else{ try { req=new ActiveXObject("Msxml2.XMLHTTP");}
 catch(e) {
   try { req=new ActiveXObject("Microsoft.XMLHTTP"); }
   catch(oc){ req=null;}
   }
 }
 return req;
}

var reqChat = null;
reqChat = InitializeXMLHttpRequest(reqChat);
reqChat.onreadystatechange = ProcessCheckStatusResult;

function ProcessCheckStatusResult(){
status+='+';
    if (reqChat.readyState == 4){
        if (reqChat.status == 200){
            alert("ok");
        }
    }
}

function CheckStatus(){
reqChat = InitializeXMLHttpRequest(reqChat);
status+=' send';
   var url = "2.htm?t=" + new Date().getTime();
   reqChat.open('GET', url, true);
   reqChat.send(null);
}

status='';

setInterval(CheckStatus, 5000);