jQuery “live” event

jQuery 1.3 has a brand new and powerful event. It was very painful and a nightmare to maintain events for newly created elements. For example if you define “click” event for existing elements at domready it won’t work for dynamically added elements later. Each time a new element is added you had to bind the event to that element. Which results in many recursive function calls, for huge applications so tough to maintain the events dynamically and finally not efficient coding structure.

The new “live” event has made our life easier to a great extent!

For example:

$("a").bind("click", function(){$(this).blur();});

  This simple code will remove the unwanted selection for your EXISTING “a” tags only. But if any new “a” tag is added dynamically to the dom, you have to do the same thing again. But if you use

$("a").live("click", function(){$(this).blur();});

  this will remove your headache about new “a” tags which will be added later.
So live event will reduce the load of calling same function(for applying same event) again and again for new elements. To unbind live event you have to use “die”.

One very important point to note – live event only works for direct selectores. For example, this would work:

$("li a").live(...)

but this would not:

$("a", someElement).live(...)

and neither would this:

$("a").parent().live(...)

I must say jQuery is like a “Lamp of Aladdin” for web developers which has made javascript application development a fun. And the new live event will boost up that fun and make more time for dating ;)

Documentation: http://docs.jquery.com/Events/live

A better process to find maximum z-index within a page

Once I needed to get maximum z-index of a DIV to show message at the top of the screen.
Usually, I used arbitrary z-index of 100 of the DIV. But that one is not at the top and it’s hidden by others.
What’s wrong? And unfortunately I found that there are 3 more div-s which have z-index attribute which are greater than 100.
So I changed the z-index to 1000. This time I can see one portion of the DIV.
But 2 more elements get the desired message container DIV overlaid. Frustrating! Huh!
Trial and error method always makes you delay.
I know JavaScript or jQuery may get rid of this hell.
I made an absolute tinny code to find the highest z-index of absolute DIV
to show my shouting box and to make it appear absolutely at the top of all html elements.

//include jQuery.js --  visit: http://jquery.com/
$(function(){
    var maxZ = Math.max.apply(null,$.map($('body > *'), function(e,n){
           if($(e).css('position')=='absolute')
                return parseInt($(e).css('z-index'))||1 ;
           })
    );
    alert(maxZ);
});

I used selector of ”body > *‘ instead of ‘body *‘.

”body > *‘ means all tags/elements which are found at first depth of
whether ”body *‘ selects all tags/elements at any depth.
It doesn’t matter what’s is the maximum/highest z-index of an absolute element
rather it matters what’s the maximum/highest z-index of the absolute elements
which are next to in first depth only to show the shouting box on top most strata.

N.B. Shouting box is appended to document.body in this case.

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

jQuery Manual in .chm format (Update: version 1.4.2)

The online version of jQuery documentation is really great. But they do not provide any offline version of their docs. I’ve got the jQuery docs in a single .chm file. Hope this will help you a lot.

Download jQuery Manual (.chm)

Update: jQAPI offline version Documentation for the road.

Download HTML Version. Documentation for jQuery version 1.4.2 – 1.6MB – 03/20/10
Download AIR Version. Documentation for jQuery version 1.4.2 – 1.6MB – 03/20/10

I recommend the .air version, it’s cool!