@chromeDevelopers please make the your console at least as good as Firebug.

A server side solution of this problem is to keep only a cookie with a hash on the client side and read/save all the variables associated with that hash on server side or database. Downside to this approach is that you have to make an extra call server/db call each time you wanna know the values.

The interesting thing is that YUI implements a mechanism to read/write this subcookie data. I’ve tried to do the same in jQuery starting from $.cookie plugin and I’ve come up with this usage.


/**
* Create a cookie with the given name, part and value and other optional parameters.
* If the part parameter is passed the value will be asigned to the part key
*
*
* @example $.cookie('the_cookie', 'part', 'the_value');
* @desc Set the value of a cookie. If part parameter is present it will create the value in serialized form
* @example: $.cookie('the_cookie', null, 'the_value') // creates a cookie with value "the_value"
* @example: $.cookie('the_cookie, 'name', 'the_name') // creates a cookie with value "name=the_name"
* @example: $.cookie('the_cookie, 'prename','second_name') // will add info to the cookie value "name=the_name&prename=second_name"
* @example $.cookie('the_cookie', null, 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', null, 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie','name', null);
* @desc Delete the name value
* @example $.cookie('the_cookie',null, null);
* @desc Delete a cookie by passing null as value.
*
* @param String name The name of the cookie.
* @param String part The key for the array.
* @param String value The value of the cookie or of the element.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
*
*
*/
$.cookie('TheCookie', 'first_key', 'value1', options); // will write the cookie
$.cookie('TheCookie', 'second_key', 'value2', options); // will add the second_key info
alert($.cookie('TheCookie', 'second_key')); // will alert value2
console.log( $.cookie('TheCookie')); // "first_key=value1&second_key=value2
}

You can see a demo of jQuery Subcookie here. This is only a draft but I could rewrite it in a serious plugin if any interes is shown and you think this is could be useful.

Fact: you don’t have to use plugins for everything.

Working on a custom javaScript intensive CMS I get the task of displaying a big image inside a controlled environment. I could have used a plugin like MbImgNavigator or ImageZoom. I implemented both but I wasn’t particularly satisfied with neither.

So I created my own simulation that is just a couple of lines without even the need for something complex.
What it does:

• checking if the image is bigger than then the restrictive container
• modifies a envelope container to allow movement only between the calculated permitted limits
• activates the drag (jQueryUI) by globally or by axis if only one of the dimensions is overlapping the limits

If the image is smaller that the limits nothing happens.

$(document).ready( function (){
var overflow_x = 0;
var overflow_y = 0;
var _image_x = $('#imageTest').width();
var _image_y = $('#imageTest').height();
if( _image_x > 300 ){
overflow_x = _image_x;
}
if( _image_y > 300 ){
overflow_y = _image_y;
}
if( overflow_x && overflow_y ){
$('#bckContainerImg').css(
{
height: (overflow_y * 2 - 300),
width: ( overflow_x * 2 - 300 ),
'margin-top' : -( overflow_y - 300),
'margin-left': -( overflow_x - 300)
}
);
$("#bigImg img").draggable({containment: '#bckContainerImg'}).css({ cursor: 'all-scroll'});
} else{
if( overflow_x ){
$('#bckContainerImg').css({width: ( overflow_x*2 -300 ), 'margin-left': -(overflow_x - 300) });
$("#bigImg img").draggable({ axis: 'x', containment: '#bckContainerImg' }).css({ cursor: 'e-resize'});
}
if( overflow_y ){
$('#bckContainerImg').css({ height: (overflow_y * 2 - 300), 'margin-top': -(overflow_y - 300),});
$("#bigImg img").draggable({ axis: 'y', containment: '#bckContainerImg' }).css({ cursor: 'n-resize'});
}
}
});


You can see a full demo here.