출처 : http://aspnet.4guysfromrolla.com/articles/051408-1.aspx

Introduction
Most security systems' passwords are case-sensitive. Case sensitivity nearly doubles the number of possible characters that can appear in the password, which makes it harder for nefarious users trying to break into the system. As a result, if a user logging into the system has Caps Lock turned on, they'll enter letters in the opposite case and not be able to login. Because the textboxes that collect user input typically are masked to prevent an onlooker from seeing a user's password, the user typing in her password may not realize that Caps Lock is on. To help prevent this type of user error, many login screens for desktop-based applications display some sort of warning if the user's Caps Lock is on when they start typing in their password.

Unfortunately, such functionality is rarely seen in web applications. A 4Guys reader recently asked me if there was a way to provide such feedback to a user logging into an ASP.NET website. The short answer is, Yes. It is possible to detect whether a user has Caps Lock enabled through JavaScript. Likewise, it's possible to have this client-side logic execute whenever a user starts typing in a particular textbox. With a little bit of scripting, such an interface could be devised.

After thinking about the implementation a bit, I decided to create a compiled server-side control that would emit the necessary JavaScript. This article introduces this control, WarnWhenCapsLockIsOn, and shows how it works and how to use it in an ASP.NET web page. Read on to learn more!

In addition to the Label control's properties, the WarnWhenCapsLockIsOn control also has a TextBoxControlId property, which you must set to the ID of a TextBox control. This property is required. (To provide a Caps Lock warning for multiple TextBox controls on the page, add a WarnWhenCapsLockIsOn control for each TextBox.) If the user starts typing in the specified textbox with the Caps Lock on, the WarnWhenCapsLockIsOn control is displayed. The WarnWhenCapsLockIsOn control is hidden again when one of the following conditions apply:

• The user types in the same textbox with Caps Lock off.
• The WarnWhenCapsLockIsOn control has been displayed for WarningDisplayTime milliseconds. The WarningDisplayTime property defaults to a value of 2500, meaning that the control will be displayed for 2.5 seconds after the last character with Caps Lock on has been typed. You can lengthen or shorten this property value as needed. A value of 0 displays the warning until the user types in a character without Caps Lock on or after there's a postback.

To provide a warning to the user if Caps Lock is on, then, you'll add this control to the page, set its Text property (and, perhaps, other formatting properties), and indicate the TextBox to "watch" via the control's TextBoxControlId property. That's all there is to it! We'll discuss how to add the WarnWhenCapsLockIsOn control to your ASP.NET website project and look at an end-to-end example in the "Using the WarnWhenCapsLockIsOn Control in an ASP.NET Web Page" section later on in this article.

Initially Hiding the WarnWhenCapsLockIsOn Control
Whenever the ASP.NET page is loaded in the user's browser, the WarnWhenCapsLockIsOn control needs to be hidden so that it does not appear. The WarnWhenCapsLockIsOn control should only appear when the user starts typing in the specified textbox with Caps Lock on. To initially hide the WarnWhenCapsLockIsOn control, I overrided the control's AddAttributesToRender method and added code that set the visibility and display style attributes to "hidden" and "none", respectively.

The effects of these style attribute settings are evinced by the markup sent to the browser. Because the WarnWhenCapsLockIsOn control extends the Label class, it renders as a <span> element with the value of its Text property rendered as the <span> element's inner content, just like the Label control. In the style attribute you can see that the visibility and display settings have been configured to hide the control:

We now need to write JavaScript that sets the visibility and display settings to "visible" and "inline" whenever the user types into the corresponding textbox with Caps Lock on.

Executing JavaScript in Response to Typing in a Textbox
It is possible to execute JavaScript in response to a variety of client-side events, such as when the document has loaded, when the user changes the selection of a drop-down list, when an input field receives (or loses) focus, or when the user presses a key. To execute client-side script in response to a user pressing a key, use the onkeypress event like so:

The action can be inline script or a call to a function. In addition to noting that a key has been pressed, JavaScript offers the event object, which includes information such as what key was pressed and whether or not the Shift key was depressed, among other useful tidbits. In short, we need to add an onkeypress client-side event handler to the TextBox control referenced by the WarnWhenCapsLockIsOn control's TextBoxControlId property. The event handler called must determine whether Caps Lock is on or off and show or hide the WarnWhenCapsLockIsOn control in response.

To add client-side event handlers to a server-side Web control use the Attributes collection like so:

The above code adds the markup attribute="value" to the Web control's rendered output. Usually this sort of logic is applied during the PreRender stage of the page lifecycle. Therefore, to implement this functionality I overrode the OnPreRender method in the WarnWhenCapsLockIsOn class (which is fired during the PreRender stage) and added the following code:

The GetTextBoxControl method (not shown in this article) returns a reference to the TextBox control specified by the TextBoxControlId property. This referenced TextBox has its Attributes collection updated to include an onkeypress event handler that calls the JavaScript function skm_CheckCapsLock. The skm_CheckCapsLock function (which we'll examine shortly), is passed three input parameters:

• event - information about the keypress event, including what key was pressed and whether the Shift key was depressed.
• The value of the WarnWhenCapsLockIsOn's ClientID property - we need to supply the client-side id of the WarnWhenCapsLockIsOn control so that it can be displayed or hidden, depending on whether the user has Caps Lock on.
• WarningDisplayTime - the number of milliseconds to display the Caps Lock warning; defaults to 2500 milliseconds (2.5 seconds).

The WarnWhenCapsLockIsOn control is one of a few controls in my open-source control library, skmControls2. Another control in the same library is the TextBoxCounter control, which interactively displays how many characters the user has currently typed into a given textbox. (For more information on the TextBoxCounter control, read: Creating a TextBox Word / Character Counter Control.) The TextBoxCounter control requires a bit of JavaScript, and that JavaScript is already defined in a file named skmControls2.js. This file is compiled as an embedded resource in the assembly and is loaded into the ASP.NET page on which the TextBoxCounter or WarnWhenCapsLockIsOn controls are used via a call to the GetWebResourceUrl method. For more information on this technique see: Accessing Embedded Resources through a URL using WebResource.axd.

Because the skmControls2 library already has a JavaScript file, I decided to place the skm_CheckCapsLock function (and ancillary helper functions) there. It is injected into the ASP.NET page in the OnPreRender method (see step 1 in the comments in OnPreRender).

Determining Whether Caps Lock is On
When the keypress event is raised in client-side script, the event object contains information as to what key was pressed and whether the Shift key was depressed (along with whether Alt and Ctrl were depressed). It does not, however, indicate whether Caps Lock was on. The good news is that with a bit of code we can determine whether Caps Lock is on. If the user has entered a capital letter and the Shift key is not depressed, then Caps Lock must be on; likewise, if the user enters a lowercase letter and the Shift key is depressed, then Caps Lock is on.

The skm_CheckCapsLock function determines whether Caps Lock is on and, if so, calls the skm_ShowCapsWarning function, which displays the WarnWhenCapsLockIsOn control for a specified interval. If Caps Lock is not on then the skm_HideCapsWarning function is called, which hides the WarnWhenCapsLockIsOn control. The skm_CheckCapsLock function uses a modified version of a script created by John G. Wang, available online at http://javascript.internet.com/forms/check-cap-locks.html.

The keen reader will note that this check doesn't really identify when Caps Lock is on or off. Rather, it identifies if Caps Lock is on or off when typing in an alphabetic character. If the user types in the number "9" or presses the left arrow, the first conditional statement will evaluate to false. In other words, the skm_ShowCapsWarning or skm_HideCapsWarning functions are only called when the user enters an alphabetic character.

The skm_ShowCapsWarning and skm_HideCapsWarning functions are not shown in this article; you'll have to download the source code to inspect them. They're both fairly straightforward: both reference the WarnWhenCapsLockIsOn control and then set the visibility and display properties to show or hide the warning message. The only trickiness deals with the code that displays the warning for at most a specified number of milliseconds after the user types in with Caps Lock on. Specifically, these functions use the JavaScript setTimeout and clearTimeout methods. For more information on these functions, see the JavaScript Timing Events tutorials at W3 Schools.

Using the WarnWhenCapsLockIsOn Control in an ASP.NET Web Page
The download available at the end of this article includes the complete source code for the WarnWhenCapsLockIsOn controls, as well as a demo ASP.NET website. To use the skmControls2 controls in an ASP.NET website, copy the DLL to the website's /Bin directory and then add the following @Register directive to the tops of the .aspx pages where you want to use the controls:

(Alternatively, you can add this @Register directive in the Web.config file so that you do not need to add it to every ASP.NET page that uses the controls. See Tip/Trick: How to Register User Controls and Custom Controls in Web.config.)

The demo included in the download has an ASP.NET page that shows using the WarnWhenCapsLockIsOn control in two scenarios: on a stand-alone TextBox and on the Password TextBox in the Login control. Let's look at the stand-alone TextBox example first:

The declarative markup above shows three controls: a TextBox (YourName); a WarnWhenCapsLockIsOn control; and a Button Web control. The WarnWhenCapsLockIsOn control is configured to display the message "Warning: Caps Lock is on" when the user types into the YourName textbox with Caps Lock on. It uses the CSS class CapsLockWarning for its styling, which I've defined on the page; the class specifies a light yellow background, padding, centered text, and a red border. The warning message is displayed for (at most) five seconds.

The following screen shot shows the demo page in action. Note that when Caps Lock is on and an alphabetic character is typed, the warning is displayed. This warning immediately disappears when Caps Lock is turned off and another alphabetic character is typed, or after five seconds, whatever comes first.

This demo also shows how to apply the WarnWhenCapsLockIsOn control to the Password TextBox of a Login control. Start by adding a Login control to the page and then, from the Designer, select the "Convert to Template" from its smart tag. This will convert the Login control into a template, at which point you can add the WarnWhenCapsLockIsOn control in the Login user interface as needed, referencing the Password TextBox (whose ID property is "Password"). Be sure to put the WarnWhenCapsLockIsOn control within the Login control's template so that it can "see" the Password TextBox.

Happy Programming!

출처 : http://blog.naver.com/devstory/130038823596

객체의 좌표 값 추출

익스플로러 6 / 파이어폭스 2 에서 테스트 되었습니다.

<HTML>
<HEAD>
 <SCRIPT type = "text/javascript">
  /**
   * 좌표 값을 측정한다.
   *
   * @param obj 측정 요망 객체
   */
  function getBounds( obj ) {
   var ret = new Object();

   if(document.all) {
    var rect = obj.getBoundingClientRect();
    ret.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
    ret.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop);
    ret.width = rect.right - rect.left;
    ret.height = rect.bottom - rect.top;
   } else {
    var box = document.getBoxObjectFor(obj);
    ret.left = box.x;
    ret.top = box.y;
    ret.width = box.width;
    ret.height = box.height;
   }

   return ret;
  }

  /**
   * 버튼 객체의 좌표 추출
   */
  function getThisCoordi() {
   var obj = getBounds( document.getElementById("testBtn") );

   alert( "left : " + obj.left + ", top : " + obj.top + ", width : " + obj.width + ", height : " + obj.height );
  }
 </SCRIPT>
</HEAD>
<BODY>
<P>&nbsp;</P>
<CENTER><INPUT type = "button" id = "testBtn" value = "테스트" onClick = "getThisCoordi()"/></CENTER>
</BODY>
</HTML>

객체의 좌표 값 추출

익스플로러 6 / 파이어폭스 2 에서 테스트 되었습니다.

<HTML>
<HEAD>
 <SCRIPT type = "text/javascript">
  /**
   * 좌표 값을 측정한다.
   *
   * @param obj 측정 요망 객체
   */
  function getBounds( obj ) {
   var ret = new Object();

   if(document.all) {
    var rect = obj.getBoundingClientRect();
    ret.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
    ret.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop);
    ret.width = rect.right - rect.left;
    ret.height = rect.bottom - rect.top;
   } else {
    var box = document.getBoxObjectFor(obj);
    ret.left = box.x;
    ret.top = box.y;
    ret.width = box.width;
    ret.height = box.height;
   }

   return ret;
  }

  /**
   * 버튼 객체의 좌표 추출
   */
  function getThisCoordi() {
   var obj = getBounds( document.getElementById("testBtn") );

   alert( "left : " + obj.left + ", top : " + obj.top + ", width : " + obj.width + ", height : " + obj.height );
  }
 </SCRIPT>
</HEAD>
<BODY>
<P>&nbsp;</P>
<CENTER><INPUT type = "button" id = "testBtn" value = "테스트" onClick = "getThisCoordi()"/></CENTER>
</BODY>
</HTML>

Working on my latest project required quite a degree of development against the Active Directory. Not having had any AD experience before slowed me down for a while, but after trawling through lost of news groups etc, I gathered enough information to do what I needed to do.

I have developed an ADHelper class that will should take care of most AD requirements, from :-

• creating/updating a user
• assigning a user to a group
• enabling/disabling their account
• setting password
• checking if a user is valid
• loggin in
• checking if a user exists
• performing queries

All while returning DataSets to allow easy binding to datagrids etc.

Im by no means an expert, but hopefully this helps some of you facing the same problems that I had.

NOTES
=====

This class will return a mix of ActiveDirectory 'DirectoryEntry' objects and DataSets that u can plug into your business layer

The first couple of lines that set the following private varables, need to be changed so that the 'Configuration' is the .Net ConfigurationSettings.AppSettings["xxx"].ToString, as the configuration object is a custom one that has not been included.

private static string ADPath=Configuration.ADFullPath ;
private static string ADUser = Configuration.ADAdminUser ;
private static string ADPassword = Configuration.ADAdminPassword ;

Change to :-

OC 대화창 옆에 TAB 붙이는 방법

Context Windows in Communicator Using UCMA v2.0

Office Communicator has a number of useful but mostly unknown features. One of these is its ability to display a custom context pane in a conversation window. The context pane shows up where the video goes in a video chat, and displays HTML content from any intranet or trusted URL.

The way to trigger this window is to send a SIP INFO message with a particular type of XML document to the conversation. All of the remote participants that receive the message will then get the context pane in Communicator if they are configured appropriately.

Notice the catch: there are a couple of things that need to be configured on each client in order for the context pane to show up.

First, a registry setting needs to be set to enable the context pane functionality in Communicator. To do this, open up regedit.exe and navigate to:

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Communicator

You may have to create some of those folders if they don’t already exist. Just right-click on the level above it and select New Key.

Once you’ve found the right key, create a DWORD (32-bit) value called EnableConversationWindowTabs, with a value of 1.

So much for registry settings. Next, if the URL you want to use for the content of your context window is not on your local intranet, you will need to add it to your trusted sites. You can do this through Internet Options in Internet Explorer.

Once everything is configured properly, you’ll be able to see the context window when your OCS endpoint receives a SIP INFO message with “call associated data” information.

The code to send this message through UCMA v2.0 is actually quite simple. You will need the format of the XML document, as well as the content type; I like to keep these in constants so the code stays clean.

Here is the text of the XML document. (The {0} in the XML block represents a unique ID for each context pane, and the {1} represents the URL of the content.)

private const string CONTEXT_WINDOW_MESSAGE = "<associatedData xmlns=\"http://" + 

            "schemas.microsoft.com/LCS/2007/04/CallAssociatedData\" xmlns:xsi=\"http://" + 

            "www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://" + 

            "schemas.microsoft.com/LCS/2007/04/CallAssociatedData\">" + 

            "<associatedDataElement id=\"{0}\" purpose=\"CWurl\">" + 

            "<urlToHost>{1}</urlToHost><closeWithWindow>false</closeWithWindow>" + 

            "</associatedDataElement></associatedData>";

Here is the content type:

private const string CONTEXT_WINDOW_CONTENT_TYPE = "application/ms-call-associated-data+xml";

An integer instance variable will help keep track of the next unique ID in the sequence.

private int _contextWindowId = 1;

Before you can send the INFO message, you will already have had to set up a CollaborationPlatform, endpoint, conversation, and call. If you need help with the steps, you should be able to find detailed instructions in the UCMA v2.0 SDK documentation, or you can look at some of the samples that come packaged with the SDK.

In order to send the INFO message, we need to call the BeginSendInfo method on an established call. The BeginSendInfo method takes a byte array for the content of the INFO message, so the next step is to encode the XML document as a byte array:

 byte[] bytes = Encoding.UTF8.GetBytes(string.Format(CONTEXT_WINDOW_MESSAGE, 

                _contextWindowId++, _url));

Notice that I’m plugging the context window ID and the content URL into the XML document, and also incrementing the context window ID.

Finally, we call BeginSendInfo on the Call object, passing in the content type, the byte array, and a callback delegate. If everything is set up correctly, the remote participant(s) in the call will see the context pane appear in their conversation windows.

infoMessageCall.BeginSendInfo(

                new System.Net.Mime.ContentType(CONTEXT_WINDOW_CONTENT_TYPE), bytes, null, 

                asyncResult => infoMessageCall.EndSendInfo(asyncResult), null

            );

If a configuration problem is preventing the context window from working properly, you should see an error message in the conversation window that says “Could not display a form related to this conversation, which may prevent access to some options. If this problem persists, contact your system administrator.” If you are getting this message, check the registry setting again, and make sure that the URL you are using is a trusted site. You can also try looking at the properties of the SipResponseData object that is returned by the EndSendInfo method; this may give you a clue to the problem.

Note that you are perfectly free to pass in a query string parameter in the URL you send. You can do some really cool contextual things by linking to server-side applications that display data dynamically based on the parameters passed in with the URL.

Here is the complete code of my ContextWindowMessage class:

/// Handles the sending of the INFO message that causes the extended window 

/// to appear in Communicator.

/// </summary>

public class ContextWindowMessage {

    #region Constants

    private const string CONTEXT_WINDOW_MESSAGE = "<associatedData xmlns=\"http://" +

        "schemas.microsoft.com/LCS/2007/04/CallAssociatedData\" xmlns:xsi=\"http://" +

        "www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://" +

        "schemas.microsoft.com/LCS/2007/04/CallAssociatedData\">" +

        "<associatedDataElement id=\"{0}\" purpose=\"CWurl\">" +

        "<urlToHost>{1}</urlToHost><closeWithWindow>false</closeWithWindow>" +

        "</associatedDataElement></associatedData>";

    private const string CONTEXT_WINDOW_CONTENT_TYPE = 

        "application/ms-call-associated-data+xml";

    #endregion

    private int _contextWindowId = 1;

    private string _url = string.Empty;

    public ContextWindowMessage(string url) {

        if (string.IsNullOrEmpty(url)) {

            throw new ArgumentException("URL cannot be null.");

        }

        _url = url;

    }

    /// <summary>

    /// Sends the INFO message with the URL for the extended window.

    /// </summary>

    /// <param name="infoMessageCall">The call in which to send the INFO message.</param>

    public void SendToCall(Call infoMessageCall) {

        // We need to supply the INFO message as a byte array. The message itself is an 

        // XML document, whose format is in the CONTEXT_WINDOW_MESSAGE constant.

        byte[] bytes = Encoding.UTF8.GetBytes(string.Format(CONTEXT_WINDOW_MESSAGE, 

            _contextWindowId++, _url));

        // To send the INFO message, we use the BeginSendInfo method on the Call 

        // (not the Flow). In order for the extended window to appear, the first

        // parameter (the content type) should be "application/ms-call-associated-data+xml".

        infoMessageCall.BeginSendInfo(

            new System.Net.Mime.ContentType(CONTEXT_WINDOW_CONTENT_TYPE), bytes, null, 

            asyncResult => infoMessageCall.EndSendInfo(asyncResult), null

        );

    }

}

AD 설치 PC --> Active Directory 사용자 및 컴퓨터 --> 도메인 선택
--> Computers 선택 --> 원격 접근할 PC 선택 후 관리 선택 --> 로컬 사용자 및 그룹 --> 그룹 --> 허용할 도메인 User 추가.

by Noura Yehia

JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.

To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last.

You may want to take a look at the following related posts:

• jQuery and JavaScript Coding: Examples and Best Practices
• 75 (Really) Useful JavaScript Techniques
• 80+ AJAX-Solutions For Professional Coding
• 60 More AJAX- and Javascript Solutions For Professional Coding

Dynamic Content

1. Build A Login Form With jQuery
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

2. Spoiler Revealer with jQuery
A simple technique that hides some content first and fades it in once a link is clicked.

3. AJAX Upload
This AJAX file upload plug-in allows users to easily upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.

4. FCBKcomplete
Give your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.

5. Create Accessible Charts Using Canvas and jQuery
This tool is proof that you can use the <canvas> element to illustrate HTML table data. The idea is a good one: putting the data in a table allows it to remain accessible, while the chart can be shown for visual enhancement.

Form Manipulation

6. Radio Button and Check Box Replacement
This jQuery tool replaces radio buttons and check boxes with a more appealing display.

7. Submit a Form without a Page Refresh

8. jQuery AJAX Contact Form
Here is a quick and easy way to make a jQuery AJAX contact form with a “honeypot” to foil email bots, load success and error messages dynamically without leaving the page and provide descriptive error messages detailing why submitted values have failed validation.

9. Simple jQuery Form Validation
This jQuery form shows live form-input validators both server-side and browser-side.

Navigation Menus

10. jQuery Context Menu
A context menu plug-in for jQuery that features easy implementation, keyboard shortcuts, CSS styling and control methods.

11. Kwicks for jQuery
Kwicks for jQuery started off as a port of the incredibly attractive MooTools framework, but has evolved into a highly customizable and versatile widget.

12. jQuery iPod-style Drilldown Menu
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

13. jQuery File Tree
The jQuery File Tree is a configurable AJAX file-browser plug-in for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

14. How to Create a MooTools Home Page-Inspired Navigation Effect
In this tutorial, you’ll recreate the same effect seen in MooTools’s menu, but in jQuery!

15. CSS Sprites2
This tutorial demonstrates how to implement inline CSS Sprites2 using jQuery.

Manipulating Content

16. jQuery books widget
With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

17. Text Size Slider
This tutorial explains how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site.

18. Pagination
Create navigational elements: when you have a large number of items, you can group them into pages and present navigational elements that allow users to move from one page to another.

19. Coda-Slider
As with the last tool, groups items together using navigational elements that allow users to move from one page to another.

20. Creating a Slick Auto-Playing Featured-Content Slider
If you love the Coda-Slider plug-in for jQuery, then you will find this plug-in very useful for displaying lots of content in a small area. This nice plug-in adds some features not found in the original Coda-Slider, such as slowly cycling through panels, auto-playing different types of custom content. An arrow indicator serves as a visual indication of which panel you are currently viewing.

• Demo can be found here.
• Download files here.

21. haccordion
A simple horizontal accordion plug-in for jQuery.

Tabular Data and Grids

22. Table Row Checkbox Toggle
This tool generically adds a toggle function to any table row you specify based on a CSS class name. It will, by default, toggle on any check boxes within that table row.

23. Tablesorter
Tablesorter is a jQuery plug-in that turns a standard HTML table with <th> and <td> tags into a sortable table without the need for page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data, in a cell.

24. TableEditor
TableEditor provides flexible in-place editing of HTML tables. User-defined handler functions can easily be dropped in to update, for example, a data source via an AJAX request.

25. Scrollable HTML Table
This JavaScript code can be used to convert ordinary HTML tables into scrollable ones.

Lightbox Techniques

26. Revealing Photo Slider
Learn how to create a thumbnail photo gallery, where clicking a button reveals the entire photo and more information about that photo.

27. FancyBox
FancyBox was born to automatically scale large images to fit in windows, adding a nice drop-shadow under the zoomed item. It can be used to group related items and add navigation between them (using a pre-loading function). FancyBox is totally customizable through settings and CSS.

28. Facebox Image and Content Viewer
Facebox is a lightweight Facebook-style Lightbox that can display images, divs, and even entirely remote pages (via AJAX) inline on a page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

29. jQuery.popeye
jQuery.popeye is a plug-in that transforms an unordered list of images into a simple image gallery. When an image is clicked, it enlarges Lightbox-style. The images are displayed in a box with “Previous” and “Next” controls, and information about the images can be included.

Image Galleries and Viewers

30. Simple Controls Gallery
Simple Controls Gallery rotates and displays each image by fading it into view over the previous one, with navigation controls that pop up when the mouse hovers over the gallery. The controls allow the user to play, pause or jump to a specific image in the gallery.

31. Agile Carousel
This jQuery plug-in allows you to easily create a custom carousel. Use the jQuery UI to enable many different types of transition. The plug-in uses PHP to call images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

Browser Tweaks

32. Setting Equal Heights with jQuery
A script to equalize the heights of boxes within the same container and create a tidy grid.

33. jQuery IE6 PNG Transparency Fix
Another IE6 PNG fix that uses jQuery selectors to automatically fix all PNG images on a page.

34. BGI frame
This tool helps ease the pain of dealing with IE z-index issues. You can find a demo here.

35. Fix Overflow
IE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue.

36. Lazy Load
Lazy Load delays the loading of images below the fold on long pages. As the user scrolls down, the images are loaded as needed. Check out the demo here.

37. Maxlength
It’s a fairly common design practice to limit the number of characters a user can input in a field while giving feedback on how many spaces are left. This plug-in automates that task.

Animation Effects

38. Scrollable
Scrollable is a flexible and lightweight (3.9 KB) jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML, such as text, images, forms, video or any combination of them. You can make items scroll horizontally or vertically and decide how many items are visible at once.

39. jQuery Fading Menu - Replacing Content
“Instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.”

40. Build an Animated Cartoon Robot with jQuery
This effect simulates a faux 3-D animated background reminiscent of old-school side-scrolling video games (and not unlike the parallax effect). This effect is created by layering several empty divs over each other, with transparent PNGs as background images. The backgrounds are animated at different speeds using jQuery.

41. Flip
Flip is a plug-in for jQuery that “flips” page elements in four directions. Compatible with Firefox 2+, Internet Explorer 6+, Safari 3.1 (for Windows) and Google Chrome.

• Download files here.

42. Use jQuery for Background Image Animations
Animate your menu whenever a user hovers over an item with this effect.

Image Manipulation

43. Jcrop
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

44. jQZoom
JQZoom is a JavaScript image magnifier that makes it really easy to magnify what you want. It is easy to customize and works on all modern browsers.

Miscellaneous

45. Date Range Picker
A rich date-range widget that uses the jQuery UI’s date picker and some additional custom interaction.

46. Sortable Lists
Unordered lists are commonly used to structure a website’s navigation. Having the ability to re-order such lists would be extremely useful. Here is a method to easily save and reload the list element order without getting lost as the page is refreshed.

47. Amazing Music Player Using Mouse Gestures and Hotkeys
Learn how to create an amazing music player, coded in XHTML and jQuery, that makes use of mouse gestures and hotkeys. You can click and drag the mouse to interact with the music player’s interface or use directional keys and the space bar instead of the mouse.

48. Script for Tracking Outbound Links in Google Analytics with jQuery
This code snippet uses Google Analytics and jQuery to automatically track outbound links. This interesting script enhances behavior by comparing the link’s domain to the current page’s domain and, if they are different, triggering the behavior. This is helpful when using a CMS or other tool that generates full URLs, including the “http://,” instead of relative ones.

<script type="text/javascript">
	$('#content a:not(.popupwindow)').filter(function() {
		var theHref = this;
		if (theHref.hostname && theHref.hostname !== location.hostname) {
			$(theHref).not(".noAutoIcon").addClass("offSite");
			$(theHref).not(".noAutoLink").attr('target','_blank').bind('click keypress', function(event) {
				var code=event.charCode || event.keyCode;
				if (!code || (code && code == 13)) {
					if(pageTracker){
						var fixedLink = this.href;
						fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
						fixedLink = '/outgoing/'   fixedLink;
						pageTracker._trackPageview(fixedLink);
					};
				};
			});
		};
	});
</script>

49. jGrowl
jGrowl is a jQuery plug-in that delivers unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

Related posts

You may want to take a look at the following related posts:

• jQuery and JavaScript Coding: Examples and Best Practices
• 75 (Really) Useful JavaScript Techniques
• 80+ AJAX-Solutions For Professional Coding
• 60 More AJAX- and Javascript Solutions For Professional Coding

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

The plugin is known to work with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+. If you find a problem, please report it. Drawing is done with the canvas tag introduced by Safari and now available on all major browsers, except Internet Explorer where the excanvas Javascript emulation helper is used.

Examples

Take a look at the examples to see how it works, or look at FlotUsage to see some real projects using Flot.

Documentation

Besides the examples, there's a README, FAQ and the API documentation, all for the development version. The NEWS will tell you the changes.

You could also take a look at the TODO, although most of the suggestions are in the bug tracker.

If you need more help, you can ask on the mailing list. You can probably save yourself some time skimming the FAQ first.

Who's behind this?

The development so far has mostly been done by Ole Laursen, sponsored by IOLA, a small Danish web-development house focusing on Django and jQuery. If you need commercial support, you're welcome to contact us.