A colleague got this error when trying to implement a jQuery slider plugin called S3 Slider.

uncaught exception: [Exception... "Could not convert JavaScript argument arg 0" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://dev.valugi.ro/lib/jquery/jquery-1.3.2.min.js :: anonymous :: line 12" data: no]


This error is not obvious and not very well documented on other places on web. I saw that is mainly related with various CSS properties. By debugging the plugin I saw that in his case was thrown when he was not passing some spans that the plugin creators take for granted in the HTML code. So I made a demo to simulate the problem. Check the firebug console for the error.

The code to reproduce the error in your Firebug Console:

var itemsSpan = $('span'); // but no spans in page
var currNo = 0;
var x = $(itemsSpan[currNo]); // x defaults to document
console.log(x);
console.log(x.css('bottom')); // throws error in jQuery curCSS function


It seems that at line 808 in curCSS function, jQuery throws this error as is unable to output the computed style for the document.
Fast solutions: either add the missing elements, either modify the plugin to check for elements before doing any CSS property retrival.

Update from the bug report that I opened.
In jQuery 1.3.3, $(undefined) will return an empty collection. That will either fix the problem or push it somewhere else. :) You could try the nightly where the patch is already implemented and see how it behaves.

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.

Sometimes you have to load dynamic images as a result of a AJAX request, and you want to be able to do things only after the image has finish loading. In this case the ready() function, which is a wrapper for the window.onload() function is not usefull, because it applies to the elements present at the beginning.

In this scenario you make a request and receive as a string a path for a new image you have to load. This is usefull if you have big images and want to wait until the images are loaded before doing anything else.


$(document).ready( function (){
$.get(
'test.php',
function( data ){
//console.log(data); // ["test.jpg"]
var _image = new Image();
_image.src = data;
_image.id = 'newImageId';
$(_image).load( function(){
//once image is loaded add it to the div and remove the preloading
$("#imageContainer").append( _image ).removeClass('loading');
// do other stuff
_image.alt = "test image";
});
}
);
});


I’ve tested it in IE, FF, Chrome and works with cache enabled/disabled. The secret, not a big one, is the usage of AJAX load() function which does a GET request in the background and allows a callback. The purpose of the load function is to inject some html code in the current page. If you want to change the src value for a current image and do a callback it will be a good idea to pass a random string to the GET request as your browser could cache the image name and content.

Demo here

First the html. Don’t use divs for layout purposes.

<fieldset>
	// these will be affected by check all
<div>
<input id="checkall" type="checkbox" /> Check all</div>
<div>
<input type="checkbox" /> Checkbox</div>
<div>
<input type="checkbox" /> Checkbox</div>
<div>
<input type="checkbox" /> Checkbox</div>
</fieldset>
<fieldset>
	// these won't be affected by check all; different fieldset
<div>
<input type="checkbox" /> Checkbox</div>
<div>
<input type="checkbox" /> Checkbox</div>
<div>
<input type="checkbox" /> Checkbox</div>
</fieldset>

The original post divs are nonsense in terms of usability and semantics. Loose them as the original author just needed some BR tags.

<fieldset>
<input id="checkall" type="checkbox" /> Check all 
<input type="checkbox" /> Checkbox
<input type="checkbox" /> Checkbox
<input type="checkbox" /> Checkbox
</fieldset>
<fieldset>
	// these won't be affected by check all; different fieldset
<input type="checkbox" /> Checkbox
 
<input type="checkbox" /> Checkbox
 
<input type="checkbox" /> Checkbox
</fieldset>

This is the original javascript:

$(function () { // this line makes sure this code runs on page load
$('#checkall').click(function () {
$checkall = $(this); OK
$close = $checkall.parents('fieldset:eq(0)').find('input'); // this is called $close but it should be $elements or something
$checkall.attr('checked') !== true ? $close.removeAttr('checked') : $close.attr('checked', 'checked'); // see my version down
});
});

The javascript can be shortened and I preffer using native functions like is(), pseudoselectors like :checked, and boolean values when accepted instead of strings.


$('#checkall').click( function () {
var all= $(this).siblings();
$(this).is(':checked') ? all.attr('checked', true) : all.attr('checked', false);
});


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.

Docs:
https://developer.mozilla.org/en/DOM/element.scrollTop
http://docs.jquery.com/CSS/scrollTop


$(document).ready( function (){
// it will scroll down the double of the div's height
// you can change it with any value
$("#scroller").scrollTop( $("#scroller").height() * 2 );
});


Demo:
http://dev.valugi.ro/jquery/scroll-down/