Hi,

I was looking for a virtual keyboard, I found some code, but the dynamically created div is on the right of the textarea :
1)How to move it under the textarea ?

Code:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> majid keyboard</title> 
  <style type='text/css'>
    #virtualKeyboard {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #eee;
    padding: 4px;
}
#virtualKeyboard span {
    display: block;
    float: left;
    margin: 0px 2px;
    padding: 0px 6px;
    cursor: pointer;
    background: #fff;
}
#virtualKeyboard span:hover {
    background: #ccc;
}

  </style>
<script type='text/javascript'>
function load() {
var textareas = document.getElementsByTagName('textarea');

var virtualKeyboard = null;
var selectedTextbox = null;

function typeVirtualKeyboardLetter(letter) {
    selectedTextbox.value += letter;
    selectedTextbox.focus();
}

function addVirtualKeyboardLetter(letter) {
    var button = document.createElement('span');
    button.innerHTML = letter;
    virtualKeyboard.appendChild(button);
    button.onclick = function () {
        typeVirtualKeyboardLetter(letter);
    }
}

function initVirtualKeyboard() {
    if (document.getElementById('virtualKeyboard')) {
        virtualKeyboard = document.getElementById('virtualKeyboard');
    }

    if (virtualKeyboard == null) {
        virtualKeyboard = document.createElement('div');
        document.body.appendChild(virtualKeyboard);
        virtualKeyboard.setAttribute('id', 'virtualKeyboard');
        
        addVirtualKeyboardLetter('q');
        addVirtualKeyboardLetter('w');
        addVirtualKeyboardLetter('e');
        addVirtualKeyboardLetter('r');
        addVirtualKeyboardLetter('t');
        addVirtualKeyboardLetter('y');
    }
}

function showVirtualKeyboard(textbox) {
    initVirtualKeyboard();
    selectedTextbox = textbox;
    virtualKeyboard.style.display = 'block';
    virtualKeyboard.style.top = textbox.offsetTop + 'px';
    virtualKeyboard.style.left = (textbox.offsetLeft + textbox.offsetWidth) + 'px';
}

for(i=0; i<textareas.length; i++) {
    textareas[i].onfocus = function() {
        showVirtualKeyboard(this);
    }
}

} 

</script>
</head>
<body onload="load()">
  <textarea></textarea>  
</body>
</html>
thanks