Corners and background colors in IE8?

[Axe]

Hi,
any chance there will be a recent update to supprt IE8?
I also have noticed problems to adopt the background color
when other than white. Can this be fixed and if so... the hard one...
when?

Great plugin !

/Axe

[Jonah Fox]

You can pass a specific background color into the plugin.

It doesn't work it out automatically for performance reasons.

IE8 should be coming as soon as I can find a decent virtual machine to install it on

[Brian Buchanan]

On May 4, 1:45 pm, Jonah Fox <jonah...@gmail.com> wrote:
> You can pass a specific background color into the plugin.
>
> It doesn't work it out automatically for performance reasons.
>
> IE8 should be coming as soon as I can find a decent virtual machine to
> install it on

You don't need a separate VM if you install IETester. I was just
using IETester to test my app in IE8 and discovered that my corners
weren't rounding. :)

http://www.my-debugbar.com/wiki/IETester/HomePage

- Brian

[Brian Buchanan]

I did some searching and figured out how to get VML to work in IE8.
This also works in IE6 and IE7; it's basically what excanvas.js does.

--- a/lib/web_server/docroot/js/cornerz.js
+++ b/lib/web_server/docroot/js/cornerz.js
@@ -22,7 +22,5 @@ CHANGELIST from v0.4

if($.browser.msie && document.namespaces["v"] == null) {
- document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
- var ss = document.createStyleSheet().owningElement;
- ss.styleSheet.cssText = "v\\:*{behavior:url(#default#VML);}"
+ document.namespaces.add("v", "urn:schemas-microsoft-com:vml",
"#default#VML");
}

Unfortunately, the corners are not drawn correctly. Looks like
they're being shifted, or drawn with the wrong radius, or something.
I'm not knowledgeable enough about the implementation to sort it out
without doing a lot of trial and error work. I tried disabling the
fixIE setting, figuring that perhaps MS fixed the particular bug this
setting was intended to address, but that did not resolve it.

- Brian

[roobin]

Ok,

so i think i figured it out.
As Brian also found out, you need to change the import directives.
New code:

if($.browser.msie && document.namespaces["v"] == null) {

/*
original import with star-hack

document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

var ss = document.createStyleSheet().owningElement;

ss.styleSheet.cssText = "v\\:*{behavior:url
(#default#VML);}"

*/
/*new import with and without star hack(due to star-hack not being
supported nor needed in IE8), also the new import directives to work
in IE8*/

document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

document.namespaces.add("v", "urn:schemas-microsoft-com:vml",
"#default#VML");

var ss = document.createStyleSheet().owningElement;
ss.styleSheet.cssText = "v\\:{behavior:url(#default#VML);*
{behavior:url(#default#VML);}"
}

Also the unit does not default to 'px' anymore, there is one missing
unit spec(left was missing px) in the vmlCurve function, make sure to
specify px in all style-rules:
New code:
function vmlCurve(r,b,c,m,ml,mt, right_fix) {

var l = m-ml-right_fix;
var t = m-mt;
return "<v:arc filled='False' strokeweight='"+b+"px'
strokecolor='"+c+"' startangle='0' endangle='361' style=' top:" + t
+"px;left: "+ l + "px;width:" + r+ "px; height:" + r+ "px' />";
}

Thats it, works for me in both ie7 and ie8. I am using Cornerz 0.6
Yes you love me =)

[Axe]

Yes !

We do love you. It works great.
Than you Roobin and also thanks to Brian Buchanan who
gave the path to a new developer tool the IETester.

[Kevin Dalman]

Jonah,

I do not find that searching parent elements for a bgColor
significantly affects performance - it takes only a few extra
milliseconds. You could let the user choose whether they car about
these ms by making it 'option', like:

autoBgColor: true

Auto-bg code could be something like...

if (settings.autoBgColor) {
var $Elem = $(this);
var bgCol = "";
// find the background color - ascend all the way to BODY if
necessary
while (!bgCol || bgCol=='transparent') {
$Elem = $Elem.parents(':first');
bgCol = $Elem.css('backgroundColor');
if (!$Elem[0] || $Elem[0].tagName=='BODY') break;
}
if (bgCol && bgCol != 'transparent') bg = bgCol;
}

You could test using native code instead of jQuery for walking the DOM
to see if you can gain a few ms...

elem = this;
...
elem = elem.parentNode;
bgCol = $(elem).css('backgroundColor');

I also find it acceptably fast to read element radius from CSS...

var $E = $(this);
var moz = '-moz-border-radius';
var radius = {};
var r = ;
if (r = $E.css(moz)) radius.tl = radius.tr = radius.bl = radius.br =
r;
if (r = $E.css(moz+'-topleft')) radius.tl = r;
if (r = $E.css(moz+'-topright')) radius.tr = r;
if (r = $E.css(moz+'-bottomleft')) radius.bl = r;
if (r = $E.css(moz+'-bottomright')) radius.br = r;

But once again, this could be an option. S for those users willing to
hard-code all radius settings in Javascript don't have to use it.

Options are good. :)

/Kevin

On May 4, 1:45 pm, Jonah Fox <jonah...@gmail.com> wrote: