AJAX Password Strength

This script checks for the strength of your password using AJAX

More detail

AJAX Password Strength

http://www.hakc.net/2007/04/06/ajax-password-strength/

Autocomplete select dropdown

YUI Autocomplete AJAX Select Drowdown with ID
Posted in Pylons, Mako, JavaScript by thejimmyg on the October 19th, 2007
The YUI toolkit comes with a very flexible autocomplete control but a common requirement is for an autocomplete control that submits the ID associated with a text value rather than the text value itself, much like a select field submits the option value, not the contents the user selects from a drop down list.

Luckily this is fairly easy to achieve using a forceSelection option, a hidden field, and a custom itemSelectEvent handler.

First setup the imports as described on the YUI AutoComplete page:

























Now let’s set up the data structure in a Pylons controller action which the YUI component will access to populate the find as you type select dropdown. You could write similar code for Rails or PHP, it doesn’t have to be Pylons. Notice that the @jsonify decorator converts the Python data structure we return to valid JSON:

@jsonify
def get_data(self):
return {
"ResultSet": {
"totalResultsAvailable":"100",
"totalResultsReturned":2,
"firstResultPosition":1,
"Result": [
{
"ID": "897",
"Title":"foo",
"Summary":"... When foo' is used in connection with bar' it has generally traced...",
"Url":"http:\/\/www.catb.org\/~esr\/jargon\/html\/F\/foo.html",
"ModificationDate":1072684800,
"MimeType":"text\/html"
},
{
"ID": "492",
"Title":"Foo Fighters",
"Summary":"Official site with news, tour dates, discography, store, community, and more.",
"Url":"http:\/\/www.foofighters.com\/",
"ModificationDate":1138521600,
"MimeType":"text\/html"
}
]
}
}
Now we need to write the code to generate the autocomplete control. YUI uses an existing text field as the autocomplete field and this will contain whatever text is looked up. Our application requires the corresponding ID so we need a hidden field to hold that value. The hidden field should have the name you want the ID to be submitted as, the text field can have any name because it doesn’t contain the data the application needs. YUI also needs a container

which it populates with the results. Ours is called myContainer.

Here’s some HTML to achive this:

Sponsor Name

Now let’s add some JavaScript. This can go after the HTML above:




The first line sets up a schema, the first item of which specifies where the actual results are in the data structrue returned (in this case they are in the Result list of the ResultSet dictionary), the subsequent entries specify values within each result which might be displayed in the control.

Test this example by entering foo into the field. It works as expected returning two options and allowing you to select one but the hidden myInput_id field doesn’t get populated.


To populate the hidden field we need to create a callback function and subscribe it to the autocomplete control’s itemSelectEvent. Add the following code at the end of the JavaScript above, just before the script tag:

function fnCallback(e, args) {
YAHOO.util.Dom.get("myInput_id").value = args[2][1];
}
myAutoComp.itemSelectEvent.subscribe(fnCallback);
Now, when an item is selected from the autocomplete control, fnCallback gets called with two arguments. The first is an event object e and the second is a list of arguments described here. These are:

oSelf
The AutoComplete instance.
elItem
The selected

element item.
oData

Reference: http://jimmyg.org/2007/10/19/yui-autocomplete-ajax-select-drowdown-with-id/

Record Mouse Movement

I just found some piece of code i created one or two years ago. The “movelogger” records the mouse movement a users does on a web site. Just before the user leaves the current page, the recorded data get posted back to the server using AJAX.
The cool thing is that you can “replay” these movements afterwards. The movelogger records clicks on links and other elements. In replay mode this events are fired in the exact same order as they have been recorded.
That way it would be possible to record a websesion (the click-flow) in a heavy AJAX based application. It would even be possible to record keyboard strokes and other type of events.

Check out the little demo of the movelogger here.

This technique may be usefull or not. But some use cases could be:

Instead of eye tracking, use mouse tracking.
Analyze the usage of ajax enabled websites.
Spionage and other Bad Things™ (not recommended).
The whole thing is coded in javascript using Prototype and script.aculo.us with some php code on the server side.

The data recorded on the demo website is stored only in the php session on the server and gets deleted automatically, soon after you close your browser. But theoreticaly it would be possible to store that data in some kind of database for further analysis.

Please let me know what you think about this. Do you have any ideas for other uses of this technique ?

reference :http://pure.rednoize.com/2007/10/18/record-mouse-movement-using-javascript-and-ajax/

What is jsProgressBarHandler ?

jsProgressBarHandler is a rewrite of the (unfortunately wrongly named) AJAX Progress / Percentage Bar by Webappers. Improvements made were the change from a set of functions to a true Prototype.js Class, reduction in the number of functions, and making it unobtrusive (if javascript is disabled you'll still see the percentage), amongst some minor tweaks.

jsProgressBarHandler has been tested and verified working in IE6, IE7, FireFox 2 and Safari 3.0.3. Other browsers should work fine too (untested though).

Download

ExtJS JavaScript Framework

April 30, 2007 at 10:29 pm · Filed under JavaScript, Ajax Resources
Ext JS, the JavaScript framework with Ajax and UI Components
Ext JS is a JavaScript Library/Framework which works in conjunction with Prototype, YahooUI and jQuery. It’s probably the most exciting toolkit available for building web 2.0 websites right now. It’s jam packed with features, and is designed to make life much easier for building great UI in JavaScript.
I’ll not dig to deep right now, I suggest you check out the example and demos first to see what you think.
Below is a the script used to grab XML data via Ajax and populate a grid (sortable table like object):

view plaincopy to clipboardprint?

Take a look at the JavaScript generated grid here.
Hopefully this short intro will wet your appetite, more to come soon.
Great work Jack (and the rest of the Ext JS team) for this superb library, can’t wait to see more!!

Free Gallery Code

Slightbox Extension for SmoothGallery (Demo)

Slightbox is a lightbox extension for SmoothGallery. It allows you to show images from SmoothGallery in a lightbox. It features a cooler, darker theme designed by Jonathan Schemoul.

Download Source code