プログラマ気分

メモや自分が思ったことを書く

<< Firefox 3.0.3 | main | 【非表示レイヤーの書き出し】
チェックが自動的に外れる不具合 >>

スポンサーサイト

2014.08.06 Wednesday

一定期間更新がないため広告を表示しています

-|-|-|by スポンサードリンク

jQuery.curvyCorners 使用における問題点

2008.10.14 Tuesday

この記事で対象としているのは、curvyCorners 最新バージョン 1.8(2008年10月14日現在)IE です。
curvyCorners とは何か?については書きません。
何故ならかなり前から登場していて、散々書かれてきた内容だからです。
その所為か、ここ最近のバージョンについての記事が見つかりません。

問題

IE で curvyCorners(最新バージョン 1.8)を使ったページを見ると、下のエラーが発生し、corner が適用されません。 引数が無効です。(Invalid argument.)

発生条件

corner を適用する要素にボーダーがあり、top, bottom の左右の角に false、もしくは半径の値に 0 が代入されている場合にこのエラーが発生します。

エラーの理由

jquery.curvycorners.source.js の 264 行目青で示した部分に原因があります。 $(contentContainer).css({position:"relative", 'float':"left",width:"100%", "margin-top":"-" + (topMaxRadius-borderWidth) + "px", "margin-bottom":"-" + (botMaxRadius-borderWidth) + "px"}).addClass = "autoPadDiv"; jQuery をご存知の方なら CSS を操作しているのだと一目で分かると思います。
問題は margin-top, margin-bottom に設定しようとしている値です。 この値がパースエラーを引き起こし、落ちてしまうのです。
値は必ず -(マイナス)になる点に注目して下さい。

次に変数を簡単に説明します。
topMaxRadius = tl, tr 一番半径が大きい値
botMaxRadius = bl, br 一番半径が大きい値
borderWidth = ボーダー幅
例えば div 要素にボーダー幅 1px で、tl が 8、tr が 6 の corner を適用すると、変数 topMaxRadius には 8 が入り、margin-top の値はこの様になります。
"margin-top":"-" + (8-1) + "px" 分かりやすく書き直します。
"margin-top":"-7px" しかし、topMaxRadius から borderWidth を引いた値がマイナスになった場合どうなるのでしょうか。実はこれがエラーの原因に繋がっているのです。

tl, tr 両方の値が false だと想定して説明します。
左右の角が false だと、半径の値が自動的に 0 となる為、topMaxRadius も 0 が代入されます。
この状況で margin-top の値を求めると、下記の様になります。
"margin-top":"-" + (0-1) + "px" 分かりやすく書き直します。
"margin-top":"--1px" 見て分かるとおり、--1px なんて値は CSS で使えません。
無理に使えばパースエラーを引き起こします。
つまりこれがエラーの原因なのです。
(Firefox 等でもこのパースエラーは表示されます)

もちろん bl, br に false や半径を 0 としても同様にエラーが起きますので注意が必要です。

対処方法

●元ファイルをいじる $(contentContainer).css({position:"relative", 'float':"left",width:"100%", "margin-top":topMaxRadius - borderWidth <= -1 ? 0 : -(topMaxRadius - borderWidth) + "px", "margin-bottom":botMaxRadius - borderWidth <= -1 ? 0 : -(botMaxRadius - borderWidth) + "px"}).addClass = "autoPadDiv"; 青で示した様に書き換えれば、今まで通り使用できます。
jquery.curvycorners.packed.js を使われる方は、変数名が違いますので注意が必要です。 "margin-top":"-"+(x-n)+"px","margin-bottom":"-"+(y-n)+"px"上の一文を検索して、下に書き換えて下さい。 "margin-top":x-n<=-1?0:-(x-n)+"px","margin-bottom":y-n<=-1?0:-(y-n)+"px" ●設定値で何とかする
苦肉の策ですが、角丸にしたくない部位には false や半径に 0 を設定するのではなく、半径に 1 を設定してください。上述の例を変えるのであれば、下の様に書き直せます。 $("div#test2").corner({ tl : { radius : 1 }, tr : { radius : 1 } }); radius が 0 と 1 の場合では、やはり見え方が違います。 しかし、元のソースを直す以外でしたら恐らくこれしか方法はないかと思います。

補足

この件について書かれている方が海外にいらっしゃいますね。
curvyCorners does not work in IE7 throws "Invalid Argument" error

ちなみに 2007年3月時点の curvyCorners には、パースエラーによるバグはありませんでした。

【追記】

margin-top, margin-bottom 以外にもパースエラーを引き起こすプロパティがある様です。

JavaScript03:45comments(0)trackbacks(0)by ニノミヤ カズノリ

スポンサーサイト

2014.08.06 Wednesday

-|03:45-|-|by スポンサードリンク

コメント
コメントする









トラックバック
calendar
1234567
891011121314
15161718192021
22232425262728
2930     
<< September 2019 >>
sponsored links
selected entries
categories
archives
recent comment
recent trackback
links
profile
search this site.

others
mobile
qrcode