Print Page - Manage window resizing

Title: Manage window resizing
Post by: korenanzo on May 25, 2016, 02:17:40 AM

this post i is partially related to
http://www.jeasyui.com/forum/index.php?topic=5361.0

I've managed to have a popup window that is contained ito the boundaries of it container.

I need to do the same thing when resizing.

I'd like to stop the resizing when the cursor (mouse) reaches the edge of the container.

the simplest thing should be: to stop the resize action when reached the border. BUT how can I do it? OR there is another way?

Code:

w.window('window').resizable({

				onResize: function(e){
 				 
					var d = e.data;
					if (d.left < 0){d.left = 0;}
					if (d.top < 0){d.top = 0;}
					var parent = $(window);
					var stop=false;
					if (d.left + $(d.target).outerWidth() > parent.width()){
						stop =true;
					}
					if (d.top + $(d.target).outerHeight() > parent.height()){
						stop =true;
					}
					if (stop)
						// what to do here??
				},
 
			})

thanks, rik

Title: Re: Manage window resizing
Post by: jarry on May 25, 2016, 05:46:25 PM

Please call this extended method 'constrain' to limit the window position when resizing it.

Code:

$.extend($.fn.window.methods, {
    constrain: function(jq){
        return jq.each(function(){
            var target = this;
            var state = $(target).data('window');
            $(target).window('window').draggable({
                onDrag: function(e){
                    setPosition(e);
                    return false;
                }
            }).resizable({
                onResize: function(e){
                    setSize(e);
                    return false;
                },
                onStopResize: function(e){
                    setSize(e);
                    $(target).window('resize', e.data);
                    state.pmask.remove();
                    state.pmask = null;
                    state.proxy.remove();
                    state.proxy = null;
                }
            });
            
            function setPosition(e){
                var d = e.data;
                var parent = state.options.inline ? $(d.target).parent() : $(window);
                if (d.left < 0){d.left = 0;}
                if (d.top < parent.scrollTop()){
                    d.top = parent.scrollTop();
                }

                if (d.left + $(d.target).outerWidth() > parent.width()){
                    d.left = parent.width() - $(d.target).outerWidth();
                }
                if (d.top - parent.scrollTop() + $(d.target).outerHeight() > parent.height()){
                    d.top = parent.height() - $(d.target).outerHeight() + parent.scrollTop();
                }

                state.proxy.css({
                    display:'block',
                    left: e.data.left,
                    top: e.data.top
                });
            }
            function setSize(e){
                var d = e.data;
                var parent = state.options.inline ? $(d.target).parent() : $(window);
                if (d.left < 0){d.left = 0;}
                if (d.top < parent.scrollTop()){
                    d.top = parent.scrollTop();
                }
                if (d.left + d.width > parent.width()){
                    d.width = parent.width() - d.left;
                }
                if (d.top + d.height - parent.scrollTop() > parent.height()){
                    d.height = parent.height() - d.top + parent.scrollTop();
                }
                state.proxy.css({
                    left: e.data.left,
                    top: e.data.top
                });
                state.proxy._outerWidth(e.data.width);
                state.proxy._outerHeight(e.data.height);
            }
        });
    }
})

Title: Re: Manage window resizing
Post by: korenanzo on May 26, 2016, 03:01:36 AM

I have problems

when moving or resizing I get an error

Uncaught TypeError: Cannot read property 'css' of undefined

state.proxy.css({...

I use it in this way:

first I create the window, then call the method

var o = $("<div id="w" ></div>");

o.window({params})

o.window('constrain')

Title: Re: Manage window resizing
Post by: jarry on May 26, 2016, 08:35:10 AM

Please look at this example http://code.reloado.com/uzunec3/edit#javascript,html. It works fine.

Title: Re: Manage window resizing
Post by: korenanzo on May 31, 2016, 11:55:17 PM

If you load the patch file

jquery.easyui.patch.js

you will get the error

http://code.reloado.com/ecibef3/2/edit

Title: Re: Manage window resizing
Post by: jarry on June 01, 2016, 12:48:51 AM

Please try to download the updated patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.5-patch.zip. If you are using the online 'http://www.jeasyui.com/easyui/jquery.easyui.min.js' file, no patches are needed.

Title: Re: Manage window resizing
Post by: korenanzo on June 01, 2016, 12:58:15 AM

It works, thanks

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: korenanzo on May 25, 2016, 02:17:40 AM