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.

Bookmark:

Say you want to select all the div tags which has ID starting with ‘my’. How can you do that? Select all the div in the document, parse everyone’s id? Well, here this is a one line code in Mootools using the getElements function. It actually uses the general RegEx symbols to match property values.

To select the div with id starting with ‘my’ it would use getElements(‘div[id^=my]‘);

Some other examples from Mootools documentation:

//Returns all anchors within myElement.
$('myElement').getElements('a');

//Returns all input tags with name "dialog".
$('myElement').getElements('input[name=dialog]');

//Returns all input tags with names ending with 'log'.
$('myElement').getElements('input[name$=log]');

//Returns all email links (starting with "mailto:").
$('myElement').getElements('a[href^=mailto:]');

//Adds events to all Elements with the class name 'email'.
$(document.body).getElements('a.email').addEvents({
'mouseenter': function(){
this.href = 'real@email.com';
},
'mouseleave': function(){
this.href = '#';
}
});

Mootools documentation on Selectors utility is here: http://mootools.net/docs/core/Utilities/Selectors

Bookmark:

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
});

Bookmark:

Well…. There are a lot of color scheme editor available on the web, but I tried something different. I wanted to give the complete control to the administrator. But, uff…. It was really tough.

Main things I had to do was

• To select a suitable color picker.
• Then identify the areas the colors should be changed.
• Store the color information.
• Generate the CSS file according to the changes.

First problem I faced was to generate the CSS according to the changes. I tried to integrate PHP inside CSS file (!!!). A foolish idea. Then the idea I found is like creating a new CSS each time administrator changes the style, and store the changes to the database.

As I’m storing the information to the database as well, its also possible to rollback to a previous style.

Then the next problem comes – color picker. I was not in a mood to create a color picker by myself. After spending a good amount time in Google, I found the MooRainbow color picker, which is based on Mootools. It was nice and I’m happy too. Cz, I like Mootools library!!

There was another problem, I have to convert the Hex value to RGB for this purpose. Mootools helped me here once again. There is a very useful function hexToRgb() which helped me out.

You can find the way to implement moo rainbow at its own website.

As I had to provide edit ability to almost 70 sections of the website, the form was huge. So there were a need to use something like Accordion. But size was also a factor. Then I found a simple script which solved the problem and provided almost accordion like feature. I divided the form in 11 sections and implemented the function.

Here is the JavaScript code segment. I found the idea of this function from a web site but forgot form where. Whoever the main coder is, many thanks to you…


function shoh(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id).style.display == "none"){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
} else {
if (document.layers) {
if (document.id.display == "none"){
document.id.display = 'block';
} else {
document.id.display = 'none';
}
} else {
if (document.all.id.style.visibility == "none"){
document.all.id.style.display = 'block';
} else {
document.all.id.style.display = 'none';
}
}
}
}
window.addEvent('domready', function(){
shoh('fs1');
shoh('fs2');
shoh('fs3');
shoh('fs4');
shoh('fs5');
shoh('fs6');
shoh('fs7');
shoh('fs8');
shoh('fs9');
shoh('fs10');
shoh('fs11');
shoh('fs1');
});

For security reasons I can’t give the link here but providing a screen shot of the editor is here. This also have some IE issues (!) and needs debugging.

Bookmark:

This is a problem for most of us PHP developers. At least for me! Whenever I build a website, the default page is index.php. IIS doesn’t take index.php as the default page. It looks for default.html/index.html etc. I don’t have access to the configuration files of the server. What to do? If anybody have any professional idea, please suggest. I don’t have any idea how to solve this problem.

Then I figured out to use JavaScript. Create an index.html page which will just redirect to the index.php file. Simple… Only a single line to add in the JavaScript code segment:


window.location.href="index.php";

But this method was working for simple website redirection but faced problem when there is some parameters with the URL. Then I figured this following JavaScript code:


var cururl = window.location.href;
var splt = cururl.split('?');
var newurl = 'index.php';
if(splt.length > 1)
{
newurl = 'index.php?'+splt[1];
}
window.location.href = newurl;

I think this would be helpful for some people. If you have any other nice and professional approach to solve this please suggest here.

Bookmark: