JavaScript Tutorials: January 2010

Sunday, January 17, 2010

when this javascript function is called?

Hello everyone,

I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. I am learning the following code dealing with javascript, my confusion is for $(function(){...} part of code, when it will be called and what is its function? I did not see any code invokes this function.

<!doctype html>
<html lang="en">
<head>
  <title>Test</title>
  <link type="text/css" href="tabcontrol/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>
  <script type="text/javascript">
      $(function() {
          $("#tabs").tabs();
      });
  </script>
</head>
<body>

<div class="demo">

<div id="tabs">
  <ul>
      <li><a href="#tabs-1">tab1</a></li>
      <li><a href="#tabs-2">tab2</a></li>
  </ul>
  <div id="tabs-1">
      <p>tab1 info</p>
  </div>
  <div id="tabs-2">
      <p>tab2 info</p>
  </div>
</div>

</div>

</body>
</html>

thanks in advance, George

Please Post Comment your answers

How can I programmatically inspect an ActiveXObject at runtime, using Javascript?

I am looking to create a Javascript library for ActiveX objects, enabling chainability.

Answers

Only objects that implement IDispatchEx can be inspected at runtime. MSDN specifically lists the differences between IDispatch and IDispatchEx:

IDispatchEx was developed to provide all the services of IDispatch as well as some extensions that are appropriate for more dynamic late-bound languages such as scripting languages. The additional features of IDispatchEx beyond those provided by IDispatch are:

Add new members to an object ("expando").

Delete members of an object.

Case-sensitive dispatch operations.

Search for member with implicit name.

Enumerate DISPIDs of an object.

Map from DISPID to element name.

Obtain properties of object members.

Method invocation with this pointer.

Allow browsers that support the concept of name spaces to obtain the name space parent of an object.

I've made bold the relevant issue.

As Eric points out in the comments, you can use enumerate the members of the objects using foreach (or for...in perhaps?), but I'm not sure, from the question, what you specifically want to do.

Since not all ActiveX controls will implement IDispatchEx (or may not implement all methods of IDispatchEx properly or completely), are there specific controls you're looking to play with?

More details will lead to better answers.

parse a character out of a string in javascript

if i have a number of string like this

var info = "Information4Table"
var next = "Joe5Table"
var four = "ERweer11Table"
var nice = "ertertertn14Table"

and i want to parse out the number between the first word and the string "Table". So for the first item, i want to get "4" and in the last i would want to get "14". what would be the best way to do this javascript / jquery

Answers

1. You can use a regular expression to get the number from the string:

var n = /\d+/.exec(info)[0];

2. Another option would be to use regular expressions to take numbers out of the string:

var my_str="ERweer11Table";
var my_pattern=/\d+/g;
document.write(my_pattern.match(patt1));

This would output "11"

3. You can use a regular expression for just this sort of thing, especially handy/performant if the pattern doesn't change:

var regex = new RegExp(/[0-9]+/);   // or \d+ will also capture all digits
var matches = +regex.exec(yourStringHere);
var value = matches ? matches[0] : "";

Keep around the regex object and you can use it for all your processing needs. The matches variable will contain null if there's no number in the string, or an array with the matches if there was one or more. The value will have your number in it. The leading '+' operator ensures it's a number type instead of a string type.

HTML CSS JS navigation list issue

I am working on a small application below where there is a collection of list items all list items should be within the box no matter how many they are like they can be on the second column. Also I want to keep a limit on the number of list items that can be displayed like not more then say 10 so the moment there are 10 items the 10th item should be omitted and "View All" should be displayed. so once user clicks on View All he can be directed to the second page and all items can be displayed.

below is my code.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#container {

border: 1px dotted #D7D7D7;
padding: 0px 5px 5px 8px;
height: 250px;
width: 250px;


}


#heading {

}
ul {
display: inline;
}
ul li{
display: block;
}

</style>
</head>
<div id="container">
<div id="heading">Style </div>
<ul>
   <li> >>1 </li>
   <li> >>2 </li>
   <li> >>3 </li>
   <li> >>4 </li>
   <li> >>5 </li>
   <li> >>6 </li>

</ul>



</div>
<body>
</body>
</html>

Answers

Hey Josh,

If you're looking to limit the amount of items displayed you can do this with a fixed width on your list items and overflow hidden to clip additional items from being displayed.

<style>
ul {
     height: 20px;
     overflow: hidden;
     width: 180px;
   }

li {
     display: block;
     float: left;
     height: 20px;
     width: 20px;
   }

ul.unlimited {
    height: auto;
}

#view_all {
    display: none;
}
</style>

No for displaying the view all link. I would advise generating that on the server side. However if you don't have control over that, you can do this with javascript for example you could make a simple jquery script:

<script>
       $(document).ready(function() {
         if ($("#container ul li").length > 9) {
           $("#view_all").show().click(function() {
             $("#container ul").addClass("unlimited");
             return false;
           });
         }
       });
</script>

Here I'm assuming you have an anchor embedded in your html with an id of "view_all". You can see what we're doing here. The CSS hides the view all link by default and uses a fixed width and height on the list. If there are more than 10 items they won't be visible as the default styling only permits 9 to be shown. However, the jquery script will tell the web browser to make the view all link visible. Then we assign a click event handler on that link. This applies a class to the list which removes the fixed height allowing all of the list items to be displayed.

You can handle this in a variety of different ways but this is one simple solution. Also note that you would want to add an id or class to the unsorted list so you could be a bit more explicit in your CSS/JS code.

What property is alert showing me?

When I am writing Javascript, I use window.alert() to debug. Usually I pass variables to alert and it pops up with a string containing that variables value. However, if I pass alert an object, it tells me the type of the object. For example:

var form = document.getElementById("my_form");
alert(form); // returns [object HTMLFormElement]

That bit, the part that says [object blah blah]. What property is that? I have recently started making my own objects to encapsulate useful parts of the site I am working on... but when I pass my own objects to alert it gives me the generic message [object Object], which is not very helpful if I have made a bunch of different kinds of object. I would prefer, for instance, my object to return to me something more along the lines of [object My_Object].

Is there a property I can set in function My_Object() that will tell alert what I want it to tell me?

Thanks!

Create hidden cmd javascript

I'm looking for a way to run a cmd command without showing the cmd window to the user.

I'm using something like:


   function reboot()  {
         var ws = new ActiveXObject("WScript.Shell");
         ws.Exec("shutdown.exe -r -t 120");

   }

But it still shows the window, is there anyway not to show it?

Thanks

How do I break this script

(function () {
    var h = {
        userName: "4-12\u4e2a\u82f1\u6587\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u4e0b\u5212\u7ebf",
        userNameMin: "\u4e0d\u80fd\u5c0f\u4e8e4\u4e2a\u5b57",
        userNameMax: "\u4e0d\u80fd\u8d85\u8fc712\u4e2a\u5b57",
        userNameExist: "\u8be5\u7528\u6237\u540d\u5df2\u88ab\u6ce8\u518c\u4e86\uff0c\u8bf7\u6362\u6362",
        userNameInvalid: "\u53ea\u652f\u6301\u82f1\u6587\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u4e0b\u5212\u7ebf",
        userNameStartInvalid: "\u7528\u6237\u540d\u4e0d\u80fd\u4ee5\u4e0b\u5212\u7ebf\u5f00\u5934",
        nickName: "6\u4f4d\u4ee5\u5185\u4e2d\u6587\u621612\u4f4d\u4ee5\u5185\u82f1\u6587\u5b57\u7b26",
        nickNameMin: "\u4e0d\u80fd\u5c0f\u4e8e1\u4e2a\u5b57",
        nickNameMax: "\u4e0d\u80fd\u8d85\u8fc76\u4e2a\u6c49\u5b57\u621612\u4e2a\u82f1\u6587\u5b57\u7b26",
        nickNameExist: "\u8be5\u540d\u5b57\u5df2\u88ab\u5360\u7528\uff0c\u8bf7\u6362\u6362",
        nickNameInvalid: "\u53ea\u652f\u6301\u4e2d\u6587\u3001\u5b57\u6bcd\u6216\u6570\u5b57\uff0c\u4e0d\u652f\u6301\u7a7a\u683c\u548c\u7279\u6b8a\u7b26\u53f7",
        nickNameError: "\u540d\u5b57\u4e2d\u542b\u6709\u8fdd\u7981\u8bcd\uff0c\u8bf7\u4fee\u6539\uff0c\u671b\u8c05\u89e3",
        password: "6-16\u4f4d\u82f1\u6587\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u4e0b\u5212\u7ebf",
        passwordMin: "\u4e0d\u80fd\u5c0f\u4e8e6\u4e2a\u5b57\u7b26",
        passwordMax: "\u4e0d\u80fd\u8d85\u8fc716\u4e2a\u5b57\u7b26",
        passwordInvalid: "\u53ea\u652f\u6301\u82f1\u6587\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u4e0b\u5212\u7ebf",
        password1: "\u8bf7\u518d\u786e\u8ba4\u4e00\u6b21\u4f60\u8f93\u5165\u7684\u5bc6\u7801",
        password1Invalid: "\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4",
        email: "\u8bf7\u8f93\u5165\u4f60\u5e38\u7528\u7684Email",
        emailExist: "\u8be5Email\u5df2\u88ab\u6ce8\u518c",
        emailInvalid: "Email\u683c\u5f0f\u4e0d\u6b63\u786e",
        sex: "\u8bf7\u9009\u62e9\u4f60\u7684\u6027\u522b",
        validateCode: "\u8bf7\u8f93\u5165\u56fe\u50cf\u4e2d\u7684\u6587\u5b57",
        validateCodeInvalid: "\u9a8c\u8bc1\u7801\u9519\u8bef",
        loading: '<img align="absmiddle" alt="" src="http://images.digu.com/web_res_v1/images/ico_loading16.gif" /> \u6b63\u5728\u68c0\u67e5\u552f\u4e00\u6027',
        checkCode: '<img align="absmiddle" alt="" src="http://images.digu.com/web_res_v1/images/ico_loading16.gif" /> \u6b63\u5728\u68c0\u67e5\u9a8c\u8bc1\u7801',
        ok: '<img align="absmiddle" alt="ok" src="http://images.digu.com/web_res_v1/images/ico_valid.gif" />',
        required: "\u5fc5\u586b"
    },
        a = 4,
        j = 12,
        e = 1,
        k = 12,
        r = 6,
        x = 16,
        l = "/jump?aid=reg_validate",
        d = true,
        o = true,
        B = true;
    var p = $("#userName"),
        D = $("#nickName"),
        c = $("#password"),
        s = $("#password1"),
        z = $("#email"),
        q = $('input[name="sex"]'),
        i = $("#validateCode"),
        b = {};
    b[p.attr("id")] = u(p),
    b[D.attr("id")] = u(D),
    b[c.attr("id")] = u(c),
    b[s.attr("id")] = u(s),
    b[z.attr("id")] = u(z),
    b[q.attr("name")] = u(q),
    b[i.attr("id")] = u(i);

    function t(E) {
        var G = A(E.val()),
            F = b[E.attr("id")];
        if (G.length < a) {
            F.showErr(h.userNameMin)
        } else {
            if (G.length > j) {
                F.showErr(h.userNameMax)
            } else {
                if (!/^([a-z]|[A-Z]|[0-9])[0-9a-zA-Z_]+$/.test(G)) {
                    F.showErr(h.userNameStartInvalid)
                } else {
                    if (!g(G)) {
                        F.showErr(h.userNameInvalid)
                    } else {
                        if (w(G)) {
                            F.showErr(h.userNameExist)
                        } else {
                            F.showTips(h.loading);
                            $.getJSON(l, {
                                tag: "userName",
                                userName: G
                            },


                            function (H) {
                                if (H.result == "successName") {
                                    F.showOk(h.ok);
                                    d = true
                                } else {
                                    if (H.result == "existName") {
                                        F.showErr(h.userNameExist);
                                        d = false
                                    }
                                }
                            })
                        }
                    }
                }
            }
        }
    }
    function w(F) {
        var E = /^(1[3|5|8][0-9]{9})$/;
        return E.test(F)
    }
    function v(E) {
        var G = A(E.val()),
            F = b[E.attr("id")];
        if (!n(G)) {
            F.showErr(h.nickNameInvalid)
        } else {
            if (C(G) < e) {
                F.showErr(h.nickNameMin)
            } else {
                if (C(G) > k) {
                    F.showErr(h.nickNameMax)
                } else {
                    F.showTips(h.loading);
                    $.getJSON(l, {
                        tag: "nickName",
                        nickName: G
                    },


                    function (H) {
                        if (H.result == "successNickName") {
                            F.showOk(h.ok);
                            o = true
                        } else {
                            if (H.result == "repeatNickName") {
                                F.showErr(h.nickNameExist);
                                o = false
                            } else {
                                if (H.result == "errorNickName") {
                                    F.showErr(h.nickNameError);
                                    o = false
                                }
                            }
                        }
                    })
                }
            }
        }
    }
    function u(F) {
        var E = F.parents("tr").find(".tips-box");
        return {
            showTips: function (G) {
                F.addClass("reg-ipt-focus");
                E.removeClass("tips-box-err").removeClass("tips-box-ok").html(G).show()
            },
            showErr: function (G) {
                F.addClass("reg-ipt-focus");
                E.addClass("tips-box-err").removeClass("tips-box-ok").html(G).show()
            },
            showOk: function (G) {
                F.addClass("reg-ipt-focus");
                E.addClass("tips-box-ok").removeClass("tips-box-err").html(G).show()
            },
            hide: function () {
                F.removeClass("reg-ipt-focus");
                E.hide()
            }
        }
    }
    function g(F) {
        var E = new RegExp("^[A-Za-z0-9_]+$");
        return F.match(E)
    }
    function n(F) {
        var E = /^([0-9a-zA-Z\u4E00-\u9FA5])+$/;
        return E.test(F)
    }
    function C(H) {
        var G = 0;
        var F = /([\u4E00-\u9FA5])/;
        for (var E = 0; E < H.length; E++) {
            if (F.test(H.charAt(E))) {
                G += 2
            } else {
                G++
            }
        }
        return G
    }
    function y(E) {
        return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(E)
    }
    function m(E) {
        return E.replace(/(^\s*)/g, "")
    }
    function f(E) {
        return E.replace(/(\s*$)/g, "")
    }
    function A(E) {
        return f(m(E))
    }
    $("#regForm").submit(function () {
        var E = true;
        if (p.val() == "") {
            b[p.attr("id")].showErr(h.required);
            E = false
        }
        if (D.val() == "") {
            b[D.attr("id")].showErr(h.required);
            E = false
        }
        if (c.val() == "") {
            b[c.attr("id")].showErr(h.required);
            E = false
        }
        if (s.val() == "") {
            b[s.attr("id")].showErr(h.required);
            E = false
        }
        if (c.val().toLowerCase() != s.val().toLowerCase()) {
            b[s.attr("id")].showErr(h.password1Invalid);
            E = false
        }
        if (z.val() == "") {
            b[z.attr("id")].showErr(h.required);
            E = false
        }
        if (i.val() == "") {
            b[i.attr("id")].showErr(h.required);
            E = false
        }
        if (q.filter(":checked").length == 0) {
            b[q.attr("name")].showErr(h.required);
            E = false
        }
        return E
    });
    $(".reg-ipt").focus(function () {
        b[this.id].showTips(h[this.id])
    }).blur(function () {
        if ($(this).val() == "") {
            b[this.id].hide()
        }
    });
    p.blur(function () {
        if ($(this).val() != "") {
            t($(this))
        }
    }).keyup(function () {
        $("#userDomain").text($(this).val())
    });
    D.blur(function () {
        if ($(this).val() != "") {
            v($(this))
        }
    });
    c.keyup(function () {
        if (c.val() != "") {
            $("#confirmPwd").show()
        } else {
            $("#confirmPwd").hide()
        }
    }).blur(function () {
        var F = $(this).val(),
            E = b[this.id];
        if (F != "") {
            if (F.length < r) {
                E.showErr(h.passwordMin)
            } else {
                if (F.length > x) {
                    E.showErr(h.passwordMax)
                } else {
                    if (!g(F)) {
                        E.showErr(h.passwordInvalid)
                    } else {
                        E.showOk(h.ok)
                    }
                }
            }
        }
    });
    s.blur(function () {
        var F = $(this).val(),
            E = b[this.id];
        if (F.toLowerCase() != c.val().toLowerCase()) {
            E.showErr(h.password1Invalid)
        } else {
            E.showOk(h.ok)
        }
    });
    z.blur(function () {
        var F = A($(this).val()),
            E = b[this.id];
        if (F != "") {
            if (!y(F)) {
                E.showErr(h.emailInvalid)
            } else {
                E.showTips(h.loading);
                $.getJSON(l, {
                    tag: "email",
                    email: F
                },


                function (G) {
                    if (G.result == "emailSuccess") {
                        E.showOk(h.ok);
                        B = true
                    } else {
                        if (G.result == "notOnly") {
                            E.showErr(h.emailExist);
                            B = false
                        }
                    }
                })
            }
        }
    });
    q.click(function () {
        var E = b[q.attr("name")];
        if (q.filter(":checked").length > 0) {
            E.showOk(h.ok)
        }
    });
    i.blur(function () {
        var F = $(this).val(),
            E = b[this.id];
        if (F.length != 4) {
            E.showErr(h.validateCodeInvalid)
        } else {
            E.showTips(h.checkCode);
            $.getJSON(l, {
                tag: "code",
                code: F
            },


            function (G) {
                if (G.result == "codeSuccess") {
                    E.showOk(h.ok)
                } else {
                    if (G.result == "errorCode") {
                        E.showErr(h.validateCodeInvalid)
                    }
                }
            })
        }
    });
    $("#changeImgCode").click(function () {
        $("#imgCode").attr("src", "/index/image.jsp?" + (new Date).getTime());
        i.val("");
        return false
    })
})();

Sunday, January 10, 2010

Javascript Plugins that Skin and Beautify Web Forms

Introduction

Alright, another post regarding web form, this time, it's javascript plugins that skin and beautify web forms. As a freelance designer, I found it quite frustrating to see different browsers render form elements differently. They don't look the same. We can skin the textbox and button easily, but form elements like drop down list, checkbox, radio button and file upload are pretty hard to customize it. You would need css and javascript skill to skin it.

In this post, I have found 10 javascript plugin that will able to skin the web form, they will look consistent in different browsers. Some of them skin the entire form elements and some of them skin only checkboxes and radio buttons. Anyhow, I think this is something good to know if your client want to spice up the webform a little bit more.

In this showcase, you will be able to get inspired by the creativity from other web designers.

Download Youtube Videos Easily via JavaScript

Previously, we had seen quite a few ways to download Youtube videos via some software or plugin. If you considered to be easy, how about an easier way to Download Youtube Videos?

The trick is to run a JavaScript on your browser address bar and directly download the video of your choice from Youtube!

Download Regular Quality Youtube Video Direct Links

javascript:window.location.href = 'http://youtube.com/get_video?video_id=' + yt.getConfig('SWF_ARGS')['video_id'] + "&l=" + yt.getConfig('SWF_ARGS')['l'] + "&sk=" + yt.getConfig('SWF_ARGS')['sk'] + '&t=' + yt.getConfig('SWF_ARGS')['t'];

Download High Quality Youtube Video Direct Links [HQ]

javascript:window.location.href = 'http://youtube.com/get_video?video_id=' + yt.getConfig('SWF_ARGS')['video_id'] + "&fmt=18&l=" + yt.getConfig('SWF_ARGS')['l'] + "&sk=" + yt.getConfig('SWF_ARGS')['sk'] + '&t=' + yt.getConfig('SWF_ARGS')['t'];

Download High Definition Youtube Videos Direct Links [HD]

javascript:window.location.href = 'http://youtube.com/get_video?video_id=' + yt.getConfig('SWF_ARGS')['video_id'] + "&fmt=22&l=" + yt.getConfig('SWF_ARGS')['l'] + "&sk=" + yt.getConfig('SWF_ARGS')['sk'] + '&t=' + yt.getConfig('SWF_ARGS')['t'];

Steps to follow:

Open any Youtube Video which you want to download.
Copy the whole script (according to Quality Needed – regular, HQ or HD) and paste it on the address bar of the browser where the video is open.
Now Press Enter Key and download of that Youtube video will start instantly!

That’s it! The video will be downloaded in .FLV format. You can use VLC Player to play the downloaded videos!

Wednesday, January 6, 2010

Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

1.7 reasons why you really should learn jQuery

2. jQuery Crash Course

Introduction to Jquery, further reading and basics.

Huge Tutorial Series From Beginner To Intermediate User, Tips And Tricks

3. jQuery for Absolute Beginners: The Complete Series : Video Tutorials

Over the course of about a month, ThemeForest released fifteen video tutorials that teach you EXACTLY how to use the jQuery library. You’ll start by downloading the library and eventually work our way up to creating an AJAX style-switcher. Beautiful learning and resource!

4. 10 jQuery Tutorials for Designers by WebDesignerWall

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

5.4 Jquery Easy Tips And Tricks Tutorial

6.jQuery Essentials Presentation at MinneWebCon (102 pages)

Very well written jquery essentials presentation. Really worth the time.

7.12 Useful and Handy jQuery Tips and Tricks

8.Improve your jQuery – 25 excellent tips

Great tips, even some intermediate users could now know few of these.

9.Build An Incredible Login Form With jQuery

In this tutorial, you’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel.

Sunday, January 17, 2010

Sunday, January 10, 2010

Introduction

Download Regular Quality Youtube Video Direct Links

Download High Quality Youtube Video Direct Links [HQ]

Download High Definition Youtube Videos Direct Links [HD]

Steps to follow:

Wednesday, January 6, 2010

1.7 reasons why you really should learn jQuery

2. jQuery Crash Course

Huge Tutorial Series From Beginner To Intermediate User, Tips And Tricks

3. jQuery for Absolute Beginners: The Complete Series : Video Tutorials

4. 10 jQuery Tutorials for Designers by WebDesignerWall

5.4 Jquery Easy Tips And Tricks Tutorial

6.jQuery Essentials Presentation at MinneWebCon (102 pages)

7.12 Useful and Handy jQuery Tips and Tricks

8.Improve your jQuery – 25 excellent tips

9.Build An Incredible Login Form With jQuery

10.Create a Photo Admin Site Using PHP and jQuery : ScreenCast

11.Building a jQuery-Powered Tag-Cloud

12.Wordpress Sidebar Turned Apple-Flashy Using jQuery UI

13.How to Load In and Animate Content with jQuery

14.Create a Slick Tabbed Content Area using CSS & jQuery

15.Styling Buttons and Toolbars with the jQuery UI CSS Framework

16.jQuery Slideshows With the Cycle Plugin

17. InnerFade with JQuery

18.Creating a Dynamic Poll with jQuery and PHP

19.Setting Equal Heights with jQuery

20.jQuery Tools: Scrollable

21.jQuery Tools: Tooltips

22.jQuery Tools: Overlay

23.jQuery Tools: Expose

24.Create an amazing music player using mouse gestures & hotkeys in jQuery: Screencast

25.Create an Amazon Books Widget with jQuery and XML

26.Creating a “Filterable” Portfolio with jQuery

27. jQuery Hover Sub Tag Cloud

28. How To Build Quick and Simple AJAX Forms with JSON Responses

29. Simple jQuery Spy Effect

30. Slider Gallery Tutorial: Screencast

31. Semantic Blockquotes with jQuery

32. Jcrop – the jQuery Image Cropping Plugin

33. Horizontal Scrolling Menu made with CSS and jQuery

34. jQuery Sequential List Tutorial

35. How easy to create a slide tabbed box using jQuery

36. How to Mimic the iGoogle Interface

37. jGrowl

38. Creating accessible charts using canvas and jQuery

39. jQuery and Google Maps Tutorial

40. How To Create An Amazing jQuery Style Switcher

41. How-To: Reddit-style Voting With PHP, MySQL And jQuery

42. Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery

Further Reading, Advanced Tips and Tutorial Sites

43.Official Jquery Tutorial Directory

44.LearningJquery

45.15 Days Of jQuery

46.jQuery for Designers

47.Ultimate Jquery List

48. Bassistance

49. Remi Sharp’s Blog

Online jQuery Cheat Sheets

50.VisualJquery 1.2.6

51.jQuery 1.2 cheatsheet wallpaper

52.jQuery 1.2 Cheat Sheet (*pdf file)

53. ColorCharge Jquery CheatSheet

Further reading, similar articles from other resources: