Save div height in a cookie from jQuery resizable

Question

Hi,

I am using jQuery resizable from interface.eyecon.ro/docs/resizable for a menu on a page that I am working on. I need to set a cookie ( plugins.jquery.com/project/Cookie ) to store the height of the menu div so that the div doesn't resize to it's original css height on every page reload.

I've been trying to adapt the code from http://www.shopdev.co.uk/blog/text-resizing-with-jquery/#comment-1044 (I know there are a few errors in that code but I've got that example to work) for a while now but I can't get it to work.

My code looks like this without the cookie thing:

$(document).ready(function() {
    $('#resizeMe').Resizable( {
        maxHeight: 600,
     minHeight: 24,
     handlers: {
      s: '#resizeS'
     },
     onResize: function(size) {
      $('#content_two', this).css('height', size.height - 6 + 'px');
      $('#content').css('padding-top', size.height + 44 + 'px');
     }
    });
});

This is my first time on stackoverflow and I hope that all the good answers I've seen here also comes to this question :)

Thanks

Answer 1

You can probably try something like this:

$(document).ready(function() {

    var cookieName = 'divHeight';

    //On document ready, if we find height from our cookie, 
    //we set the div to this height.
    var height = $.cookie(cookieName);   
    if(height != null)
        $('#resizeMe').css('height', height + 'px');


    $('#resizeMe').Resizable( {
        maxHeight: 600,
        minHeight: 24,
        handlers: {
                s: '#resizeS'
        },
        onResize: function(size) {
                $('#content_two', this).css('height', size.height - 6 + 'px');
                $('#content').css('padding-top', size.height + 44 + 'px');
                //I am assuming that onResize is triggered when user has finished resizing the DIV. If yes, you can store this div height in the cookie. 
                $.cookie(cookieName, size.height);
        }
    });
});