window with fixed position

[robvoi]

Hi,

I would like to get a window with fixed position. So that it stays in it's place while scrolling.
"position: fixed" screws the window. I then only see the title bar.

With panel "position: fixed" works fine.

Is there a way to get the window in a fixed position? (while still movable - so stay inthe last position).

Thanks
Robert

[jarry]

Please try this:

Code:

$('#w').window({shadow:false}).window('window').css({
  position:'fixed',
  //...
});

[robvoi]

Please try this:

Code:

$('#w').window({shadow:false}).window('window').css({
  position:'fixed',
  //...
});

Thanks! This works until I move the window. Then is jumps and the and the fix is gone.
I tried to attach an event to the window and reassing it. But the event doesn't fire. I tired different examples but I don't get it to work.

Can you maybe help further?

Thanks
Robert

[jarry]

Here is the extended method to set a window with 'fixed' position.

Code:

$.extend($.fn.window.methods, {
	fixed: function(jq){
		return jq.each(function(){
			var opts = $(this).window('options');
			var shadow = $(this).data('window').shadow;
			$(this).panel('options').onMove = function(left,top){
				var p = $(this).panel('panel');
				setTimeout(function(){
					p.add($(shadow)).css({
						position:'fixed',
						top: p.offset().top-$(document).scrollTop()
					});
				},0);
				opts.onMove.call(this, left, top);
			}
			$(this).window('window').draggable({
				onBeforeDrag:function(e){
					e.data.startTop = $(this).offset().top;
				}
			});
			$(this).window('move');
		})
	}
})

Usage example:

Code:

$('#w').window({...});  // create window
$('#w').window('fixed');  // set to fixed position

[robvoi]

Thanks works loke a charm!
Thanks a lot for the great help.

Maybe the attribute "fixed" could be added to the window object. I would find it helpfull.

Robert

[veikko]

I had the same problem with dialogs scrolling out of view in scrollable page, or appearing outside the visible area of page. Thanks Jarry and Robert for this code and solution.

I had an issue with the shadow position after dialog open with this code but calling the move before open fixed it for me. So if you used to open dialog with:

Code:

$('#dlg').dialog('open');

After using dialog('fixed') you should change it to :

Code:

$('#dlg').dialog('move');
$('#dlg').dialog('open');

After these changes I also have had problems that the dialog sometimes disappears totally when opening it multiple times. It have never happaned before this fixed position change. This does not happen always and I cannot figure out how to reproduce it... :-( Have you noticed anything like this?

Also this fixed position breaks modal dialogs. Modals show ok but they allow you to scroll down from the dimmed area and outside the dimmed area you can still interact with the page. I guess possible solutions to this would be to make the dimmer cover whole page or to prevent from scrolling when modal dialog is open. Does any of you have this already implemented?

Please add the fixed position functionality to standard easyui in the future! Thanks!

[robvoi]

Hi,

I had a disappearing window once. But it never happened again.
So I didn't go into detail on this issue.

Also minimizing a window on load breaks the solution. I now simply minimize it after page load finished.

Robert