Rony's

Posts Tagged ‘JavaScript’

Well, I had a requirement to show a preview of image, whenever client selects an image inside a form. First I thought it was just a easy task… But it really took about one hour of me to figure the way out…

As it was an input element with type=file, I simply tried to get the value and push it to an image element’s source attribute attaching ‘file://’ at the beginning. But life’s not that easy! The value only returns the file name not the full path. How can I get the full path??!! I can see the path on the input box, but I can’t get it!!!

Next approach, go to our best friend, Google! Well, I guess she wasn’t very pleased with me and didn’t help me very much…

Now what?! Well, let’s try the DOM inspector of Firefox. There I found three functions for the file input element.

• getAsBinary()
• getAsDataURL()
• getAsText()

They are all self explanatory… My head was already stuck at that moment. So I didn’t see the ‘Data URL’ function first. Tried to parse binary for a while. But couldn’t find a way to push the binary data of an image inside the image tag. Then I noticed the next function. Well, it worked like a charm. I just pushed the function’s return value to the image tag’s source attribute. Done.

So, to get the file path, the call should be like:

file_input_element_id.files[0].getAsDataURL()

That’s all…

N.B. For IE, it works OK with adding the ‘file://’ before the value of input element. You just need to have proper permission level.

Mootools’ “Selectors” utility has some really strong feature. It really saves a lot of time and sweat. Using this property, one can select a tag (any one can!), tag with specific name, id or any other attribute (huh!) and most amazingly part of a property value matching to some string…

Say you want to select all the div tags which has ID starting with ‘my’. How can you do that? Read the rest of this entry »

Mootools is a great JavaScript library and I feel really comfortable using it. There are lot other libraries, like JQuery, DoJo, ExtJS. They have their own features, but I feel strong with Mootools. ExtJs is really good, but very much heavyweight. On the other hand Mootools is really lightweight. Including all the core features, it is only around 64KB. Special effects may weight around 100KB more.

Most used function of Mootools is the $ function. Its a bit confusing with JQuery and that’s why conflicts with JQuery, if used on the same page. $ selects a dom element from the document by its id. The syntax is $(‘element_id’). There is another pretty good function that I like is $$ function. It selects elements by class name or tag etc. More on this functions are available at Mootools documentation.

Mootools Request feature is another great thing to have. This AJAX calling function is capable of sending AJAX request either in GET or POST method.

These are the basic functions one may need to develop a regular web application. There are also other common helper functions for Array, String, Number, Cookie etc. For detail idea about Mootools it is suggested to visit Mootools Documentation at: http://docs.mootools.net/

One thing to keep in mind. Whenever you are adding some JavaScript code on your documents HEAD, make sure it is inside a document onReady or onLoad function. Otherwise you’ll get stuck with JS errors. Most of the cases, the common mistake is like using the JS code to get an element at the HEAD, but the body is still loading… So the script couldn’t find the element and through error.

For Mootools, this onLoad wrapping syntax is like this:

window.addEvent('domready', function(){
//Your Code Here
});