How To Reveal Your Masked Password Using JavaScript

How To unmask the password saved in your browser which you might have forgotten. Suppose you forgot the password after saving in your favorite browser. Every time you visit your preferred site you are prompted to put the password but that work was done by the browser to help you. Now, what if your PC is formatted and there is no backup whatsoever. In this case you browser (newly installed) won’t be able to remember the password for you and you need to provide it yourself. Just because you have forgotten or lost your password you are barred from your favorite site.

In such scenario you can do nothing but ask for the password assistance for the site but in case you are interested in unmasking the password form your browser then you can simply use some JavaScript tricks to unmask your password.

login_masked-password

Companies who work hard to increase their user friendly features tend to think that by securing the password they are doing good but eventually end up loosing business due to login failures. If a user is told 2-3 times to provide correct password which he/she might have forgotten they will feel irritated and may turn up to another company (that’s a well known fact).

If you put javascript: at the beginning of that, and delete all the new lines so that it becomes a one-liner, you can delete the text in your browser’s address bar and paste the JavaScript snippet in the address bar instead, then hit the Enter key. This will cause masked passwords to be revealed.

login_text

If you expect to use this often, you can create a bookmark button in your Firefox Bookmarks Toolbar easily enough. Start by creating a new bookmark — any bookmark will do, though you may want to choose one for a page without a favicon. Then:

  1. Right-click on the new bookmark button and select Properties. The title bar for the bookmark’s Properties dialog will still show the name of the bookmark’s original web page while you make edits, but don’t worry about that.
  2. Change the text in the Name field to Unmask (or whatever else you want it to say).
  3. Change the text in the Location field the same way you would for the browser address bar, as described above.<
  4. Clear the Keyword and Description fields, and fill them with whatever you like (or nothing at all).
  5. Click the Save Changes button

unmask_bookmark

Cool. Any time you want to see the password text you type into a masked password field, now, you can just click the Unmask bookmark button in your Bookmark Toolbar.

In Firefox, you can also just drag and drop this link to your Bookmark Toolbar to get the same effect, if you like:

Unmask

You are, unfortunately, on your own for figuring out how to do any of this in other browsers.

Finally, if you are a web developer and you think it is a good idea to give your site’s visitors the ability to unmask passwords when they try to log in, you can always create an Unmask Password link using the above JavaScript snippet. I recommend thinking long and hard about that before making the option available, however.

As a final warning, keep in mind that when you walk away from your computer with your password on the screen, the fact that it is masked may not stop someone else from getting your password using something like this JavaScript trick. Most software security techniques, no matter how useful in a networked world, are not proof against physical access to the machine.

Please leave me a comment and let me know if the above technique help you in unmasking your forgotten password. Subscribe to our RSS to receive latest updates in your mailbox.

MooTools v/s jQuery

MooTools v/s jQuery is a hot topic as with the advent of technology every developer is using JavaScript in one way or another. Picking up a library is not an easy task specially if you are working somewhere where they already have a set pattern or their libraries defined. Ideally, every company is either working with Moo Tools or jQuery based on their past experiences or developement expertise. Although, both of the This article will bring some of the points to your notice before choosing between Moo Tools or jQuery as your library.

Apart from Moo Tools and jQuery there are other frameworks too which are used quite extensively like Dojo, Ext, YUI and Prototype. But, we are not going much into these framework at this moment and will only consider Mootools and jQuery. I will write an analysis covering all the JavaScript framework later.

Ease Of Learning

jQuery is quite easy to learn and has a good community support. If you are not a JavaScript freak still jQuery will be easier to learn and accomplish things where Moo Tools will require you to spend more time. In one line we can say that learning curve will be steep in Moo Tools than jQuery. In terms of community support, availability of books, search queries on Google its clearly evident that jQuery is leading the race with huge margin. Why jQuery is more popular? We can say just because of the learning ease, excellent documentation and active promotion of jQuery library.

DOM & Pure JavaScript

When we want to work only with DOM (Where 99% of all JavaScript runs) jQuery is far superior than Moo Tools. One reason why jQuery is so popular because of the reason that it does not expects you be learn JavaScript inside out. You are not required to think through prototypal inheritance, binding, “this”, and native prototypes. But, when we think in terms of JavaScript in full breadth we will notice that jQuery is simply focusing on DOM only. jQuery doesn’t address inheritance, basic utilities of all the native types in the JavaScript language etc. Still, if you want to do these you have to write your own stuff. jQuery makes the DOM your playground, but the rest of JavaScript is just not in its scope.

Moo Tools on the other hand is quite different and covers entire JavaScript language not just DOM. This is one of the reason of Moo Tools being bit hard for the early developers. Because MooTools focuses on making the JavaScript API itself more stable and coherent, it is focused less on giving you an interface that “changes the way you write JavaScript” and more on making JavaScript as a whole less frustrating; MooTools is an extension to the JavaScript language. MooTools tries to make JavaScript the way it is meant to be. A significant portion of the core library is spent on augmenting Function, String, Array, Number, Element and other prototypes. The other big thing it offers is a function called Class.

jQuery does not offer an inheritance system nor does it offer any enhancements to native objects (Function, String, etc). This is not a deficiency of jQuery as the authors of jQuery could easily offer these things. Rather, they have designed a toolkit with a different goal in mind. Where MooTools aims to make JavaScript more fun, jQuery aims to make the DOM more fun and its designers have chosen to limit their scope to that task.

In broader way we can say that everything you can do in jQuery can be done in Moo Tools but there is no way to emulate stuff done in Moo Tools into jQuery code because of jQuery’s focus on the DOM. MooTools has a broader functionality than jQuery, but there’s nothing about jQuery that prevents you from doing those things.

jQuery focuses on expressiveness, quick and easy coding, and the DOM while MooTools focuses on extension, inheritance, legibility, reuse, and maintainability.

Further, the MooTools core does not contain every feature you can imagine and neither does the jQuery core. Both frameworks keep their cores rather lean, leaving it to you and others to write plug-ins and extensions. Their job is not to give you every feature you could want but to give you the tools so that you can implement anything you can imagine. This is the power of JavaScript, and of JavaScript frameworks in general, and both frameworks excel at it. MooTools takes a more holistic approach and gives you tools to write anything you can imagine beyond the scope of the DOM, but pays the price by having a steeper learning curve. MooTools extensibility and holistic approach gives you a superset of jQuery’s features, but jQuery’s focus on a slick DOM API doesn’t preclude you from using the native inheritance methods of JavaScript or from using a class system like MooTools if you want it.

Slickspeed is a small analytical approach to benchmark the performance of JS frameworks. If you’ve got any thoughts, comments or suggestions for things we could add, leave a comment! Also please Subscribe to our RSS for latest tips, tricks and examples on cutting edge stuff.

Tips to Increase Twitter Followers and Detect Twitter Data

Twitter is gaining popularity ever since its launched. Now, website owners have started using the twitter power and they are using twitter not just for updates but for marketing purposes as well. So, how will you reap any benefits from twitter? The answer is simple, More Twitter followers means more exposure to your content. Fine, but how the heck you will have more followers? Read the complete article to find out about it.

You can detect the twitter users if they are logged in while they are surfing your site and you can ask them to tweet your content or even ask them to follow you. Whats important here is, you are asking the Visitor to follow you by his twitter user name. Lets take an example if user (hurricanesoft) which is a twitter user name of mine is surfing your website, you can easily detect and ask me to follow you or tweet your content by my user name like Welcome hurricanesoft, would you mind following me and tweeting my content. I will do the same for you if needed. Thanks. This is very simple example and it’s uses can be of unlimited ways.

Now, lets write few line of Javascript code to acomplish this task

The above code won’t work unless the user is authenticated, Twitter’s API will prompt an authentication dialog. We can resolve this issue by providing an extra parameter called “suppress_response_codes” which is meant to be used with apps that can only handle 200 response codes and don’t allow for authentication.

As you can see that we are using suppress_response_code so we need to use our own code for error and exception handling for cases where user is not authenticated. Take a look at the following code

Using the above code you can detect the twitter user and ask him to follow you or retweet your content thus giving more exposure to your content.

If you’ve got any thoughts, comments or suggestions for things we could add, leave a comment! Also please Subscribe to our RSS for latest tips, tricks and examples on cutting edge stuff.

Popular AJAX & JavaScript programs for development

While programming an application Ajax should be used upto a level where it doesn’t confuse the users by offering too many controls to deal with. Ajax should be used in Interactive solutions for lightboxes, form validation, navigation, search, tooltips and tables are developed using Ajax libraries and nifty Ajax scripts. Following is the list of most popular AJAX & JavaScript programs which are used in many famous web applications. I suggest to read their manual carefully before using in your commercial project.

1. AJAX Instant Messenger
Ajax instant messenger is a browser-based instant messaging client. You can use it for chat application as It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this “web application” to work, as everything is updated in real-time via JavaScript. Its FREE

AJAX Screenshot

2. Custom Checkbox with jQuery
This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.
AJAX Screenshot

3. Oversized Sliding Tabs
Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn is very heavily inspired by a widget used in the iTunes Music Store. Similar jQuery solution.
AJAX Screenshot

4. Mocha UI
Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with <canvas> tag graphics.
Ajax Script

5. An Accessible Slider
Filamentgroup designed and developed an interface that required a slider control, which allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.
AJAX Screenshot

6. Coda Popup Bubbles
“When you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ll explain (carefully) how to make sure the effect doesn’t fail in this situation.”
AJAX Screenshot

7. FancyUpload
FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers
Modalbox

8. Rich Text Editor
The Rich Text Editor is a UI control that replaces a standard HTML textarea. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. The tool is based upon Yahoo UI Library.

Texteditor

9. Facebook Style Input Box
The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)”

Screenshot

10. Ext JS – JavaScript Library
An extensive JavaScript-Framework with numerous modules and components such as tables, trees, windows, layouts, forms, and tabs. All of them look as if they’ve been used in standard desktop-applications. Extremely useful and widely used.

ext

11. iCarousel
iCarousel is an open source (free) javascript tool for creating carousel like widgets. iCarousel is compatible and tested in Internet Explorer, Firefox (and its mozilla friends), Opera and Safari, but it should work in other browsers too.

12. Product Slider
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.

AJAX Screenshot

13. Moo Wheel
The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the <canvas>-object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license. Great if you want to show how friends are connected in your social application.

AJAX Screenshot

14. Gettyone Search Options Menu
Learn how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.

AJAX Screenshot

15. Taggify Tooltips
This post demonstrates how you can use Taggify widget to enhance your blog with the functionality to show popup tooltips for parts of your images.

AJAX Screenshot

16. Relay – Ajax Directory Manager
Relay is an Ajax-powered file management library. It has a multi-user access restriction, allowing the administrator to control user access to uploaded files. Features: drag-n-drop files and folders, dynamic loading file structure, upload progress bar, thumbnail view, including pdf and multiple users & accounts.

AJAX Screenshot

17. Moo Canvas
Modern browser support the <canvas> tag to allow 2D command-based drawing. This script provides the third dimension, allowing for browser drawing with pure JavaScript. To use, web developers only need to include a single script tag in their existing web pages.

AJAX Screenshot

18. qGallery
qGallery is a Prototype-based gallery script which automatically takes care of the image processing, offers multipple viewing modes and comes with a number of transition effects. qGallery isfree for personal use

AJAX Screenshot

19. GlassBox
GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. Take a look at the site itself: you can use the keyboard navigation: Keys 1-8 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).

AJAX Screenshot

20. GWT-Ext Widget Library
GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT and Ext.

Screenshot

21. Amberjack
Amberjack is a lightweight Open Source library, enabling you to create site tours. The JavaScript library is lightweight (~4K), stable, LGPL licensed, browser compatible, set up in 2 minutes & super-easy to customize.

AJAX Screenshot

22. Flexigrid
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

23. Masked Input Plugin
A masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera.

AJAX Screenshot

24. cforms II
cforms is a plugin for WordPress, offering convenient deployment of multiple contact forms throughout your blog or even on the same page. The form submission utilizes AJAX, falls back, however, to a standard method in case AJAX/Javascript is not supported or disabled.

AJAX Screenshot

25. NicEdit
NicEdit is a Javascript/AJAX inline content editor to allow easy editing of web site content on the fly in the browser. It integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

AJAX Screenshot

26. Mootools animated sidebar menu
This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from mootools site.

AJAX Screenshot

27. Creating a table with dynamically highlighted columns
There is a number of impressive things happening within this small area.

AJAX Screenshot

28. LiveValidation
LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere in your javascript, it is not just limited to form fields.

AJAX Screenshot

29. Unobtrusive Table Actions Script
An attempt at writing an unobtrusive (and fast) script that adds commonly required “actions” to data tables. Can Zebra stripe the table. And supports row hover, column hover and cell hover effects

AJAX Screenshot

30. Tablecloth
Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love 🙂 Try to mouseover or click on a table below.

AJAX Screenshot

31. Starbox
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well. Check the demos below to see what Starbox is all about and read on for more information on how to customize your own Starboxes.

AJAX Screenshot

32. FancyForm
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers.

AJAX Screenshot

33. The sliding Date-Picker
Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it’s somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly.

AJAX Screenshot

34. Style Your Website’s Search Field with JS/CSS
Continuing to provide unobtrusive solutions, CSSG is happy to present SearchField. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup. It features plug & play onfocus and onblur behaviors and auto suggestion like you’ve never seen before.

AJAX Screenshot

35. minishowcase
minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

AJAX Screenshot

36. Carousel
Prototype UI. Carousel are great to display a large set of data like images.

AJAX Screenshot

37. Displaying source code with Ajax
The script fires off an Ajax request, gets the document the link points to, replaces the special characters and adds line numbers.

AJAX Screenshot

38. Timeline
Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information. Below is a live example that you can play with. Pan the timeline by dragging it horizontally.

AJAX Screenshot

39. mooSlideBox 3
The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox.

AJAX Screenshot

40. jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar)
jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

AJAX Screenshot

41. mooSocialize – ajax based social bookmark widget
Enough of having to submit interesting articles by hand to your favorite social networks and newsgroups? Then this is for you. Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.

AJAX Screenshot

42. CNN Style Scrolling Ticker with the Marquee Toolkit Control
Besides scrolling the items from right to left, the liScroll plugin supports two additional features

AJAX Screenshot

43. Cornerz
Bullet Proof Corners plugin for jQuery using Canvas/VML

AJAX Screenshot

44. CheckBoxList hover extender
“We created an AJAX Control Toolkit Extender that asynchronously calls a web service method (or a page method) to obtain the information displayed in the popup control, when the user hovers over an item.”

AJAX Screenshot

45. lightWindow
Another script you can use to integrate lightboxes and online-galleries in your web-pages. This lightweight script supports 5 different types of Media: Pages, Inline Content, Media (movies, SWF, etc), images (galleries, single), External Websites (via IFrame). Photo: Patrick Cheatham.

AJAX Screenshot

46. Lightview
Lightview was built to change the way you overlay content on a website. Works on all modern browsers

AJAX Screenshot

47. ModalBox
ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional pop-ups and page reloads.

Modalbox

48. DatePicker using Prototype and Scriptaculous
An unobtrusive and flexible date picker widget which uses Prototype and Scriptaculous libraries. 52 More Calendars and Date Picker Designs.

Date Picker

49. New unobtrusive dynamic flickr badge
A compact Flickr-Badge for presentation of Flickr-images with a navigation option.

Flickrbadge

50. 13 Awesome Javascript CSS Menus
13 “fresh” JavaScript+CSS-based navigation menus in a brief overview. Among other things Slashdot Menu and Sexy Sliding Menu displayed below.

CSS Menu

CSS Menu

You can see all the above used in one or other websites. They can help save your development time & cost. If you like this post kindly subscribe to our RSS. Please share how these scripts programs have helped you in your web application development. You may also be interested in our older post 20 MooTools Tutorials and Examples

20 MooTools Tutorials and Examples

There are literally over a hundred of JavaScript frameworks out there that make writing complex client-side code significantly easier. If you’re in the market for a powerful, relatively lightweight, and customizable JavaScript framework, MooTools is worth checking out.

To help you get on your way to developing highly-interactive web applications using MooTools, here’s 20 tutorials and working examples that’s worth a read.

Getting Started with MooTools

1. The “Mootorial”

The Mootorial - Screenshot

The Mootorial at //clientside is a comprehensive, practical tutorial on the MooTools framework. The tutorial allows you to execute the sample code either by Firebug or the website’s built-in console.

2. MooTools Overview Video Tutorial

Here’s an excellent screencast that introduces the MooTools framework. It covers the basics such as the concept of chaining, customizing MooTools to your needs, and where to find documentation for MooTools code.

3. Increasing User Experience With Javascript

Increasing User Experience With Javascript - Screenshot

Beauty By Design provides a nine-part video series on improving user interaction using JavaScript (primarily MooTools). A couple of topics covered in the lessons include: using mooTabs, creating sliding sub menus, and using Fx.styles to control font size.

4. Understanding Mootools Selectors

One of the most powerful features of MooTools (as well as other frameworks/libraries like jQuery and Prototype) is the ability to easily select page objects for you to work on. This tutorial covers the basics of selectors in MooTools: $(), $$(), $E(), and $ES() functions.

5. MooTools MooTools Classes: How to use them

This tutorial is an entry-level introduction on working with classes in MooTools. The tutorial works with a hypothetical scenario (buying a car from a car store) to illustrate the concept of classes. The last section of the article discusses the differences of MooTools and script.aculo.us classes.

Intermediate/Advanced Topics

6. Mootools: Ajax and XHR classes

MooTools’ Ajax/XHR classes provides developers a much simpler way of working with XMLHTTPRequests by reducing the amount of code you have to write and by handling browser differences for you. This tutorial talks about the Ajax and XHR classes in brief.

7. Ajax Responder in MooTools

This article delves into the use, extension, and capabilities of the Ajax class in MooTools. It discusses chaining Ajax requests and events, and how you can extend the Ajax class for your needs (also applicable to other MooTools classes).

8. How well do you know Mootools?

Getting started with MooTools is easy, and it won’t be long until you can create wonderful effects and increase user interactivity in your web pages. To help you become a MooTools master, here’s a checklist of common coding mistakes and its corresponding correct usage.

9. Mootools Short-cuts

This is a follow-up article from the one above, focusing more on MooTools syntax usage. Examples involve using shorter code for selection of objects, shorthand for the Ajax class, and creating new elements.

10. Mootools: JSON explained

Mootools: JSON explained - Screenshot

Here’s an excellent introduction to using JSON with MooTools to provide server-side interaction to your web applications. Topics covered include converting a JSON string into a JavaScript object and vice versa.

11. Using MooTools’ Hash.Cookie API

This article explains how to take advantage of MooTools’ powerful Hash.Cookie API to make working with complex cookie utilization a cinch. The example showcases a working example of how you can store the number of times a user visits a page.

12. Chaining with MooTools 1.2

Chaining is beneficial for several reasons including the ability to sequentially execute events (“in a chain”) as well as reduce the number of lines of code you have to write. If you’re wondering about the “who, what, where” of chaining in MooTools, check out this brief but informative tutorial.

Practical/Working Tutorials and Examples

13. AJAX mootools secure contact form

AJAX mootools secure contact form - Screenshot

Learn how to protect your public web forms from spam and SQL injections with this tutorial on how MooTools can be used to make safer public web forms.

14. Using CSS and Mootools to simulate Flash horizontal navigation effect

Using CSS and Mootools to simulate Flash horizontal navigation effect - Screenshot

Create a navigation area that smoothly scrolls left or right depending on where you hover your mouse.

15. Facebook Sliders With Mootools and CSS

Facebook Sliders With Mootools and CSS - Screenshot

Check out this nifty tutorial on how to build a Facebook-inspired set of slider controls that manipulate the opacity, width, and height of an image.

16. MooTools Gone Wild: Element Flashing

MooTools Gone Wild: Element Flashing - Screenshot

In this tutorial, you’ll learn how to make page elements flash. It’s an effective way of drawing attention to a particular section of a web page or alerting users of status changes.

17. Nice Ajax effect for message box using Mootools

Here’s a tutorial on how to display messages that fades in after the user clicks on the submit button. It’s designed for use with web forms, but it can be modified into similar applications.

18. Two CSS vertical menu with show/hide effects

Two CSS vertical menu with show/hide effects - Screenshot

This tutorial shows you how to build a navigation menu that slides up and down smoothly using MooTools. The article also covers how to make a similar effect using plain JavaScript.

19. Mootools Content Slider With Intervals

Mootools Content Slider With Intervals - Screenshot

Here’s an excellent step-by-step tutorial on how to make a content area that slides left-to-right at set intervals – great for slideshows.

20. Jazz Up Your Forms With MooTools

Jazz Up Your Forms With MooTools - Screenshot

This is a two-part series that goes over how to make your web forms fancier. The first part shows you how to add animated field highlighting and how to display instructions to users. In the second part, you’ll step it up a notch by adding live comment previewing and auto-resizing of text areas.

Additional Tools

  • Vista like JavaScript/PHP DatePicker : The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive  web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools javascript framework, AJAX, XHTML, CSS and PHP.vlaCalendarExamples.jpg
    Key features:
  • Authentic Vista look-and-feel
    • Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
    • Smooth transition animations
  • Customizable features
  • Lightweight
  • Datepicker functionality (!)
  • Cleaner and more developer centered – easily editable – CSS, PHP and javascript code
    • Easily changeable date labels (e.g. different languages)
    • Easily stylable. Styles are created on top of the general style; the download include two example styles
    • Both normal and datepicker calendar can be instantiated multiple times

Please post your experiences with the above tools. If you like this post kindly subscribe to our RSS for free updates and articles delivered to you.

23+ Impressive Tools for Faster Javascript/Ajax Development

Javascript applications are still one of the most complex issues when it comes to web-development. Many tools and applications could make your developing life pretty fast and simple. Today we wanted to share with you a wide range of tools and applications that could really help you build, test and debug Javascript and Ajax applications. Let us know your experience with the tools listed here or others that are not.
1-Roar – Notifications (v1.0) Roar is a notification widget that streamlines incoming messages, such as updates or errors, without distracting the user from their browser experience or breaking their work-flow by displaying obtrusive alerts.

javascript ajax tools


2-Damn It DamnIT is a free service that emails you when a user encounters a JavaScript error in your webpages.

javascript ajax tools


3-Growl 2.0 with Mootools Growl is a notification system for Mac OS X, it allows applications that support Growl to send you notifications.

javascript ajax tools


APIs

4-Google AJAX Language API With the AJAX Language API, you can translate and detect the language of blocks of text within a webpage using only Javascript. The language API is designed to be simple and easy to use to translate and detect languages on the fly when offline translations are not available.


5-Got API An easy to use interface that helps you reach the methods and functions of many JavaScript frameworks by getting the data from trusted sources and websites.

javascript ajax tools


6-WaveMaker Visual Ajax Studio WaveMaker’s Studio and Framework provides a powerful solution for rapidly developing web-based applications. Drag & drop assembly of widgets and service, code-free integration of web-services, databases and Ajax UI, and one-touch deployment to standard Tomcat servers all work seamlessly together to let you build complete web apps in hours!

javascript ajax tools


FrameWorks

7- SproutCoreSproutCore is a framework for building applications in JavaScript with remarkably little amounts of code. It can help you build full “thick” client applications in the web browser that can create and modify data, often completely independent of your web server, communicating with your server via Ajax only when they need to save or load data.

javascript ajax tools


8-JavaScriptMVCJavaScriptMVC is a framework that brings methods to the madness of JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

javascript ajax tools


Amazing Tools

9-Jaxer Jaxer is an Ajax server. HTML, JavaScript, and CSS are native to Jaxer, as are XMLHttpRequests, JSON, DOM scripting, etc. And as a server it offers access to databases, files, and networking, as well as logging, process management, scalability, security, integration APIs, and extensibility.

javascript ajax tools


10-The Regulator The Regulator is an advanced, free regular expressions testing and learning tool that allows you to build and verify a regular expression against any text input, file or web, and displays matching, splitting or replacement results within an easy to understand, hierarchical tree.

javascript ajax tools


11-SnippelySnippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location.

javascript ajax tools


12-NitobiBugIt’s a browser-based JavaScript object logger and inspection tool – similar to Firebug. NitobiBug runs across different browsers (IE6+, Safari, Opera, Firefox) to provide a consistent and powerful tool for developing rich Ajax applications. You can check a demo here.

javascript ajax tools


13- Google Mashup EditorThe Google Mashup Editor provides simple tools and features that allow you to create mashups in minutes with the following features:

  • A set of tags that compiles into AJAX UI components.
  • Syntax highlighting
  • Autocomplete of gm tags by pressing the tab button
  • Quick access to documentation for any tag by pressing F2
  • File upload and management
  • Error checking and notification

javascript ajax tools


14- Beautify JavascriptThis tool was intended to explore ugly javascripts, e.g compacted in one line, or just make scripts look more readable.


15- ThemeRollerThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects.

javascript ajax tools


16- JSDocJSDoc is a tool that parses inline documentation in JavaScript source files, and produces an documentation of the JavaScript code.


17- Clean AJAX Clean is an open source engine for AJAX, that provides a high level interface to work with the AJAX technology. It was created to solve real problems found on AJAX applications, and is used in many projects. Clean will help you to adopt AJAX saving your time and your code, reducing your learning curve and the code reengineering.

javascript ajax tools


18- Sajax Sajax is an open source tool to make programming websites using the Ajax framework as easy as possible. Sajax makes it easy to call PHP, Perl or Python functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.

javascript ajax tools


19- JavaScript Code Improver With JavaScript Code Improver you are just one click away from making any JavaScript clear, easily comprehensible and ready for printing thus saving the time you spend on editing, debugging and modifying it.

javascript ajax tools


Browser Addons and Toolbars

20- Greasemonkey Greasemonkey is a Firefox extension that allows you to customize the way web pages look and function. You can use it to make a web site more readable or more usable. You can fix rendering bugs that the site owner can’t be bothered to fix themselves.


21- Web Developer extension for Firefox This tool is really excellent for quick and easy webdevelopment. It Adds a menu and a toolbar with various web developer tools.

javascript ajax tools


22-Internet Explorer Developer Toolbar The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.


23-DebugBar An Internet Explorer plug-in that brings you new powerful features :

  • DOM Inspector: View DOM Tree and modify tags attributes and css attributes on the fly to test your page
  • HTTP Inspector: View HTTP/S request to check cookies, GET and POST parameters, view server info
  • Javascript Inspector and Javascript Console: View javascript functions for easier debugging, see Javascript and AJAX code
  • HTML Validator: Validate HTML code to correct and optimize your code and html size of your page
  • And many more features: See page cookies, get pixel color on a page, make a page screenshot.

javascript ajax tools


24-Firebug Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. It can be downloaded from here.

javascript ajax tools

Opening Windows using JavaScript

Generally, we are familiar with setting the target of a link to "_new" to spawn a secondary browser;  there are other interesting ways of opening/launching of windows too using JavaScript.

JavaScript can help load 3 kinds of windows:

-Regular secondary window
-Modal window
-DHTML window

<script>
function loadwindow(){
window.open("http://www.hurricanesoftwares.com","","width=500,height=400,status=1")
}
</script>

<form><input type="button" onClick="loadwindow()" value="Load Window"></form>


 "status=1" tells the method to display the status bar; "1" is the computer equivalent of "yes"

Manipulating the window

There are various methods available to move, close, resize or reload the window.

window.location.reload() //reloads window
-window.close()
//closes window
-window.moveTo(x,y)
//moves window to specified location
-window.moveBy(x,y)
//moves window by specified offset
-window.resizeTo(x,y)
//resizes window to specified dimensions
-window.resizeBy(x,y)
//resizes window by specified amount

To use these methods on the current window, simply call them as is on the page. You can also use them on the opened window, by following these two steps:

Step 1: When opening a window, assign a variable to it:

mywin=window.open("http://www.hurricanesoftwares.com")

Step 1: Use this variable to reference the opened window, then apply the desired method on it:

mywin.location.reload //reload mywin
mywin.moveTo(0,0) //positions window at upper left corner of monitor

Ok, getting back on track…

Modal Window

Modal windows are a fun Internet Explorer specific feature. The window sits "focused" on the page until the user clicks on the close button. The window does not go into the background no matter what (for example, clicking on the main window).

window.showModalDialog("http://www.hurricanesoftwares.com","","dialogWidth:500px;dialogHeight:500px")

Notice how I use dialogWidth and dialogHeight to specify the window’s dimension. You also need to specify the unit, which in this case I use px.


DHTML Window

A new type of window is emerging, one I think is worth mentioning. It is now possible to recreate the entire window interface through JavaScript and DHTML. The result is a less intrusive, inline popup window.