What jquery code or plugin would I use to update the position of an element?

Question

I am using a jquery plugin from [ FilamentGroup ] called DateRangePicker.

I have a simple form with two text inputs for the start and end date that I bind the DateRangePicker to using this

$('input.tbDate').daterangepicker({
            dateFormat: 'mm/dd/yy',  
            earliestDate: new Date(minDate),  
            latestDate: new Date(maxDate),  
            datepickerOptions: {  
                changeMonth: true,  
                changeYear: true,  
                minDate: new Date(minDate),  
                maxDate: new Date(maxDate)  
            }  
        }); 

I have a collapsible table above this form that when shown, moves the form and the elements that the daterangepicker plugin is bound to, down lower on the page, but the daterangepicker appears to keep the position from when it was actually created.

What code could I put in the daterangepicker's onShow Callback to update its position to be next to the element is was initially bound to? Or is there some specific jquery method or plugin that I could chain to the daterangepicker plugin so that it will update its position correctly. This would come in handy for some other plugins that I use that don't seem to keep their position relative to other elements correctly either.

Answer 1

Can you post the html?

Answer 2

I think you don't need a plugin or pass a callback to the onShow daterangepicker handler.

You just need to update the daterangepicker position at the same time you show your table. Like so:

jQuery(document).ready(function(){
    // setup daterangepicker
    $('input.tbDate').daterangepicker({
         // ...
    });
    // query dom once and store for performance
    var dateranges = $('.ui-daterangepickercontain');
    // remember daterangepicker original top 
    var daterangeoriginaltop = dateranges.offset.top;
    // setup collapsable table
    $('#openCloseButton').click(function(e){
        $('#myTable').slideToggle('slow', function(){
            daterangepicker.css({
                'top': daterangeoriginaltop + $('#myTable').outerHeight();
            });
        });
    }); 
});

This code should work for only one daterangepicker per page (since .offset only queries first element on the collection).

Answer 3

Try jQuery UI position:

Utility script for absolutely positioning any widget relative to the window, document, a particular element, or the cursor/mouse.

EXAMPLE

$('input.tbDate').daterangepicker({
    dateFormat: 'mm/dd/yy',
    datepickerOptions: {
        changeMonth: true,
        changeYear: true
    },
    onOpen: function () {
        $('.ui-daterangepickercontain').position({
            my: "left top",
            at: "left bottom",
            of: $('input.tbDate')
        });
    }
});

... actually, if you set the select the input by ID instead of class, you only need to call the position method once:

$('#two').daterangepicker({
    dateFormat: 'mm/dd/yy',
    datepickerOptions: {
        changeMonth: true,
        changeYear: true
    }
});
$('.ui-daterangepickercontain').position({
    my: "left top",
    at: "left bottom",
    of: $('#two')
});