jQuery and JavaScript

Wednesday

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

Friday

nice site about sorting arrays in javascript

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

Thursday

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

IE 7 meta refresh bug

This is seriously crazy - the old-school

<meta equiv="Refresh" content="3;url=http://mytest.local">

does not work in IE 7 with default settings because of security settings disabling the meta-refresh.

Solution:

In the HEAD section:

function Refresher(t) {
if(t) refresh = setTimeout("document.location='http://www.mysite.com';", t*1000);
}

And I call the script inside the BODY tag:

<body onload="Refresher(20)">

Where the parameter is the amount of seconds that IE should wait until refresh.

Tip o' the hat to http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=870204&SiteID=1

Saturday

loading... animation for buttons and such

sometimes I like to have a little loading animation using just the button label, so here is a snippet to generate the string - it does the little dots-increase that we all know from elsewhere.


var c=0,t,dots='Loading';
    function loadanim(){
    while(c<=12){         c++; c %4 == 0 ? dots='Loading ' : dots += '.';         document.getElementById('txt').value=dots;         t=setTimeout("loadanim()",300); return dots;     }     if(c>=13) {
        clearTimeout(t);
    }
}

Monday

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.

my favorite ajax file upload with progress bar

Although it uses PHP 5.0.2 (which has an extension to handle file upload progress properly) it is still the only example that actually works well and doesn't rely on Flash to make the file upload progress bar.

http://developer.phpdoc.org/UploadProgressMeter/demo.php

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

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

Sunday

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/

Friday

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

About this blog

This is about collections of jQuery and JavaScript snippets that I find useful and workable. Code samples, links to javascript tutorials and a few jQuery API references, extension functions etc should round out the picture - I hope.

jQuery and JavaScript

Related

Wednesday

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

Friday

nice site about sorting arrays in javascript

Thursday

hover help tooltip function

IE 7 meta refresh bug

Saturday

loading... animation for buttons and such

Monday

simple way to set tabs to default before highlighting

my favorite ajax file upload with progress bar

a rock-solid jQuery autocomplete plugin

little chat class

Sunday

adding jQuery to any page favlet

Friday

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

draggable popup in jQuery

About this blog

Labels