IE6 png alpha transparency fix for dynamically loaded images via ajax

IE6 is always a nightmare for web developers. The most painful drawback is it does not support the alpha transparency of transparent png images and you know how to solve this problem using iepngfix or jquery.pngFix.js.

You must be thinking.. what is new in my post then!! Have you ever used any of them for dynamic png images? Some people call it “Loading an image via ajax”. Let me explain what I mean by “dynamic png images”.. say you have a page where clicking on a link does not reload the page, but load a transparent/semitransparent png image. Most specifically, I was working on a project where user types some text in a text box, it is converted to transparent png image on the fly using php and then it is displayed inside a div which has a graph-paper like background-image. This whole thing is done without reloading the page at all.

It looks okay on FF, safari, IE7 but on IE6 the transparent portion looks Grey. The iepngfix.htc script didn’t help, cos it only works on the images which are loaded and showed at the beginning of page loading. After the page is fully loaded and you load another png image using ajax this script won’t work. But I could not do that for my project as it is meant to be loaded dynamically using ajax for the sake of advanced user experience.

I started googling for it, no luck. Finally I modified a portion of code used in the iepngfix.htc file and fixed the problem using this simple javascript code. (FYI, I was using YUI so only the browser checking part is done using it, you can use jQuery or pure javascript for browser detection)

var textImage = new Image();
textImage.src = "text.png"; // src of the png image. okay if not ie6
if (YAHOO.env.ua.ie > 5 && YAHOO.env.ua.ie < 7) { // if IE 5+ or 6 or 6+
    var timg_src = textImage.src;  // textImage
    var new_img = new Image();  // just as a preloader
    new_img.src = timg_src;

    new_img.onload = function(){ // remember, the image is being loaded dynamically, so apply the filter after it is loaded.
        var ti = document.getElementById("textImage"); // the ID of the img tag where it'll be loaded
        ti.style.width = new_img.width; // you can get the width/height of image after it is fully loaded
        ti.style.height = new_img.height; // and you must "DEFINE" the image height/width. "auto" height/width won't work!

        // This is it. apply the filter :)
        ti.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + timg_src + "', sizingMethod='scale')";
        ti.setAttribute('src', 'blank.gif'); // don't forget this part. the image src is replaced with a blank gif image.
    }
}

Here is another version of the code which is not for dynamic images. It’s alternative of iepngfix.htc. In some cases you may not like using iepngfix.htc, rather want to control it yourself. For example if your page has hundreds of png images which are not transparent and only a few images that are transparent, in this case using iepngfix.htc will make the whole process too slow. I applied a pseudo class “png” to all png images & divs with png background image with fixed height & width and applied this simple jQuery code:

$(window).load(function(){ // after all the images are loaded
    if ($.browser.msie && parseInt($.browser.version.substr(0, 1)) < 7) { // ie6 or 5
        $("img.png").each(function(){
            $(this).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + $(this).attr('src') + "', sizingMethod='scale')").attr("src", "images/blank.gif");
        });
        $("div.png").each(function(){
            var bg = $(this).css("backgroundImage");
            bg.match(/^url[("']+(.*\.png)[)"']+$/i);
            bg = RegExp.$1;
            $(this).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bg + "', sizingMethod='crop')").css("backgroundImage", "none");
        });
    }
});

Hope you’ll find it helpful. Please let me know if you have any better idea.

Using Dreamweaver Spry validation with jQuery ajax form plugin

Writing form validation code manually is a boring task. Not only that, editing or adding new fields each time and modifying the validation code accordingly is such a pain. When Dreamweaver added the Spry form validation with CS3 the nightmare is over. The greatest feature of using it is you can do the form validation work automatically with a couple of mouse clicks and no hand written code! And you can easily change/edit or add/remove the fields.

I know jQuery has simple validation plugin but you have to write the codes for it, which is time consuming. I always use the spry validation of dreamweaver as I learned using it for it’s simplicity. When I tried to use it with the jQuery ajax form submit plugin I got disappointed. It didn’t work! I didn’t stop trying. And finally I found the way which I’m gonna share with you :)

Here is the simple code that you need in the “beforeSubmit” parameter of $.ajaxForm

$("#formID").ajaxForm({
    url: "submit.php",
    beforeSubmit: function(formData, jqForm, options){
        if (Spry) { // checks if Spry is used in your page
            var r = Spry.Widget.Form.validate(jqForm[0]); // validates the form
            if (!r)
                return r;
        }
    },
    success: successFunction,
    complete: completeFunction
});

Hope that’ll help a lot boosting your web development.

AJAX and SEO – Is it possible to get them together?

About 7 months ago I threw a question on LinkedIn, AJAX & SEO. It was about is ajax seo friendly! (The website can be found here http://demo.zpbappi.com). Most of the people answered “NO”. All of them suggested me not to use 100% Ajax(ed) website as search endings do not render the javascript. The site has one index.php page and no other pages. When you click any link/buttons it loads the content dynamically using ajax. So I agreed that search engines wont be able to crawl the site properly and stop thinking about it any more.

One week ago I got a project to fully ajaxify a simple static website camillenelson.com with search enginge readability. I already knew (still then) it is not possible. I started re-thinking about the issue and find out a solution of my own. The site has only 8 pages which is a plus point. To assume any site from search spider’s view just disable the javascript from your browser settings and you’ll understand how the spider will go from one link to another.

For example:

<a href="about.html"
onclick="javascript: Load('about'); return false;">
    About
</a>

When javascript is enabled, clicking on About link won’t go to about.html page (return false;), rather it would call Load function. I think you’ve already got the idea!

In real I used jQuery to make the whole thing unobtrusive. The static html pages (already done) except index.html were kept as they are. In index.html the container div (the only div that changes for different pages) loads the content of different pages. I created a folder “ajaxContent” and created the html files with same name of the main html(s) but they contain only the contents, not the full html page.

Here is the jQuery code I used: (N.B. All the links are assigned with “ajax” class.)

$(function() {
    $("a").focus(function() {
        this.blur();
    });
    $("a.ajax").click(function() {
        var lnk = "ajaxContent/" + $(this).attr("href");
        var hover = $(this).find("img").attr("src");
        var img = $(this).find("img");
        $.ajax({
            url: lnk,
            beforeSend: function() {
                $("div#container").html('Loading...');
            },
            success: function(d) {
                $("div#container").html(d);
            },
            complete: function() {
                $("#loading").hide();
            }
        });
        return false;
    });
});

If you have any better idea to make a fully-ajaxed website SEO friendly please let me know.

Thanks

Flickr Uploader Clone: Free Download with source code

I have been searching for flickr uploader clone script online for one of my project. But no luck! There is no such thing on internet. Then I started with analyzing the javascript code of flickr uploader. Lucky that they did not packed their js. Though it was minified by removing white spaces. I used an online javascript code beautifier to make it pretty readable. After that the challenging part began. Cos, the code normally does not work on my local server. After huge hard working of long one week I made it finally. It works great! Even it works for videos too. You can modify the code for uploading any types of file. FYI, Flickr has used YUI (Yahoo User Interface) library for their uploader. So there is no licensing problem if you use this uploader for your own.

For my own need I added 2 extra fields. They are sent to server via POST method along with the FILES. One thing I’ve noticed, it can upload file faster than normal file uploading method. Cos, the file is encoded first via the flash uploader and somehow it is faster than normal.

And the great advantage is you can select multiple files during browsing by pressing Ctlr + A or select your files by dragging mouse. By using html <input type=”file” /> you can only select one file at a time which is really so boaring and life-taking when you want to upload hundreds of images.

Here is the online demo. The files are not being saved on my server for my own security!

Download it here completely free in a single zip file!

Modify the index_files/config.js file line no 49,
var _site_root = ‘your script location’;
It won’t work for you until you change _site_root

I have no problem if you use it for your own use. But I do not actually want anyone to put the files/zip on their own site to drive the traffics away from our blog.

If you need any support for modifying or setting it up or any bug report please contact me directly at adnan.eee@gmail.com

Thanks
Have a pain-less uploading experience!