I’m tired of websites that don’t provide, can’t provide or will never provide. I’ve called in my boys, Stylish and Grease Monkey on the front lines. However, beyond the crazy happenstance that another user might share a solution to your issue on userstyles.org or userscripts.org you could be left in the cold, without the right tools. I won’t go into detail on Stylish in this post but you might not even need it after you see the script.

Since I’m already connected with Google every which way in my life, why not pretend like the Internet is a big party and websites are your friends. Introduce jQuery from Google’s CDN to other friends (websites) that don’t already know jQuery and jQuery UI and make it personal.

That was the driving force behind this Grease Monkey Script, which was derived from mashing together strd6′s script and Joan Piedra’s script with an update to the latest versions of jQuery and jQuery UI.

// ==UserScript==
// @name           jQuery and jQuery UI
// @author         Tyler "-z-" Mulligan
// @version        0.5
// @namespace      http://www.doknowevil.net
// @description    jQuery 1.6.2 and jQuery UI 1.8.4 loaded from google's CDN with redmond theme.
// @include        http://www.website.com/*
//
// @resource       jQuery               https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// @resource       jQueryUI             https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js
//
// @resource       jQueryUICSS          http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/jquery-ui.css
//
// @resource       ui-bg_inset-hard_100_fcfdfd_1x100.png  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_inset-hard_100_fcfdfd_1x100.png
// @resource       ui-bg_gloss-wave_55_5c9ccc_500x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png
// @resource       ui-bg_glass_85_dfeffc_1x400.png        http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_glass_85_dfeffc_1x400.png
// @resource       ui-bg_glass_75_d0e5f5_1x400.png        http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png
// @resource       ui-bg_inset-hard_100_f5f8f9_1x100.png  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_inset-hard_100_f5f8f9_1x100.png
// @resource       ui-bg_flat_55_fbec88_40x100.png        http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_flat_55_fbec88_40x100.png
// @resource       ui-bg_glass_95_fef1ec_1x400.png        http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_glass_95_fef1ec_1x400.png
// @resource       ui-icons_469bdd_256x240.png            http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_469bdd_256x240.png
// @resource       ui-icons_469bdd_256x240.png            http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_469bdd_256x240.png
// @resource       ui-icons_d8e7f3_256x240.png            http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_d8e7f3_256x240.png
// @resource       ui-icons_6da8d5_256x240.png            http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_6da8d5_256x240.png
// @resource       ui-icons_217bc0_256x240.png            http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_217bc0_256x240.png
// @resource       ui-icons_f9bd01_256x240.png            http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_f9bd01_256x240.png
// @resource       ui-icons_2e83ff_256x240.png            http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_2e83ff_256x240.png
// @resource       ui-icons_cd0a0a_256x240.png            http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_cd0a0a_256x240.png
// @resource       ui-bg_flat_0_aaaaaa_40x100.png         http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_flat_0_aaaaaa_40x100.png
// @resource       ui-bg_flat_0_aaaaaa_40x100.png         http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_flat_0_aaaaaa_40x100.png

// ==/UserScript==

var $;

// Inject jQuery into page... gross hack... for now...
(function() {
    if (typeof unsafeWindow.jQuery == 'undefined') {
        var head = document.getElementsByTagName('head')[0];

        var script = document.createElement('script');
        script.type = 'text/javascript';

        var jQuery = GM_getResourceText('jQuery');
        var jQueryUI = GM_getResourceText('jQueryUI');

        script.innerHTML = jQuery + jQueryUI;
        head.appendChild(script);

    }
    GM_wait();
})();

// Check if jQuery's loaded
function GM_wait() {
    if (typeof unsafeWindow.jQuery == 'undefined') {
        window.setTimeout(GM_wait, 100);
    } else {
        $ = unsafeWindow.jQuery.noConflict(true);
        addUIStyles();
        letsJQuery();
    }
}

function addUIStyles() {
    var head = document.getElementsByTagName('head')[0];
    var resources = {
        'ui-bg_inset-hard_100_fcfdfd_1x100.png': GM_getResourceURL('ui-bg_inset-hard_100_fcfdfd_1x100.png'),
        'ui-bg_gloss-wave_55_5c9ccc_500x100.png': GM_getResourceURL('ui-bg_gloss-wave_55_5c9ccc_500x100.png'),
        'ui-bg_glass_85_dfeffc_1x400.png': GM_getResourceURL('ui-bg_glass_85_dfeffc_1x400.png'),
        'ui-bg_glass_75_d0e5f5_1x400.png': GM_getResourceURL('ui-bg_glass_75_d0e5f5_1x400.png'),
        'ui-bg_inset-hard_100_f5f8f9_1x100.png': GM_getResourceURL('ui-bg_inset-hard_100_f5f8f9_1x100.png'),
        'ui-bg_flat_55_fbec88_40x100.png': GM_getResourceURL('ui-bg_flat_55_fbec88_40x100.png'),
        'ui-bg_glass_95_fef1ec_1x400.png': GM_getResourceURL('ui-bg_glass_95_fef1ec_1x400.png'),
        'ui-icons_469bdd_256x240.png': GM_getResourceURL('ui-icons_469bdd_256x240.png'),
        'ui-icons_469bdd_256x240.png': GM_getResourceURL('ui-icons_469bdd_256x240.png'),
        'ui-icons_d8e7f3_256x240.png': GM_getResourceURL('ui-icons_d8e7f3_256x240.png'),
        'ui-icons_6da8d5_256x240.png': GM_getResourceURL('ui-icons_6da8d5_256x240.png'),
        'ui-icons_217bc0_256x240.png': GM_getResourceURL('ui-icons_217bc0_256x240.png'),
        'ui-icons_f9bd01_256x240.png': GM_getResourceURL('ui-icons_f9bd01_256x240.png'),
        'ui-icons_2e83ff_256x240.png': GM_getResourceURL('ui-icons_2e83ff_256x240.png'),
        'ui-icons_cd0a0a_256x240.png': GM_getResourceURL('ui-icons_cd0a0a_256x240.png'),
        'ui-bg_flat_0_aaaaaa_40x100.png': GM_getResourceURL('ui-bg_flat_0_aaaaaa_40x100.png'),
        'ui-bg_flat_0_aaaaaa_40x100.png': GM_getResourceURL('ui-bg_flat_0_aaaaaa_40x100.png')
    };

    var style = document.createElement('style');
    style.type = 'text/css';

    var css = GM_getResourceText ('jQueryUICSS');
    $.each(resources, function(resourceName, resourceUrl) {
        console.log(resourceName + ': ' + resourceUrl);
        css = css.replace( 'images/' + resourceName, resourceUrl);
    });

    style.innerHTML = css;
    head.appendChild(style);
}

// All your GM code must be inside this function
function letsJQuery() {
    //alert($); // check if the dollar (jquery) function works
    //alert($().jquery); // check jQuery version
    $("
<div id='example' class='flora' title='This is my title'>I'm in a dialog!</div>

").dialog({
        buttons: {
            "Ok": function() {
                alert("Ok");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
}

I also wanted to use this script with Chromium browser, the open-source version of Google Chrome. I found the TamperMonkey Extension for Chrome. Stylish is also available for Chrome.

I figured it’d be best to come up with a simple solution, so I started coding something out in bash and it worked:

#!/bin/bash
# css.sh - generate common css and html
# Tyler Mulligan (z@interwebninja.com)
# Last Update: 02/16/2011
# MIT License

create_block_image() {
    feh -lr ${1:-.} | awk '{ print $3" "$4" "$8 }' | sed '1d' | while read l; do N=$((N+1));
        cbi_css $l
    done
    feh -lr ${1:-.} | awk '{ print $3" "$4" "$8 }' | sed '1d' | while read l; do N=$((N+1));
        cbi_html_a $l
    done
    feh -lr ${1:-.} | awk '{ print $3" "$4" "$8 }' | sed '1d' | while read l; do N=$((N+1));
        cbi_html_div $l
    done
}
cbi_css() {
    f=${3##*/}
    echo "#${f%.*} {
    display: block;
    background: url('$3') no-repeat 0 0;
    width: 0;
    height: $2px;
    padding-left: $1px;
    overflow: hidden;
}"
}
cbi_html_a() {
    f=${3##*/}
    echo "<a href=\"#\" id=\"${f%.*}\" alt=\"$f\" title=\"$f\">${f%.*}</a>"
}
cbi_html_div() {
    f=${3##*/}
    echo "
<div id=\"${f%.*}\"></div>

"
}

s=$1; shift; case $s in
  --image-block|--cbi|-i) create_block_image $@;;
  *) help help;;
esac

Which ouputs something like:

z@zygon:~/scripts/css$ ./css.sh -i img/
#dumbtubes-fav {
    display: block;
    background: url('img/dumbtubes-fav.png') no-repeat 0 0;
    width: 0;
    height: 14px;
    padding-left: 16px;
    overflow: hidden;
}
#submit_new {
    display: block;
    background: url('img/submit_new.png') no-repeat 0 0;
    width: 0;
    height: 106px;
    padding-left: 244px;
    overflow: hidden;
}
#dumbtubes-logo {
    display: block;
    background: url('img/dumbtubes-logo.png') no-repeat 0 0;
    width: 0;
    height: 70px;
    padding-left: 274px;
    overflow: hidden;
}
<a href="#" id="dumbtubes-fav" alt="dumbtubes-fav.png" title="dumbtubes-fav.png">dumbtubes-fav</a>
<a href="#" id="submit_new" alt="submit_new.png" title="submit_new.png">submit_new</a>
<a href="#" id="dumbtubes-logo" alt="dumbtubes-logo.png" title="dumbtubes-logo.png">dumbtubes-logo</a>
<div id="dumbtubes-fav"></div>
<div id="submit_new"></div>
<div id="dumbtubes-logo"></div>

To explain the way this CSS works, it uses the padding-left as the actual width, setting the width 0 and then pushes whatever content you have out of view using overflow:hidden to hit it from view. This makes it easy for search engines, keeping your HTML clean and CSS simple.

The bash script relies of “feh” a lightweight image viewer for linux that outputs a list of images and their dimensions. It also generates some sample HTML to quickly drop in and modify.

This is not an elegant solution and I’m not happy with the fact that it relies on feh. I’ve been slowly getting into python and I was amazed at how fast I was able to recreate this script in Python.

#!/usr/bin/python
# css.py - generate common css and html
# Tyler Mulligan (z@interwebninja.com)
# Last Update: 02/17/2011
# MIT License
from PIL import Image
import sys
import os.path

CSS_FORMAT = """#%s {\n\
    display: block;\n\
    background: url('%s') no-repeat 0 0;\n\
    height: %spx;\n\
    width: 0;\n\
    padding: %spx;\n\
    overflow: hidden;\n\
}\n"""

HTML_A_FORMAT = """<a href="#" id="%s" alt="%s" title="%s">%s</a>\n"""
HTML_DIV_FORMAT = """
<div id="%s">%s</div>

\n"""

css=""
html_a=""
html_div=""
for tf in os.listdir(sys.argv[1]):
    f = os.path.join(sys.argv[1],tf)
    if os.path.isfile(f) == True :
        img = Image.open(f)
        fid = os.path.splitext(tf)[0]
        (width, height) = img.size[0:2]
        css += CSS_FORMAT % (fid,f,height,width)
        html_a += HTML_A_FORMAT % (fid,f,fid,fid)
        html_div += HTML_DIV_FORMAT % (fid,fid)

print css
print html_a
print html_div 

This is just the basic idea, I didn’t spend more than 15 minutes on this rewrite, it does what I need it to do so far. It was suggested by friends if I make it any bigger, to look into a templating engine, such as mako. I hope this script can be useful to someone :). PS, HTML_DIV_FORMAT should be on one line, not sure why my syntax highlighter is trying to put it on 3.

+ twitter

So the idea then, is to leverage then is to utilize the ping.fm application from your website. If you’re using WordPress then you’re set, the simple no frills publish 2 ping.fm plugin will allow you to interact with ping.fm from your blog/website.

I’ve tested this out with the free open-source GPL First Person Shooter, Xonotic and a new site I just started dumbtubes.com. Both have twitter accounts that you can see publishing twitter.com/dumbtubes, twitter.com/xonotic. Xonotic also publishes to many other social accounts, see the Xonotic homepage to find other accounts.

Stay tuned for more wordpress tips.

WARNING, this plugin may cause other plugins options panels not to work. I’m not sure the cause yet but be aware that it can cause the sub settings of dedicated plugin setting groups to throw access errors.

I’m releasing this early on my blog just in case I caught any people yesterday who’ve been experimenting with my research / code so far. I’ll share it on github when I evolve it just a bit more.

Video of it in Action

#!/usr/bin/env python
#
# Title: scp-notifications
# Author: Tyler Mulligan (tyler@detrition.net)
# Date: 06/26/2010
# Version: 0.6
# Description:
# Used in combination with an event, such as an action or cronjob, this script
# will scp the latest file from a folder to your server.
#
# Optionally, it can copy the url to your clipboard and/or show a popup with a
# link to the file after succesfully uploading
#
# Orginally developed to be piped to from compiz screenshot tool
# http://interwebninja.com/videos/compiz-screenshot-piped-to-notification-daemon-for-upload.ogv
#
# The MIT License
#
# Copyright (c) 2010 Tyler Mulligan
#
# Permission is hereby granted, free of charge, to any person obtaining a copy
# of this software and associated documentation files (the "Software"), to deal
# in the Software without restriction, including without limitation the rights
# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
# copies of the Software, and to permit persons to whom the Software is
# furnished to do so, subject to the following conditions:
#
# The above copyright notice and this permission notice shall be included in
# all copies or substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
# THE SOFTWARE
#

import pygtk
pygtk.require('2.0')
import pynotify
import gtk
import sys
import os
import subprocess

# Set Variables
#####################################
user = "user"
host = "server.com"
# All should have trailing slashes
lfolder = "/home/user/screenshots/"
hfolder = "/home/remote_user/screenshots/"
httplink = "http://"+host+"/screenshots/"

# Display
#####################################
t1 = 5000 # timeout for screenshot upload dialog
t2 = 3000 # timeout for screenshot preview
t3 = 7000 # timeout for link dialog

screenshot_preview = 1 # If using with the compiz screenshot plugin, you may want this
popup_link = 1 # another popup
copy_to_clipboard = 0 # automatically copy text to keyboard

# Position
#####################################

# Get screensize < < used for relative positioning
display = gtk.gdk.display_get_default()
screen = display.get_default_screen()
x = screen.get_width() - 1
y = screen.get_height() - 1

# 0 for Automatic Placement
"""
x1 = 0
y1 = 0
x2 = 0
y2 = 0
x3 = 0
y3 = 0
"""
# Define Relative Position (assuming top-right)
x1 = x-1
y1 = 12
x2 = x1
y2 = y1 + 100
x3 = x-1
y3 = 12
# Define Static (1920 puts it on my second monitor)
"""
x1 = 1919
y1 = 12
x2 = x1
y2 = y1 + 100
x3 = 1920
y3 = 12
"""
#####################################

def upload_cb(n, action):
    assert action == "upload"

    subprocess.call(["scp", os.path.join(lfolder, f), '%s@%s:%s' % (user, host, hfolder)])

    # setup URL in
    if copy_to_clipboard:
        clipboard = gtk.clipboard_get()
        clipboard.set_text(httplink + f)
        # make our data available to other applications
        clipboard.store()

    # Notification: Link for the clicking
    if popup_link:
        n3 = pynotify.Notification("Here is your link","<a href='" + httplink + f + "'>" + httplink + f + "")

        helper = gtk.Button()
        icon = helper.render_icon(gtk.STOCK_DIALOG_INFO, gtk.ICON_SIZE_DIALOG)
        n3.set_icon_from_pixbuf(icon)

        n3.set_urgency(pynotify.URGENCY_NORMAL)
        if x3:
            n3.set_hint("x", x3)
        if y3:
            n3.set_hint("y", y3)
        n3.set_timeout(t3)
        n3.connect("closed",closen3_cb)

        if not n3.show():
            print "Failed to send notification"
            sys.exit(1)

        closen1_cb(n1)
        closen2_cb(n2)

    gtk.main_quit()
    sys.exit(1)

# Notification 1 was closed
def closen1_cb(n):
    n1.close()
    if screenshot_preview:
        n2.close()
    gtk.main_quit()

# Notification 2 was closed
def closen2_cb(n):
    n2.close()
    gtk.main_quit()

# Notification 2 was closed
def closen3_cb(n):
    n3.close()
    gtk.main_quit()

# The Ignore button was clicked
def ignore_cb(n, action):
    assert action == "ignore"

    closen1_cb(n1)
    closen2_cb(n2)
    gtk.main_quit()

# Main
def main():
    gtk.main()

# Init
if __name__ == '__main__':
    if not pynotify.init("Notifier 'scp' Option"):
        sys.exit(1)

    # Get latest file and build uri
    start = os.path.abspath(lfolder)
    f = max([(os.path.getmtime(os.path.join(start,p)),p)
         for p in os.listdir(start)])[1]
    uri = lfolder + f

    # Notification: Upload to Server
    n1 = pynotify.Notification("Upload to Server?","Copy the file '" + f + "' to the server?")

    helper = gtk.Button()
    icon = helper.render_icon(gtk.STOCK_DIALOG_QUESTION, gtk.ICON_SIZE_DIALOG)
    n1.set_icon_from_pixbuf(icon)

    n1.set_urgency(pynotify.URGENCY_NORMAL)
    if x1:
        n1.set_hint("x", x1)
    if y1:
        n1.set_hint("y", y1)
    n1.set_timeout(t1)
    n1.add_action("upload", "Yes, Upload", upload_cb)
    n1.add_action("ignore", "Ignore", ignore_cb)
    n1.connect("closed",closen1_cb)

    if not n1.show():
        print "Failed to send notification"
        sys.exit(1)

    # Notification: Screenshot Preview
    if screenshot_preview:
        n2 = pynotify.Notification("Screenshot Preview", "", uri)
        n2.set_urgency(pynotify.URGENCY_LOW)
        if x2:
            n2.set_hint("x", x2)
        if y2:
            n2.set_hint("y", y2)
        n2.set_timeout(t2)
        n2.connect("closed",closen2_cb)

        if not n2.show():
            print "Failed to send notification"
            sys.exit(1)

    main()

.

NextGEN Voting is a plugin for the wordpress plugin NextGEN Gallery plugin. Keeping this in mind made the task of extending easier. NextGEN Gallery hooks into wordpress functions, NextGEN Voting hooks into NextGEN Gallery.

By default, NextGEN Voting hooks into the gallery view, giving access to a function that uses the image id for lookup. The only reason we see nothing if we try to paste the same template code into a page other than the recommended “nextgen-gallery/view/gallery.php” is because that function is not given access in any other view.

How-to Add Access to Use the Function in the Image Browser Template

Open “wp-content/plugins/nextgen-gallery-voting/ngg-voting.php”,

Look for:

add_filter("ngg_show_gallery_content", "nggv_show_gallery", 10, 2);

Add After:

add_filter("ngg_show_imagebrowser_content", "nggv_show_imagebrowser", 10, 2);

Look for:

function nggv_show_gallery($out, $gid) {
	return $out.nggc_voteForm($gid, $buffer);
}

Add After:

function nggv_show_imagebrowser($out, $gid) {
	return $out.nggc_voteForm($gid, $buffer);
}

Now we have given access to the function and can paste the following code into “wp-content/plugins/nextgen-gallery/imagebrowser.php”:

<?php echo nggv_imageVoteForm($image->pid); ?>

Conclusion

I’ve tried to explain this in method in a way you can repeat an extend to suit your needs. By following the same logic and tracing the hooks, you can apply this however you might need.

You’ll want to keep “wp-content/plugins/nextgen-gallery/nggfunctions.php” open as a reference for what hooks are available. You can find hooks by searching for “apply_filters(‘”, it will be the first parameter.

Internet standards, including HTML, CSS, and Flash, are based on a gamma of 2.2, making colors partway between black & white appear darker and higher contrast than 1.8 gamma makes them appear.

Clearly this is a problem, as referenced by Ron, even Apple recommends you change your default gamma from 1.8 to 2.2, where they also link to some further reading.

If images are delivered with the lower gamma information embedded, web browsers on macs tend to* (not all see note below) display them incorrectly if it’s not reading the color profile properly.

As a webdesigner / web developer / photographer, this might worry you. You’ll want it too look the same to everyone or at least the majority (95%+ of the world uses windows). The easiest way I found to fix this in my work flow, using Ubuntu Linux was with pngcrush, a cross-platform application that allows you to not only reduce image filesize loseless, but allows you to remove information that can cause confusion with the way images appear in mac web browsers.

All I had to do to install it on Ubuntu was:

sudo apt-get install pngcrush

Then I wrote the following command to strip all gAMA, cHTM, iCCP and sRGB information from all png files within a directory and move them to a folder called “crushed”

pngcrush -d crushed -rem gAMA -rem cHRM -rem iCCP -rem sRGB *.png

*It’s important to point out that this does not effect OSX 10.6+ (snow leopard and beyond). Further reading on why apple chose 1.8 gamma as the default can be found here.

To take this a step further, you could develop a similar list for your router or DNS server (if you operate it).

I still use adblock plus on top for missed entries.

The jquery API is a somewhat familiar interface, featuring the latest version, the freshest functions and some decent documentation. Another in-depth (but outdated) resource is the old api-browser. Of course, there exists the Main Wiki Documentation, which also provides Alternative Resources. I think I’ll find myself using http://api.jquery.com/ most often despite it lacking the multi-panel style selection. It integrates it’s documentation with jsbin.com for testing / playing with code which is a nice touch.

Now a note about callbacks while we’re on the subject of jQuery. I find myself using them quite often, with ajax specifically. Understanding how to nest functions in jQuery allows you to do more things in terms of user or application response. When using ajax, you’ll often want to fade out content, do some processing, report the data back and have it fade back in nicely rather than a quick blink that can cause discomfort for a user. If you aren’t familiar with a callback, it’s a function that’s executed when the current function finishes.

Below I will break down this common scenario.

You have your HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="my_ajax.js" type="text/javascript"></script>
<style>
#ajax_loader {
  display:block;
  height:90px;
  width:90px;
  background:url('http://imgur.com/KW8ZD.gif') no-repeat 0 0;
}
</style>

</head>
<body>
<div id="ajax_loader"></div>
<div id="ajax_content"></div>

  <a href="#" id="my_link">click me</a>
</body>
</html>

your php (or whatever language returning the data file) (my_page.php)

<? echo "hi, I was loaded with ajax!"; ?>

and your javascript (my_ajax.js) that glues them together

// $(function() is shorthand for $(document).ready(function () {
$(function() {
    $("#ajax_loader").hide();
    $("#my_link").click(function() {
        $("#ajax_loader").fadeIn();
        $("#ajax_content").fadeOut();
        $("#content").load("my_page.php",function() {
          $("#ajax_loader").fadeOut();
          $("#ajax_content").fadeIn();
        });
    });
});

Here we can clearly see how all functions are nested into one root, the document ready function. We go two more deep here, using the click event and then the load callback. Many functions allow for callbacks, search the documentation for the best way you think you should be nesting them. I hope this helps to clarify some of the basics in AJAX using jQuery, good luck.

“Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element. The less specific the key, the greater the number of nodes that need to be evaluated.”

So, #home is faster than #menu li a#home; at least in Mozilla’s case. More on this here