I keep getting “Missing } in XML expression.” I looked over my JS code quite a bit, but can’t seem to find anything wrong with it.
It happens during the execution of the post function.

Has anyone experienced this or may have any possible solution to this problem?

Thanks.

very good post and quite useful to me as I was today trying to center an image on the screen, which is exactly what the answer to How to Center a DIV Vertically in the Viewport does.

However the code snippet above has a syntax error. Line 17 should be removed, otherwise the curly bracket terminates the definition of vCenter. The code is correct on the jquery.vcenter.js used in the example page though.

Thanks for all your very useful post all the same

while here’s a tribute to you, my first jQuery plugin – ripped from your post

jQuery.fn.centerMe = function() {

var sTop = function() {
return window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
}

var sLeft = function() {
return window.pageXOffset || document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft;
}

var iHeight = function() {
return window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body.clientHeight;
}

var iWidth = function() {
return window.innerWidth || document.documentElement && document.documentElement.clientWidth || document.body.clientWidth;
}

return this.each(function(index) {
var elmWidth = $(this).width();
var elmHeight = $(this).height();
var scrollTop = sTop();
var scrollLeft = sLeft();
var innerHeight = iHeight();
var innerWidth = iWidth();

var top = scrollTop + (innerHeight / 2) – (elmHeight / 2);
var left = scrollLeft + (innerWidth / 2) – (elmWidth / 2);

$(this).css({
‘position’:'absolute’,
‘top’:top,
‘left’:left
});

});
}

But exact height I mean the complete height above the top scrolled area, area viewable and the area below which is yet to be scrolled.


[...]
var elTop = pos.sTop() + (pos.wHeight() / 2) - (elHeight / 2);
if (elTop < 0) {
var elTop = 0;
};
$this.css({
//position: 'absolute',
//marginTop: elTop,
paddingTop: elTop
//top: elTop
});
[...]


Finally, I did some changes in the plugin code and was able to fix it.
The changes are this:

//position: 'absolute',
//marginTop: elTop,
paddingTop: elTop
//top: elTop


As you can see, I commented out some lines and added the paddingTop.
So far, it worked for me (on a particular situation) on IE6/7/Win, FF3, Safari/Win, Google Chrome.

But, the question is: could you foreseen any problem with this change?
Thanks.