how to show a div under selected text field

i don't need any calender, datepicker, or timepicker.. i just want to know...

Can somebody please tell me... how the divs come to appear when user clicks on some specific text fields...

see on this link.. http://pttimeselect.sourceforge.net/example/index.html

i dont' want to show calendar or time picker.. but may be some images with some details.. that is not a part of question.. i just want to show some div with "blabla" data...

Thank you

Oh.. i found it..

I got it.. in jquery i found a method of "offset();" that further give me its' left 开发者_运维百科and top values.. .. Thank You

ALHAMDULILLAH

Well, the best way I can think of is to use JQuery and generate the div on the fly when your element is clicked.

The div should be absolutely positioned and set to display: none (if you want the slide down effect). This is a quick sample I made for showing the div:

$('.moreInfo').click(function(){
  var data = "Whatever data you want to show in the div";
  var div = $('<div />').text(data)
                        .css('display', 'none')
                        .css('position', 'absolute')
                        .css('top', $(this).outerHeight() + $(this).offset().top)
                        .css('left', $(this).position().left)
                        .css('width', '200px')
                        .css('height', '300px')
                        .css('border', '1px solid #000');
  $(this).after(div);
  div.slideDown(500);
});

(The CSS may as well be a separate CSS-rule and modified however you want, except for the 'top' and 'left' attributes)

This opens a new div for every click, so you probably want to check if the div already exists and then remove it.

The easiest way would be to define functions for the input field on focus and blur:

<input id="sampleInput" type="text" onfocus="showDiv()" onblur="hideDiv()" />
<div id="content" style="position:absolute;top:0;left:0;visible:false;">...</div>

EDIT: Here's some psuedocode to get you started

//This will give you the distance from the top of the page to the input box
inputTop =  inputElement.offsetTop;     

//This will give yout he height of the input element    
inputHeight = inputElement.offsetHeight;

//Now set the top of the content div to be the sum of the offsets:
contentDiv.style.top = inputTop + inputHeight;

//Now show the content div
contentDiv.style.visible = "true";