How to Scroll Flow JQuery UI Dialog

Question

I have been trying to use follow scroll to move dialog together with user scroll but no success

<script>
$(function() {
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
    $( "#dialog-report-problem-form" ).dialog({
        autoOpen: true,
        height: 550,
        width: 700,
        modal: true,
        buttons: {
            "<?= $this->translate('REPORT_PROBLEM'); ?>": function() {
                reportProblem();
            },
            "<?= $this->translate('CANCEL'); ?>": function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
        }
    });
    $.scrollFollow("#dialog-report-problem-form",{speed: 10}); 
});
</script>

.

<div id="dialog-report-problem-form" title="<?= $this->translate('REPORT_PROBLEM'); ?>">
    <?= $this->form ?>
</div>

I have been receiving the error

 box.cont.offset() is null

Does anyone knows how could fix or another jquery based solution to follow user scroll?

Didier Ghys · Accepted Answer · 2012-01-17 09:42:18Z

3

The plugin scrollFollow seems to be pretty buggy and development discontinued (last update in 2008)

when you use it with $.scrollFollow(), the default option values are not set so you get a lot of errors like the one you got.
when using it with $(...).scrollFollow, the main option container is not obtained correctly so it does not really work...

Here is a small script that will move the dialog around when the window is scrolled:

(function(wnd, $) {

        // query for elements once
    var $dlg = $("#dialog-report-problem-form").parent(),
        $wnd = $(wnd),
        // get the initial position of dialog
        initialTop = $dlg.offset().top - $wnd.scrollTop();

    $wnd.scroll(function() {
            // when qscrolling, animate the 'top' property
            $dlg.stop()
                .animate({
                    "top": ($wnd.scrollTop() + initialTop) + "px"
                }, "slow");
        })
        .resize(function() {
            // in case of resize, re-set the initial top position of the dialog
            initialTop =  $dlg.offset().top - $wnd.scrollTop();
        });

    // if you close/open the dialog, it will mess up the 'initialTop'
    // this will re-set the correct 'initialTop' when the dialog opens again
    $dlg.bind('dialogcreate dialogopen', function(e) {
        initialTop = $dlg.offset().top - $wnd.scrollTop();
    });

})(window, jQuery);

Working example on jsfiddle.

edited Jan 17, 2012 at 9:42

answered Jan 16, 2012 at 10:11

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dextervip Over a year ago

Hi, I see your working example but when I inserted into my template it always goes down and down. Look yourlnk.com/67 go to the footer and click report a problem

dextervip Over a year ago

Looks like the size of dialog and windows height affects

Didier Ghys Over a year ago

I see you load the script along with the dialog content so it's no possible to debug it and check what could be the problem. Could you place it in script.js after $("#report-problem").html(html); ?

Didier Ghys Over a year ago

Change the lines initialTop = $dlg.offset().top; to initialTop = $dlg.offset().top - $wnd.scrollTop();

Collectives™ on Stack Overflow

How to Scroll Flow JQuery UI Dialog

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related