jquery.masonryでボックスが重なってしまう時の対処法
ボックスをタイル状に並べる時に良く使われるjQueryライブラリの一つに「jquery.masonry」がありますが、このライブラリを使用して実装しようとすると、下記のように下のボックスが上のボックスに重なってしまう事があります。
このような状態になってしまう場合、まずは画像が無くても同様にボックスが重なってしまうかを確認してみます。画像が無く、文字だけならボックスが重ならない場合、画像サイズをうまく取得できないままスクリプトが実行されるために画像の高さ分だけボックスが重なっている事が考えられます。その場合、下記のようにimgタグにwidthとheightを記述する事で解決できる事があります。
【修正前】
【修正後】
jquery.masonryでボックスが重なってしまった場合の対処法でした。
slideToggleがカクカクしてスムーズに動作しない時の対処法
jQueryのslideToggleがカクカクしてお困りでしょうか？ 手軽にアコーディオンメニュー等を実装できるjQueryのslideToggleですが、特...
jQueryでclickイベントが繰り返し実行されてしまう時の解決法
アコーディオンの開閉とか、タブの切り替えとか、なにかと使用するjQueryのclickイベント。そんなclickイベント、いつも通り書いているはずなのに、2回ク...
PC版Chromeでスライダーに設定したリンクをクリックしても遷移しない時の対処法
サイトのメイン画像などで画像が横にスライドする機能。SlickやSlider-Proなどいろんな種類のスライダープラグインも揃っており、jQueryでよく実装す...
動的に追加した要素のクリックイベントが発火しない時の書き方
クリックしたら要素が増える。jQueryの使い方としてはとてもポピュラーな手法ですが、たまーにハマると抜け出せなくなるのもjQueryでよく陥る状況。今回は動的...
bx-sliderをスマホで実装したらスライダーの上で上下にスワイプ出来なくて、画面をスクロール出来ない問題の解決法
jQueryでスライダーを実装するためのプラグインといえば、「slick」をはじめ多くのプラグインがありますが、ひと昔前はスライダーといえば「bx-slider...
