Geek Answers Handbook

Datepicker position not fixed with text box in popup

I have a Fancy Box popup. I have long content. This content includes a date field with Datepicker.

Now, when I click in the “Calendars” field, but it does not stay with the text field, when I scroll with the mouse wheel, the date picker does not move, its remains are in the same place where it was open, I want it to move with a scroll.

Here is the FIDDLE DEMO with this issue :

http://jsfiddle.net/PFVxK/1314/

Just click Popup, then click Text Box, and then scroll it,

How can i fix this?

+4
source share
5 answers

datapicker input . . datepicker fancybox scroll.

afterLoad: function () {
    $('.fancybox-inner').on('scroll', function () {
        var inp = $(this).find('input.hasDatepicker');
        $('#ui-datepicker-div').css('top', inp.offset().top + inp.outerHeight());
    });
}, beforeClose: function () {
    $('.fancybox-inner').off('scroll');
}

afterLoad beforeClose - , .

http://jsfiddle.net/NsNHZ/1/ , .

+4

: default position datepicker fixed, , , .

. 2

+2

position: fixed; margin-top:40px;

0
source

If I where you are, I would just close the DatePicker to scroll and resize, probably no one would mind, since it also closes onblur()

Have a look at this script: http://jsfiddle.net/PFVxK/1325/

$(".fancybox-effects-b").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    helpers: {
        title: {
            type: 'over'
        }
    },
    afterLoad: function () {
        $('.fancybox-inner').on('scroll', function () {
            CloseDatePicker();      
        });
    }, beforeClose: function () {
        $('.fancybox-inner').off('scroll');
    }
});

$(function() {
    $( "#dateofbirth" ).datepicker();

    /*Load only inside fancybox*/
    $(window).resize(function(){
        CloseDatePicker();
    });
});

function CloseDatePicker()
{
      if($("#dateofbirth").datepicker( "widget" ).is(":visible"))
      {
          $("#dateofbirth").datepicker("widget").hide();
          $("#dateofbirth").trigger( "blur");          
      }
}
0
source

Please check if this violin works or not - link .

 $('#dateofbirth').focus(function(){
     $( ".a" ).show();
     $( ".a" ).datepicker();
     });
     $('#dateofbirth').blur(function(){
     $( ".a" ).hide();
     });

Changed html: -

 <input type="text" name="dateofbirth" id="dateofbirth" placeholder="Date of Birth">
 <div class='a'></div> // new div added
0
source

More articles:


All Articles