<li> width calculation error when using webfonts

[aledef]

Hi, great work with lavalamp!

Just a minor issue: if you use webfonts (instead of Arial, Verdana ecc..) in menu items Lavalamp fails calculating

width so the backLava element initial position is not correct.

You can see this here: http://www.misurastevia.it/idx/29/ricette

I solved the problem using Jquery before Lavalamp init to calculate and assign the actual width to each

element so Lavalamp can get it right:

$j( ".header .menunav ul li" ).each(function(index) {
    // set 'li' width to solve custom font width error
    elemWidth = $j(this).css('width');
    $j(this).css( "width",elemWidth );
});

// init lavalamp
$j(".header .menunav ul").lavaLamp({ 
    fx: "easeOutQuart", 
    speed: 700
})

I'm using Lavalamp 1.4 and, jquery 1.8.3

Alessio

[jtnix]

There are several work arounds including using Google's WebFont Loader JavaScript library to load fonts using JS so you can trigger other JS after web fonts are loaded.

For a pure JQuery work around, you can also enable autoResize feature in LavaLamp and trigger a window.resize event after a modest timeout when loading the page:

$(function() {
	$('ul#projects-menu').lavaLamp({
		fx: 'easeOutQuad',
		speed: 500,
		returnDelay: 1000,
		autoResize: true,
	});
});
var t = setTimeout(function() {$(window).trigger('resize')}, 333);