Frontend

横並び要素の幅を%で均等に指定しても、最後の要素が同じ行に入らない原因。

CSSで要素を均等横並びにする際、2つ並べたい場合は「width: 50%」と指定します。しかし、これだと2つ目の要素が次の行へ行ってしまい、2つ横並びにならないことがあります。

widthの合計値を100%ではなく99%にするとうまくいく場合は、ここで説明している方法で改善する可能性が高いです。

その原因を紹介します。

続きを読む

jQueryでanimateできない原因は? $(…).animate is not a functionが出る場合

jQueryでanimate関数を使ってアニメーション動作をしようとしたら、次のようなエラーが出ることがあります。

Uncaught TypeError: $(...).animate is not a function

 

これは、jQueryのslim版を使用しているのが原因かもしれません。

slim版では、ajax系関数が使えないことはよく知られていますが、実は、アニメーション系の次の関数もサポートされていません。

animate
fadeIn
fadeOut
fadeToggle
fadeTo
finish
stop
slideDown
slideUp
slideToggle

 

slim版を使用している場合は、full版に切り替えましょう。

CDNを使用している場合は、jquery.min.slim.jsの部分をjquery.min.jsと書き換えるだけです。

jQueryは頻繁にバージョンアップしますので、これを機に最新バージョンのものに切り替えても良いかもしれません。

 

ファイルサイズの差は、jquery 3.0.0では、slim版23.6 kBに対し、full版は30 kBです。25%分サイズが増えますが、あまり気にならない場合が多いと思います。

(なおminは圧縮を意味していますので、機能に違いはありません。)

 

CDNへのリンク

jquery – cdnjs.com

 

animateのリファレンスはこちら。

animate(params, [duration], [easing], [callback]) – jQuery日本語リファレンス

 

stackoverflowでも同様の質問が出ていました。

jquery : $().animate() is not a function – stackoverflow

 

jQueryの実践テクニックが多く載っている売れ筋の本です。

 

以上、jQueryでanimateできない原因は? $(…).animate is not a functionが出る場合でした。

Chart.jsのパイチャートがスマホ画面で潰れてしまうのを防ぐ方法!

Chart.jsはレスポンシブ対応のjavascriptチャートライブラリです。

レスポンシブ対応を謳っていますが、パイチャート/ドーナッツチャートをスマホなどの幅の狭い画面で表示させると、パイが縮小されすぎて見づらくなってしまいます。

それを防ぐ方法を紹介します。

続きを読む