jQuery Forum

If the user moves a modal window in JQuery UI so far up the screen that the title header bar is off the top underneath the browser buttons, then they let go so it stays there, how can they then grab the window again to bring it back into view?

For example, go here and move the modal window up with your mouse until the top half of it is hidden under your browser's address bar then release it.  Now what?  Is there some way to move it back down or is it stuck there?

http://www.jeasyui.com/demo/main/index.php?plugin=Window&theme=gray&dir=ltr&pitem=

I've attached a screen shot to show the problem.

I cannot find any documentation on what the event object contains that is passed into my callback function for the scrollstart and scrollstop events.

$('#element').bind('scrollstart', function(e) {
    // what is accessible via "e" in here?
});

I'm trying to implement a swipe scroll for a special component and need to know how to read the finger movement in these events.

One of the things that I kept running into was live data not updating the screen elements with JQuery Mobile, especially when using templates & KnockoutJS data binding.

The way I found to "force" it to update the components with the new data is to call the function shown below after any live updates to data on the screen.

function forcePageRefresh()
{
    // force page refresh (why is this needed???)
    var body=$('body');
    body.height(9999);
    setTimeout(function() {
        body.height(0);
    }, 10);
}

It's a simple brute-force trick but seems effective and hardly noticeable, if at all, to users.  In fact, to keep code simple and not have a million of these calls scattered throughout, I created a pageShow handler and called this at the end.

$('div[data-role="page"]').live('pageshow', function(event, ui) {
    // called for every page after it becomes active
    // do whatever else you need here..
    forcePageRefresh();
});

I have the following code which I've changed a million times trying to find the "right" trick but it still doesn't work in Safari.  All attempts have worked in Firefox.  All I'm trying to do is dynamically build a div from a query to display a series of images.  My header has zoom in/out buttons which should resize each image in the div.  Safari works only AFTER I resize the browser window just a nudge.  Once I do that one time, the zoom function works great.

Why does Safari need this browser resize before the image zooming happens when Firefox does not?  Any way I can do this from script so the user doesn't have to physically do it?  I've tried it with and without the enclosing inner div.

1.     var html = '<center>';
2.     for(var pg=1; pg<=pages; pg++)
3.     {
4.         var mp = pages+'';
5.         var cp = pg+'';
6.         while(cp.length < mp.length) { cp = '0'+cp; }
7.         html += '<div class="pdfpage" style="width:100px; height:100px"';
8.         html += ' <img style="width:100%;height:100%" src="/ionmed/reports/'+id+'-doc-'+cp+'.png?rand='+Math.random()+'" />';
9.     }
10.     html += '</center>';
11.     $('div#report-scroller').html(html);

1. function zoomIn()
2. {
3.     var imgs = $('.pdfpage');
4.     var w = $('.pdfpage').width() * 1.5;
5.     var h = $('.pdfpage').height() * 1.5;
6.     imgs.each(function() {
7.         $(this).css({
8.             "width":w+'px',
9.             "height":h+'px'
10.         });
11.     });
12. }

1. .pdfpage {
2.     margin-top: 4px;
3.     margin-bottom: 4px;
4.     border: 1px solid black;
5.     display: block;
6. }