Question

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

Answer 1

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.