jquery fadeTo() changes datatable font?

MikeS

Has anyone used the jquery plugins to fade a datatable? If so, have you noticed that it changes the font used to display the content of the datatable? I'm seeing this behaviour and am not sure how to go about correcting it.

The datatable is styled using a specific external datatable CSS that does not have any mention of "font-family". The page is styled with an external CSS file containing:

[code]
html {
overflow: hidden;
font-family: "Lucida Grande", Georgia, Tahoma, Verdana, "Trebuchet MS", sans-serif, Arial, Helvetica, ;
color: #41627E;
font-size: 0.8em ;
}
[/code]

Here's the javascript I'm using to toggle a DIV that wraps a datatable:

[code]
function toggleDiv(divid) {
var oWidget = $('#' + divid);
var odatatable = $('#dt' + divid);

if (oWidget[0].style.display != 'none') {
odatatable.fadeTo(1500, 0.0);
oWidget.fadeOut(1000);
} else {
oWidget.fadeIn(3000);
odatatable.fadeTo(3000, 1.0);
}
}
[/code]

Feel free to laugh at it. I'll be the first to admit that I'm a complete javascript noob and don't really know what I'm doing.
I "play" with the code until it "works".

When the page loads, all is well and the datatable shows it information using Lucida Grande as expected. However, the second I toggle the div, I can see the font used to display the datatable information change (to what I'm not sure) as it is fading out. When I toggle it again (to make it reappear), the information fades in and is using the same (wrong) font.

Any ideas where I may be tripping up?

Mike

allan

Hi Mike,

What I would suggest doing is making use of Firebug to 'inspect' the table (or Webkit's Inspector, DragonFly in Opera, IE dev tools etc) and see what font the table is changing to, and where it is coming from. It could be that jQuery is just adding a class to the container which is overruling the document font, and that style might need changing.

Regards,
Allan

MikeS

Thanks for the suggestions Allan. Those ideas have crossed my mind, but, I'm not using a "real" browser to render the page. I'm using the Microsoft web browser control that is hosted in a Visual FoxPro form and I don't think that those tools can work in this environment.

As for jQuery adding a class that changes my styles, I suppose that is possible. The thing is, I've tried to force the datatable font-family to be "Lucida Grande" upon fading in the div, but, that has no effect. I'd tried:

[code]
} else {
oWidget.fadeIn(3000);
odatatable.css('font-family', 'Lucida Grande');
odatatable.fadeTo(3000, 1.0);
[/code]

I'm going to keep digging a little deeper :)

Mike

allan

Hi Mike,

Interesting... Are you able to fire your page up in a "real" browser to see what happens there? Perhaps you could use jQuery to get the 'font-family' class which is applied to the first TD in the table once the effect as started - that might tell you if it has change, and what it has changed to, to help locate it in the css...

Regards,
Allan

MikeS

Hi Allan,

After doing your latest suggestion about using jQuery to get the 'font-family' of the datatable, it turns out that it is not changing, i.e., the font-family CSS is the same both prior to and after fading the table. The culprit is in the fading process itself. For some reason, the text gets narrower during the fading in/out and this is particularly evident when I look at the bolded header captions on my table. Prior to the start of fading out, the table headers look bold (like I set them). After the fade in is applied, the headers don't really look bold at all and the effect had me thinking that the font had actually changed!!! Yes it was that bad.

I'd changed the animation to use a jQuery toggle() instead and it does not mess up the text like fade does. Toggle() is an "instantaneous" effect unlike fade which has animation (but looks cooler). Looks like I'll have to stick to toggle for now.

Thanks for your assistance and for this very nice plugin.
Mike

allan

Hi Mike,

Nice debugging :-). Very odd that fadeTo() would cause this. If it were show() I could understand since it changes the width and height, but I don't think it does with fadeTo. So experimentation time... :-). If you set the opacity of the element using css("opacity", 0.5), does that mess it up? I'm wondering if its a rendering engine issue. Also, does it occur on only one browser on one platform, or all of them? It might be ClearType or something like that messing around with it.

Regards,
Allan

tanns

I have run into this problem with fadeTo() and IE. The fix for IE 7 & 8 is (ridiculous and) simple, and I didn't have to mess with font-family.

Explicitly declare background-color wherever you have text getting munged (div, th, td, etc). Problem solved.