How do I use Scroll Follow with the jQuery dialog?

I'm getting closer to get it to work but getting some weird behaviour:

I have the code below within head (script) tag (see end of post):

Since there is no id for the modal dialog created by jQuery, I create it dynamically when dialog opens, and then run:

$jQuery( '#dialogOuter' ).scrollFollow();

Is there any reason why I should not execute this line:
$jQuery( '#dialogOuter' ).scrollFollow();
from within the:
$jQuery("#dialog").dialog({ ..... ????

See below for example....

My problem is that it does not seem to work wery well.
In firefox it scrolls allways if it get above the viewport top, but not often when it gets below the viewport bottom.... , different behaviour in different browsers... but none seem to work wery well.

Is there a way I can make it work as it is expected to when used with the modal dialog from jQuery?

Note that I use jQuery in no conflict mode using this line:
var $jQuery = jQuery.noConflict();

Could really need some help to make this work...

jQuery dialog and scroll follow call below...
$jQuery(function() {
$jQuery("#dialog").dialog({
autoOpen: false,
bgiframe: true,
width: 400,
height: 350,
modal: true,
position: 'center',
buttons: {
Okay: function() {
$jQuery(this).dialog('close');
}
},

open: function(event, ui) {
// alert("TEST");
// get the ref to outer container... that is parentElement of dialog div
el = document.getElementById('dialog');
elP = el.parentNode;
if (!elP.id){
// dynamically add the id, and then the scroll follow code
elP.setAttribute('id','dialogOuter');
$jQuery( '#dialogOuter' ).scrollFollow();
}
}

});

$jQuery('#btnTest').click(function() {
$jQuery('#dialog').dialog('open');
});

});