They updated JQMIGRATE and they added once which is kind of a pain in the butt and I wasn't sure if Layout was effected.

https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-use-of-number-typed-values-is-deprecated-in-jqueryfncss

Basically if you do .css('opacity', 0); you can't do that now. No NUMBER values can be passed to the CSS attribute only strings so either .css('opacity', '0'); or .css('opacity', String(0));

I know you do some generic CSS handling in Layout so wasn't sure if it was affected or not but thought i would report!

Thank you for improving the base library. It has allowed me to move an application to jQuery 3 successfully!

But a small problem is that the various JavaScript CDNs are only hosting the "original" outdated jQuery Layout plugin, and this includes the official jQuery site. I made an effort to add your library to cdnjs, but it didn't fit within their rules.

I'm hoping we can find a solution to this. Perhaps to host on an alternate CDN? Or, if your code can be merged upstream with the original jQuery Layout plugin, then we won't have this duality. Any thoughts?

@GedMarc Hi, firstly thank you for your elegant and useful library. It's very helpful to our team.
I noticed that some code was commited to upgrade jquery from 3.6.0 to 3.6.1 on September 17, 2022.
Will a new major version be released? Is the latest version 1.9.0 still stable?

We are currently migrating source code to reactjs.

While migrating, we removed jQuery related resources(js, css, library files) from index.html and moved to js file(view component).

And we had to import those files dynamically, at this time we use code like below.

const linkTag = document.createElement('link');
linkTag.href = 'http://localhost:8888/ips-eng/lib/jQuery-UI-Layout/layout-default.min.css';
linkTag.rel = 'stylesheet';
linkTag.type = 'text/css';
document.head.appendChild(linkTag);

const scriptTag = document.createElement('script');
scriptTag.src = 'http://localhost:8888/ips-eng/lib/jQuery-UI-Layout/jquery.layout_and_plugins.min.js';
document.head.appendChild(scriptTag);

Everything works fine, except Resize Bar cursor is not showing if you hover on the element, and if you drag the bar it won't resize the panels.

I tried to install this library from npm, but I don't know how to(couldn't find the package from npm).

I even tried to import directly from the js file, but webpack shows errors while compiling. (see below)

// index.tsx
import './resources/lib/jQuery-UI-Layout/layout-default.min.css'
import './resources/lib/jQuery-UI-Layout/jquery.layout_and_plugins.min.js'

Compiling...
Failed to compile.

src\resources\lib\jQuery-UI-Layout\jquery.layout_and_plugins.min.js
  Line 1:45:     'define' is not defined                                                no-undef
  Line 1:57:     'define' is not defined                                                no-undef
  Line 1:85:     'jQuery' is not defined                                                no-undef
  Line 1:7696:   'debugData' is not defined                                             no-undef
  Line 1:7752:   'debugData' is not defined                                             no-undef
  Line 1:17589:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:17920:  'string' is not defined                                                no-undef
  Line 1:25056:  Unexpected use of 'self'                                               no-restricted-globals
  Line 1:81727:  's' is not defined                                                     no-undef
  Line 1:81766:  'ar' is not defined                                                    no-undef
  Line 1:81829:  'ar' is not defined                                                    no-undef
  Line 1:81850:  'ar' is not defined                                                    no-undef
  Line 1:81883:  's' is not defined                                                     no-undef
  Line 1:82128:  's' is not defined                                                     no-undef
  Line 1:83915:  'parse' is not defined                                                 no-undef
  Line 1:88224:  'state' is not defined                                                 no-undef
  Line 1:89861:  Unexpected use of 'screen'                                             no-restricted-globals

The only way I can make it work is to put jQuery, jQuery UI, jQuery UI Layout to index.html.

I hope it works with dynamic loading.

Is there an updated version of the docs site that goes along with this fork? This forum post seems to indicate that Kevin had granted update rights, but I'm not finding any updated docs or merges into the official repo.

Using 1.8.3 in Firefox I have verified my settings are getting stored in Local Storage but I am still getting this warning in Firefox from layout.js....

Cookie “EC_TEST” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To know more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

Can you verify you are still creating cookie even though I have storageLocation: 'localStorage' ???

Would you accept a patch to convert this to a loadable module? AMD, CommonJS, etc...

Update code to only support browsers supported by jQuery 3. This means dropping support for IE6-8.

If this is considered desirable I am willing to begin submitting changes removing deprecated jQuery features.

jquery-migrate-3.2.0.js:102 JQMIGRATE: jQuery.isArray is deprecated; use Array.isArray

When running JqMigrate gettting this warning on Layout.

Hope all is well!

Sorry forgot to mention using latest JQMigrate 3.2.0

Hi, firstly thank you for maintaining this really useful library.

The following line (dating back 6+ years) disables jQuery UI Draggable's iframeFix option and says "TODO: consider using when bug is fixed":

I've tested using the iframeFix option (instead of maskContents) and it seems to work fine for layouts with iframes in current Chrome, Firefox, Edge & IE 11 (actually it seems to work better than maskContents because it fixes a problem I occasionally see where the drag doesn't always start when dragging from the edge of the slider).

I'm not sure what bug it was referring to, but maybe it has been fixed now. Is there any reason why maskContents can't be replaced with Draggable's iframeFix?

IE is dead as of June 15, 2022 so you can remove all the isIE and browser.isIE6 hacks in the code!

I want to install this software with npm, but I can't find it in https://www.npmjs.com/

I just debugged a crazy PF issue. I am using PrimeFaces.getCookie() which uses $.cookie which PF includes jquery.Cookie plugin.

However since layout.js loads aftre its loading your version of Jquery Cookie which looks like is old and has a bug in it.

Now that you are using Persist JS in this plugin can the old jquery cookie plugin be removed from the distribution of layout.js?

It looks like you removed these methods somewhere along the way but PF Extensions uses them.

            /**
             * Stringify a JSON hash so can save in a cookie or db-field
             */
            , encodeJSON: function (json) {
                var local = window.JSON || {};
                return (local.stringify || stringify)(json);

                function stringify(h) {
                    var D = [], i = 0, k, v, t // k = key, v = value
                        , a = $.isArray(h)
                    ;
                    for (k in h) {
                        v = h[k];
                        t = typeof v;
                        if (t == 'string')  // STRING - add quotes
                            v = '"' + v + '"';
                        else if (t == 'object') // SUB-KEY - recurse into it
                            v = parse(v);
                        D[i++] = (!a ? '"' + k + '":' : '') + v;
                    }
                    return (a ? '[' : '{') + D.join(',') + (a ? ']' : '}');
                }
            }

            /**
             * Convert stringified JSON back to a hash object
             * @see  $.parseJSON(), adding in jQuery 1.4.1
             */
            , decodeJSON: function (str) {
                try {
                    return JSON.parse(str);
                } catch (e) {
                    return {};
                }
            }

If I set a border on .ui-layout-pane, the resizer position is being placed wrongly. left position should be -2px from the result.

This is stylesheet which makes the problem.

.ui-layout-pane {
    border: 1px solid #BBB;
}

It is showing correctly in Chrome, but IE11 is showing weirdly, but If I drag the resizer it showing fine again.

I specify the layout like this:

$(".pane").layout({
	applyDefaultStyles: true,
	north: {minSize: 100, size: 300},
	north__childOptions: {
		applyDefaultStyles: true,
		west__minSize: 100,
		west__maxSize: 300,
		west__paneSelector: ".n-west",
		center__paneSelector: ".n-center",
	},
	stateManagement__enabled: true,
	stateManagement__includeChildren: true,  // this should already be by default
	center__paneSelector: ".c-pane",
	north__paneSelector: ".n-pane",
});

but only the top layout state gets saved. Am I doing anything wrong or is there a bug? If I put the stateManagement__enabled in the child options, then only this one would be saved and the top one wouldn't.
Edit: also the demo saved_state_nested.html is not saving the state.

The latest version works fine with IE but broke on Chrome.

What browser do you use to test?

I use the client side cookie storage of Layout to remember my layout. The cookie needs to add SameSite=Strict and secure=true if the URL is HTTPS.

1. We need to detect if the url is HTTPS

2. If yes apply both secure=true and SameSite=Strict to the cookie.