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');
            }
        });
    }
});

simple way to set tabs to default before highlighting

How many times do you need this? I need it all the time.

Say, you have a set of links (tabs), and onclick you want to highlight one and default the rest.

$('.nav a').click(function(){
    $(this).siblings().each(function(){
        $(this).removeClass("hi");
    });
    $(this).addClass("hi");
});




Couldn't be any easier now, could it? Love the each() iterator function. sweet.

a rock-solid jQuery autocomplete plugin

There are zillions of them out there. This one stands out for these reasons:

• it correctly behaves when you delete characters as you type (resubmits and shows new list)
• it prepopulates the input field as you type
• it doesn't submit the whole form if you use arrow keys + enter (something many others do)
• allows many different ways to load the data locally (local is always faster)
• lets you create specific formatting for each item in the popup

http://www.pengoworks.com/workshop/jquery/autocomplete.htm

adding jQuery to any page favlet

I found this to be an excellent item. because i love messing about with OPW (other people's websites). http://www.keyframesandcode.com/code/development/javascript/jquery-favelet/

jquery.fn.extend -- parsing XML into an array of objects

I found it most suitable to be able to parse XML into an array of objects so I can iterate through it for display or sorting. So I call it like this: $().loadXML2array('blah.xml'); and then I can iterate over objectArray any which way I like.
Reason for having it an array of objects: makes sorting faster if you use this to generate a sortable table or datagrid.

loadXML2array: function() {
        return this.each(function() {
            var data = $.ajax({
     type: "GET",
     url: "echo.php?xml=datatable1",
     async: false,
     success: function(xml) {
     objectArray = new Array();
     $(xml).find('row').each(function(i){
      rowObj = new Object();
      rowObj.col1 = $(this).children('col_1').text();
      rowObj.col2 = $(this).children('col_2').text();
      rowObj.col3 = $(this).children('col_3').text();
      objectArray.push(rowObj);
    });
     }
   })
        });
    }

draggable popup in jQuery

Most plugins for this purpose are much too over-featured for my taste. All I need is a simple function to let be drag my popup div.

    $('#popup #draghandle').mousedown(function(e){
            var d = $(this).parent().parent().parent().parent().parent().parent();
            var dx = d.offset().left;
            var dy = d.offset().top;
            var xgap = e.pageX-dx;
            var ygap = e.pageY-dy;
                                if (!$.browser.msie) {
                                    e.preventDefault();
                                }
        $(document).mousemove(function(e){
            var x = e.pageX-xgap;
            var y = e.pageY-ygap;
                              if ($.browser.msie) {
                                // IE only here
                                e.preventDefault();  //IE's
                                if(e.pageX >= 0 && e.pageY >= 0) d.css({left: x, top: y });
                                return false;
                              }
                                // FF only here
                if(e.pageX >= 0 && e.pageY >= 0) d.css({left: x, top: y });
                             return true;
        });
    }).mouseup(function(e){ $(document).unbind('mousedown');$(document).unbind('mousemove');});