jQWidgets Forums

jQuery UI Widgets › Forums › Layouts › Splitter › Save splitter layout in cookies

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  jguardon 12 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Save splitter layout in cookies Posts
  • April 3, 2013 at 9:17 pm Save splitter layout in cookies #18561

    jguardon
    Member

    Hi all

    I was playing a bit with splitter to create a complex nested layout. So far so good.

    But looking for a way to persist the state of all splitters led me to an old “cookies (bool)” property which is not available in latest versions.

    So, which is the recommended way to save the settings of the whole thing via cookies and initialize splitters to not override the cookie values when the user reloads the page?

    I’m using jqwidgets 2.8 testing with Firefox and Chrome in Linux.

    Thanks in advance

    ~jguardon

    April 5, 2013 at 3:50 pm Save splitter layout in cookies #18677

    jguardon
    Member

    Why the “cookies” property was removed? It seems there is a true need to have an easy method to persist splitter positions, as the grid widget does… cookies or internal storage.

    Regards

    April 5, 2013 at 6:43 pm Save splitter layout in cookies #18687

    d_l
    Member

    I’ve been exploring API’s in other jqxWidgets and it’s true that there is cookie functionality in some API’s but not others.

    However I’ve seen a jQuery-cookie plugin described here ..

    http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery

    and here ..

    https://github.com/carhartl/jquery-cookie

    Perhaps as an interim solution you could loop through the jxqSplitter elements properties and save in cookies
    or better in php/MySql in case cookies are cleared by user.

    April 5, 2013 at 8:12 pm Save splitter layout in cookies #18694

    jguardon
    Member

    Perhaps as an interim solution you could loop through the jxqSplitter elements properties and save in cookies
    or better in php/MySql in case cookies are cleared by user.

    Thanks for your reply, d_l. In fact, I was asking for jqx methods, if they exist at all, I don’t know yet.

    Cookies are better for my application, because users could log in from different browsers or computers, and they have not the same screen resolution, etc.

    It could be ideal if developers will implement a sort of ‘autosave/autoload’ in future versions of jqx.Splitter. Meanwhile I will try to go cookies/storage.

    Regards

    April 7, 2013 at 2:06 pm Save splitter layout in cookies #18745

    jguardon
    Member

    Well, here is a very basic approach. However it could be enhanced adding other properties, as collapsed, disabled, etc.

    May be I’m wrong, but managing cookies with jqx.cookie class lacks a way to set an expiring date, because it uses session as default.

    Here is the code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    	<meta name="description" content="This page demonstrates splitter's events" />
    	<title id='Description'>Vertical Splitter </title>
    	<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    	<link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
    	<script type="text/javascript" src="scripts/gettheme.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    	<script type="text/javascript">
    	$(document).ready(function () {
    		var theme = '';
    		var spltrsize = $.jqx.cookie.cookie("jqxSplitter_mainSplitter");
    		if (undefined == spltrsize) spltrsize = 300;
    		$('#mainSplitter').jqxSplitter({
    			width: '100%',
    			height:'100%',
    			theme: theme,
    			panels: [{ size: spltrsize }]
    		});
    		$('#mainSplitter').on('resize', function (event) {
    			var panels = event.args.panels;
    			$.jqx.cookie.cookie("jqxSplitter_mainSplitter", panels[0].size);
    		});
    	});
    	</script>
    	<style type="text/css">
    	    html, body 
    	    {
    	        height: 100%;
    	        width: 100%;
    	        margin: 0px;
    	        padding: 0px;
    	        overflow: hidden;        
    	    }    
    	</style>
    </head>
    <body class='default'>
    	<div id="mainSplitter">
    		<div class="splitter-panel">
    		Panel 1</div>
    		<div class="splitter-panel">
    		Panel 2</div>
    	</div>
    </body>
    </html>

    Thanks for reading. Please, if you were able to enhance, share it!

    Regards

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.