Now a days, AJAX programming is being used increasingly. As a result, DHTML is playing a vital role in current web. Dynamic HTML is possible through the scripting languages like Javascript and VBScript i.e.; programmers will invoke AJAX url to get the response, and based on it, intended task would be performed like showing the div with the response content or hiding the HTML element.

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...