Friday, December 25, 2009

Custom prompt window using JavaScript

Below is a simple JavaScript code to create a custom prompt pop-up to get user input and set it to target field.

/**
 * Open a custom prompt window to get user input
 * @param l String, Input label
 * @param v String, Default value of input box
 * @param len Integer, Max length of input box
 * @param t String, Window title
 * @return Set input value to target element
 */
var promptWin = function (l, v, len, t) {
    var args = {
            title:(t === undefined ? (document.title ? document.title : '') : t),
            label:(l === undefined ? '' : l),
            value:(v === undefined ? '' : v),
            length:(len === undefined ? '256' : len),
            target:document.getElementById(event.target.getAttribute('data-target'))
        },
        prompt = document.createElement('div'),
        body = document.getElementsByTagName('body')[0];

    //Creating prompt window
    prompt.setAttribute('id', 'prompt');
    
    prompt.innerHTML = ' 
' + '
' + args.title + '
' + '
' + '
' + (args.label ? '
' + args.label + '
' : '') + '
' + '
' + ' ' + ' ' + '
'; //Append window in to body body.appendChild(prompt); var pos = cursorPosition(window.event); pos.bh = Number(body.scrollHeight || body.offsetHeight); pos.bw = Number(body.scrollWidth || body.offsetWidth); pos.ph = Number(prompt.scrollHeight || prompt.offsetHeight); pos.pw = Number(prompt.scrollWidth || prompt.offsetWidth); //Setting the wizard ar center of the window prompt.style.position = 'absolute'; prompt.style.top = (pos.y > pos.bh ? (pos.bh - pos.y) : pos.y) + 'px'; prompt.style.left = (pos.x > pos.bw ? (pos.bw - pos.x) : pos.x) + 'px'; //Focus input box as default var input = document.getElementById("prompt_input"); input.focus(); //Bind event to remove window on cancel document.getElementById('prompt_cancel').onclick = function () { body.removeChild(prompt); }; //Call caller method on OK document.getElementById('prompt_ok').onclick = function () { if (input.value && args.target) { console.log(args.target.nodeName); switch (args.target.type || args.target.nodeName) { case 'select-one': case 'select-multiple': var option = document.createElement("option"); option.text = input.value; option.value = input.value; args.target.appendChild(option); args.target.selectedIndex = args.target.options.length - 1; break; case 'DIV': case 'TD': case 'SPAN': args.target.innerHTML = input.value; break; default: args.target.value = input.value; break; } } body.removeChild(prompt); }; } /** * Return cursor position * @param e * @return {Object} */ var cursorPosition = function (e) { e = e || window.event; var pos = {x:0, y:0}; if (e.pageX || e.pageY) { pos.x = e.pageX; pos.y = e.pageY; } else { var de = document.documentElement; var b = document.body; pos.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0); pos.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0); } return pos; }
Uses:
[+]
The above code will open a prompt window with a input box to get user input and set the input value in to data-target field on click to OK.

View Demo


Friday, December 18, 2009

Import contacts from Address Book

For one of my PHP project, I have written a class to import contacts from Gmail and Hotmail address book and at the same time search in web for others email provider such as Gmail, Hotmail etc. to save my time. Then I found an excellent open source plugins to import contacts (address book) named OpenInviterTM.

It is written in PHP5 and free for all. Anyone can customize and use it easily. Also it has ‘Tell a friend’ features. Currently it supports:
  • 57 Email Providers
  • 21 CMS
  • 45 Social Network Applications


Click here to download the plugins.

Click here to see my script