Using jQuery to fadeIn and fadeOut 24bit PNG images in Internet Explorer you may get black rings. If you’re using CSS images, a I’ve written how to fix black rings here. However if you use images in the HTML like this:

<ul id="ImageList">
<li><img src="24-bit-1.png" alt="img1" id="img1"/></li>
<li><img src="24-bit-2.png" alt="img2"/></li>
<li><img src="24-bit-3.png" alt="img3"/></li>
</ul>

Use need to use this jQuery fix instead:

if( $.browser.msie && parseInt($.browser.version) < 9 ) {
                $('#ImageList >li > img').each(function(){
                                $(this).attr('width', $(this).width());
                                $(this).attr('height', $(this).height());
                                $(this).css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='"+$(this).attr('src')+"')");
                                $(this).attr('src', '/images/Transparent.gif');
                });
}

It works by replacing the image with a filter, which supports alpha transparency. It uses a 1×1 Transparent.gif, and checks if the browser is IE8 or less.

Note! you must fade out the parent for it work:

$('#img1').parent().fadeOut();

Tags: IE, javascript, jQuery, PNG

1. don’t put JavaScript in the header. Yahoo! recommends putting <script> on the bottom. This makes pages display faster, so your JavaScript can load after your page
2. don’t use onClick(). You shouldn’t use any JavaScript events in the HTML. It messes up the description when people hover, makes HTML hard to read and makes reusing code harder. Create the events in the .js file
3. don’t use too many images. You can combine images by using CSS sprites. Even on fast connections, each image request takes time. Speed things up by using CSS sprites

By avoiding these things and sticking to best practices, you too make make sites that don’t suck!

Tags: CSS, HTML, javascript

If you want to get the index # a child is in, using jQuery, you can use this:

$('ul li a').click(function (e){
 var index = $('ul li a').index(this);
 console.log("Your index is ", index);
}

Tags: HTML, javascript

When you click “Ask Friends”, post the following javascript into the URL bar of your browser.

javascript:(function(){var f=document.getElementsByClassName("fbProfileBrowserListContainer");for(var i=0;i<f.length;i++){if(f[i].children){var c=f[i].getElementsByTagName("input");for(var l=0;l<c.length;l++){c[l].click();}}}})();

Good luck!

Facebook

Tags: ask friends, facebook, fbProfileBrowserListContainer, javascript, new select, poll, question, questions

With modern browsers, we can simply use the function addEventListener to add events to the new HTML5 <canvas> tag. This function does not exist in IE (yet, IE9 apparently has it). I started my code base from Operas examples, which looks like this:

canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);

Sadly Microsofts Internet Explorer does not support these functions. To remedy this, simply include Google’s Excanvas and use this:

// Attach the mousedown, mousemove and mouseup event listeners.
    if (canvas.addEventListener){
        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mousemove', ev_canvas, false);
        canvas.addEventListener('mouseup',   ev_canvas, false);
    } else if (canvas.attachEvent){ // IE
        var trackend = false;
        var trackstart = false;
        var trackmid = false;
        canvas.onselectstart = function () {canvas.onmousemove();trackstart = true;return false;}
        canvas.onclick = function () {trackend = true;}
        canvas.onmousemove = function () {
            var mtarget = document.getElementById('Drawing');
            var x = event.clientX + mtarget.scrollLeft;
            var y = event.clientY + mtarget.scrollTop - 20;
            var mtype = 'mousemove';
            if (trackstart) {
                trackstart = false;
                trackmid = true;
                mtype = 'mousedown';
            }
            if (trackend) {
                trackmid = false;
                mtype = 'mouseup';
            }
            if (trackend || trackmid || trackstart) {
                trackend = false;
                ev_canvas({
                    type: mtype,
                    layerX: x,
                    layerY: y,
                    target: mtarget
                });
            }
        }
    }

You will have to change the ChangeMeToYourCanvasID to your canvas ID. The X and Y positions may change if you scroll the page, so I minused var x & y by scrollTop and scrollLeft. ev_canvas is the name of the handle function.

We can now use events exactly the same across all browsers.

Tags: excanvas, HTML, IE, javascript