Jquery: Display element relative to another

Question

Hi

I am trying to display a drop down list using jquery everytime a user clicks on a particular formfield...

At the moment the HTML is as stands

// Form field to enter the time an event starts
<div>
  <label for="eventTime"> Event Time </label>
    <input type = "text" name="eventTime" id="eventTime" class="time">
  </label>
</div>

// Form field to enter the time an event finishes
<div>
  <label for="eventEnd"> Event Ends</label>
    <input type = "text" name="eventEnds" id="eventEnds" class="time">
  </label>
</div>

And the Jquery looks like so

    // Display Time Picker  
$('.time').click(function(){
    var thisTime = $(this);


        var timePicker = '<ul class="timePicker">'
            timePicker += '<li>10.00am</li>'
            timePicker += '<li>11.00am</li>'
            timePicker += '<li>12.00am</li>'
            timePicker += '</ul>'

    $('.timePicker').hide().insertAfter(thisTime);

      //show the menu directly over the placeholder
        var pos = thisTime.offset();

            $(".timePicker").attr({
              top: pos.top
              left: pos.left
            });
             $(".timePicker").show();
                });

However, when I click on one the form fields with class time, the timePicker drop down appears, but it always appears in the same location, not next to the form field as I would like.

Any ideas?

Thanks

Answer 1

try applying relative position to the parent element and absolute position to the child, then there's no need to use pos.left and pos.top maybe 0,0 its fine.

Answer 2

have you considered a time picker plugin I'm sure there are more but it sees a shame to re-invent something that already exists