In order to implement these kinds of stuff, you should have very strong scripting skills (Of course, there is a lot to learn and learning process never ends). Here, I'm going to brief you an important technique, which is dynamic positioning of the HTML elements.
Let me take an example to explain it to you clearly. I've two text fields and when I place the cursor inside a text field, I would like to see a popup next to text box by providing some kind of help for the user to enter the data. In HTML code, add two text fields and a div with display style property none, since div should be positioned dynamically when I place the cursor inside a text field. The code look like
<HTML>
<HEAD>
<TITLE>HTML element dynamic position</TITLE>
</HEAD>
<BODY>
Name <INPUT type="text" id="text1" onfocus="displayHelp('text1')" /><BR/>
Password <INPUT type="text" id="text2" onfocus="displayHelp('text2')" />
<div id="helptext" style="display:none;">Here help text goes...<br/>Line 2</div>
</BODY>
</HTML>
I've used a javascript function displayHelp on onfocus event of text fields, since we need to show the help popup when text field is been highlighted. Now our job is to find out the left and top positions of the selected text field so that we can place the popup accordingly.
<SCRIPT type="text/javascript">
function getTopPosition(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function getLeftPosition(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetLeft;
}
return returnValue;
}
function displayHelp(element)
{
var left=getLeftPosition($(element))+$(element).offsetWidth;
var top=getTopPosition($(element));
$('helptext').style.position="absolute";
$('helptext').style.left=left+"px";
$('helptext').style.top=top+"px";
$('helptext').style.display="block";
$('helptext').style.border="1px solid #DEE7FA";
$('helptext').style.background="#ECF5FF";
$('helptext').style.width="200";
$('helptext').style.height="50";
}
function $(element)
{
return document.getElementById(element);
}
</SCRIPT>
I've used a single div and positioned that based on the dynamic width and height values. You can test this below...
Name
Password
This program has been tested on all the major browsers like IE >= 6.0, Mozilla >= 2.0 and Google chrome... Hope you enjoyed it...