开发者

Cross-Browser jQuery text-zoom implementation

I've got some code to increase/decrease font size. This is giving me a headache because each browser seems to implement the $.css('font-size') differently (see jquery bug). The part that's really killing me, though, is that Firefox is scaling up okay, but when I use the scale down function below, it scales up. Webkit & IE are both working as expected. Any ideas on that?

I put this in a fiddle here: http://jsfiddle.net/srQ3P/1/ where you can see it working as expected, and you can see it broken in firefox at the project page: http://cumberlandme.info/residents


MAJOR EDIT

Sorry, the issue is n开发者_JAVA百科ot the code, it's firefox buggy behavior. After I zoom in or out with the browser controls (ctrl + plus or ctrol + minus) the js goes haywire. This doesn't happen in other browsers. This is the real issue. Any advice on that


The problem in this case was with my javascript text zooming function. The original function I used (found online) looked for a specific em value in the body font style and if it did not find one, reset the font size to '1em'. Like so:

if (document.body.style.fontSize == "")
    document.body.style.fontSize = "1em";
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.1) + "em";

This worked (why, I don't know) okay on IE, but not Ffx. So the solution I came up with checks for IE and does things slightly differently based on if the browser is IE or not. It's worth nothing that the jQuery docs recommend against checking for the browser in this way, but I did it anyway!

var currSz = parseFloat($('body').css('font-size'));
Math.round(currSz);

if($.browser.msie)
    currSz++;
else
    currSz = currSz + .7;

$('body').css('font-size',currSz); 
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜