I've run through a lot of browsers and noticed that this module currently doesn't work in IE7 when that works in FLIR before integration.

Opera also doesn't work but it seems to have issues working correctly in FLIR at the moment.

Comments

kevinquillen’s picture

This has to do with this line of jQuery:

$("h2").each( function() { FLIR.replace(this); } );

IE says that 'Object does not support this property or method'. I think if you find an equivalent statement in jQuery it will suit. This seems to be the issue, as you said the FLIR examples work in IE 6 and 7 on the creators website, Opera 9+ as well.

I am going to try this the normal way and see what happens.

kevinquillen’s picture

No go. I tried the regular method and still got the same error (followed example on here: http://facelift.mawhorter.net/quick-start/)

btopro’s picture

Ya, that's the issue I'm having it on too. Not sure why though because his original code on the examples page works in Opera (sorta) and IE7 (completely).

kevinquillen’s picture

Yeah, I am puzzled as well. The jQuery format isn't compatible for IE.

kevinquillen’s picture

Well, now I am not even using the module at all and still getting the same error.

kevinquillen’s picture

I think I've got it.

I commented out this line (approx line 486) in flir.js and this kicked it in for IE7:

/* var junk = parseInt(this.getStyle(o, 'padding-top'))+parseInt(this.getStyle(o, 'padding-bottom'))+parseInt(this.getStyle(o, 'border-top'))+parseInt(this.getStyle(o, 'border-bottom'));*/
			pix = o.offsetHeight/*-junk*/;

Now I can see it right in IE6 and 7 and Opera 9+.

cmawhorter’s picture

I forgot that was in there. It was my hack to get something displaying when you had a font-size set in EMs. You can comment it out safely. It was just to keep the rendered font size from being larger than it is supposed to be (if you had an h1 with a padding-top: 100px then the rendered font would be 100px+padding-bottom+font size on page).

I'll jot this down and get it fixed for the next version.

btopro’s picture

Status: Active » Needs review

var junk = parseInt(FLIR.getStyle(o, 'padding-top'))+parseInt(FLIR.getStyle(o, 'padding-bottom'))+parseInt(FLIR.getStyle(o, 'border-top'))+parseInt(FLIR.getStyle(o, 'border-bottom'));

Is the fix supplied on the facelift forums: http://forums.mawhorter.net/viewtopic.php?id=11

I'll try this and if it doesn't work then i'll try just commenting out the code.

btopro’s picture

Status: Needs review » Fixed

Works in IE7 now. New version will reflect this

wiltech’s picture

Version: 5.x-1.0-beta1 » 6.x-1.0

Its not displaying in opera 9.50 is there any fix on it?

btopro’s picture

Unfortunately not, it's a known issue and sadly one that goes deeper then this project because it's an issue with both Flir and jQuery. What happens is that the css('font-family') function doesn't always return the active font (aka if the font is changed dynamically the way this module does). So it always reflects Arial as the font instead of the one that you try to override arial with.

cmawhorter’s picture

I have a fix for you guys in regards to Opera.

$("h2").each( function() { FLIR.replace(this, new FLIRStyle({ cFont:'yourfontname' }) ); } );

The problem with Opera is a CSS/Javascript problem so this just bypasses it and allows Facelift to work.

btopro’s picture

Status: Fixed » Patch (to be ported)

Ohhh... I see what you're saying there. You bipass css all together and just tell it exactly what font to use.....

This is a MUCH better solution and will work in a lot more browsers / configurations. I can also roll this in w/ the ability to set multiple items to different fonts a lot easier bc of the css bipass.. Nice work!

btopro’s picture

Status: Patch (to be ported) » Fixed

Works a lot better now. Only ones w/ issues at IE5.5 and IE6 (at times).

Anonymous’s picture

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.