Free Download

Site Search

 

Top Download

Saturday, October 27, 2007

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:

















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 ?


    ASP.NET Wrapper for ExtJs

    The ExtJs Extender controls are a pack of asp.net server controls that wrap the extjs javascript framework.The controls avaiable are:

    YuiGrid- A replacement for the GridView control that is Ajax by default , is better looking and has lots of cool features.
    TreePanel- A cross-browser TreePanel with drag and drop and inline node editing.
    TabPanel- A TabPanel control , very similar to the one in the Asp.net Ajax control toolkit but better looking.
    CalendarExtender- A control that transforms a textbox into a DatePicker.
    ResizableExtender- A control that makes any control resizable with the possibility of keeping the aspect ratio of the control being resized.
    BorderLayout - A control to implement BorderLayout functionality.
    And many more.. just look in the menu on the left
    Requirements
    Asp.net 2.0
    Asp.net Ajax 1.0
    Asp.net Ajax control toolkit

    Demo

    Javascript Image Magnification 2.4 (PopBox)


    V2.4 - Still Easy. Still Simple. Just Better.

    PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page. Javascript? Yes - I know it's nothing new and that you've been able to move and resize things in Javascript for years, but only now is there a prepackaged solution that makes it as easy as 3 lines of HTML without knowing a lick about positioning!

    If your web site has a thumbnail image gallery then you need PopBox!

    Main Features

    Ridiculously simple to use.
    Does not navigate away from the page or create separate windows.
    Does not require any special browser plug-ins. 100% script and CSS solution.
    Includes a multi-line caption capability that dynamically sizes to fit.
    Allows for a different image to be used for the thumbnail and Popped images - on page load or on image click.
    Can display a user-defined text message across the top of the image on page load on the thumbnail image.
    Can display a user-defined text message across the top of the image after it has been popped.
    Please see the Documentation Page for full instructions.

    What can PopBox do?

    It was originally created to magnify your images so you could display small ones on your web page that expanded to show the detail when the user clicked on it (thumbnails).

    Wednesday, October 10, 2007

    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).

    SWFUpload

    What is SWFUpload
    A small javascript/flash library to get the best of both worlds - The great upload capabilitys of flash and the accessibility and ease of html/css
    Upload multiple files at once by ctrl/shift-selecting in dialog
    Javascript callbacks on all events
    Get file information before upload starts
    Style upload elements with XHTML and css
    Display information while files are uploading using HTML
    No page reloads necessary
    Works on all platforms/browsers that has Flash support.
    Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
    Control filesize before upload starts
    Only display chosen filetypes in dialog
    Queue uploads, remove/add files before starting upload

    Download

    Friday, October 5, 2007

    Whizzywig - web based rich text editor for free






    web based rich text editor for free
    Whizzywig is easy. It lets people create rich, formatted text through a web form. It actually creates HTML (or xhtml, if you prefer) but you need no HTML knowledge to use it. If you can use a word processor or email, then you can use this.
    Whizzywig is cross-browser: it is written in Javascript, which will run in nearly all web browsers.
    Whizzywig is FREE. Free to copy, free to use and free to change. Free for personal use, free for commercial use. See
    the licence for the details. Basically, it says it is FREE.


    See it work
    Try
    this demo click!!!
    See this
    demo using text buttons.
    See this
    demo with mutiple edit areas.
    see this
    demo in Spanish OR Italian OR German OR French or dutch.
    See this
    demo generating XHTML.
    See this
    demo configured with file browsers for images and links. After clicking the image button, click [Browse] on the insert image form.
    If you want to edit pages and see the changes, try the
    whizzywig playground.
    demo download


    Fleegix.js: Simple. Useful. JavaScript.



    Fleegix.js provides an extremely lightweight, cross-browser set of JavaScript tools for building dynamic Web-app UIs.
    Fleegix.js includes the basics of what you need to build an Ajaxy Web app:
    A concise but powerful
    events system
    An industrial-strength
    XHR library
    JSON and Web form serialization
    CSS manipulation
    Visual effects
    To keep the toolkit small, more specialized features are broken off into
    optional plugins, including:
    JavaScript Dates with Olson timezone support
    a simple, no-muss-no-fuss
    XML parser
    a sortable
    Hash
    useful date utilities such as strftime, add, and diff
    Some
    color conversion utilities
    Most of the plugins can be used standalone with your JS toolkit of choice.
    Fleegix.js does not attempt to coerce JavaScript into behaving like Python, Ruby, Java, or any other language -- the code is plain, ordinary, idiomatic JavaScript. Simple, but potent stuff.
    It is well tested in the major-market-share browsers -- Firefox 1+, Internet Explorer 6+, and Safari 2.
    Fleegix.js is licensed under the
    Apache License, Version 2.

    ModalPopup with Multiple Cancel Buttons



    I recently stumbled across the following post. In the entry, the author describes a simple modal popup he has created for his hotel reservation ASP.NET AJAX web application. While developing the popup control, he ran into a problem when trying to include both a 'Close' button at the bottom of the dialog as well as a close 'X' button in the top right corner:
    I ran into a bit of a stumbling block because I wanted to have multiple buttons close the popup. I had the OK button and the cancel button centered and vertically aligned at the bottom of the window, but I also wanted a cancel button in the top right (ie "Cancel [X]") - with the familiar [X] that we know and love for closing something. The problem is, I couldn't figure out how to assign more than one control to the CancelControlID.
    Live Demo Download
    [Update 10/3/2007]: As Koen points out, the sample modal dialog doesn't look as nice in IE6 (it looks fine in FF and IE7)
    Thankfully Dave found a solution that he found to be workable. He wrapped the
    MoalPopupExtender in an UpdatePanel and explicitly called the Hide method from the server side button event handler. It sounds like this approach has worked him, but I thought I would provide a quick example of how you can dismiss the dialog without roundtripping to the web server.
    To close the popup without having to leave the client, all you have to do is call the hide function of the
    ModalPopup's client-side JavaScript behavior. Here is a quick example of the easiest way to accomplish this. Below is the markup for a modal popup that contains a message, an OK button and 6 Cancel buttons. Notice the two area's outlined in red. In the first outlined area I assigned the BehaviorID attribute of the ModalPopupExtender to a unique id ('mdlPopup' in this example). Then, in the OnClientClick of each of my Cancel buttons I pass this BehaviorID to the ASP.NET AJAX $find JavaScript shortcut function. The $find function will fetch the JavaScript behavior for the modal popup. Once I have a reference to the popup's behavior I invoke the hide function - which will hide my dialog.

    jQuery Treetable



    Take a plain html table, wrap the rows you want collapsing/expanding in a tbody with an id of treetable, map each row to it's parent row, set some options, and let jQTreeTable take it from there.
    By wrapping it in a tbody, it means you can have other rows within the same table not part of the tree, and it also means that if javascript is disabled, users still get the plain table.
    You can set which column takes the treeview effect, and you can also set which parents are collapsed initially. To do this, it must be done with an array, even if there is only one node you want collapsed.
    A highlight option can be set so that rows change colour as they are hovered over. There is dynamic striping of the rows, and there is also a custom onselect event which fires on the table cells, that can be handled with a callback function (watch the status bar when you click on a cell). Links within the cells still work as expected.
    I took the graphics files from J๖rn Zaefferer's site, and adapted them for my purposes. I hope he doesn't mind.
    Sorry I've nowhere to put comments as yet, but I will be keeping a close eye on the jquery-en list, so any feedback/bug finds would be appreciated.
    By the way, if you use the script off this page, make sure to remove the part of the script written for this page (just one line). Alternatively, you can download the zipped file here. It includes this php page with it's random treetable generator.

    var options = {openImg: "tv-collapsable.gif", shutImg: "tv-expandable.gif", leafImg: "tv-item.gif", lastOpenImg: "tv-collapsable-last.gif", lastShutImg: "tv-expandable-last.gif", lastLeafImg: "tv-item-last.gif", vertLineImg: "vertline.gif", blankImg: "blank.gif", collapse: false, column: 1, striped: true, highlight: true, onselect: function(target){window.status = "You clicked "+target.html();}};
    Map Array for the table below is :
    [0, 0, 0, 0, 0, 5, 0, 0, 8, 9, 8, 8, 0, 0, 14, 14, 14, 0, 18, 0, 0, 21, 22, 22, 22, 0, 0, 27, 27, 27, 30, 31, 31, 0, 0, 0, 0, 37, 37, 0, 0, 41, 41, 41, 44, 41, 46, 41, 41, 41]


    Sample : http://www.hanpau.com/jquery/unobtrusivetreetable.php