Jquery: Display element relative to another
- by namtax
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
