JavaScript– category –
-
Colorbox.jsでモーダルウィンドウにスライダーを入れる
Colorbox.jsを使うとオプションの設定でモーダルウィンドウ内にスライダーを入れることができます。 ColorboxはjQueryで動くレスポンシブ対応のモーダルウィンドウです。 Colorbox - a jQuery lightboxColorbox Examplesデモページ //クラス要素を指定しな... -
よく使われているスライドショーJSライブラリ
【Slick JS】 有料ブログテーマAffingerでも使われているスライドショーライブラリ。基本的なスライドショーのスタイルは押さえてあります。 シンプルにカスタマイズしていけるのが使われている理由かなと感じました。 スワイプブレークポイントごとの設定... -
[JavaScript]スクロールで表示させるボタンブロックをつくる
【目的】 スクロールして画面を下げていくと突然表示させるブロックを作りたい 【対応】 目標とする要素をgetElementById等で取得して、その要素の高さをgetBoundingClientRect()で取得。 console.logでスクロールしていくとどれくらいの高さになっている... -
「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方
スライダープラグイン「Slick.js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。 【状況】 ボタンを押すと1度スライドが動くが止まる。マウスカーソルをブラウザから外すと再びスライダーが動き出す こ... -
Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因
Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする場合があります。 同じ方法でtable trの表示・非表示を切り替えた場合レイアウトズレが発生します。 原因はtrタグの初期設定されているdisplayの値がblockではないことが原因... -
jQueryUIのカレンダー「Datepicker」のオプション・カスタマイズ
「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選ん... -
jQueryUIのカレンダー「Datepicker」の基本・ダウンロード・日本語化
「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選ん... -
スライダープラグイン「slick.js」の使い方・カスタマイズ方法/ スライドドットの大きさを変える、色を変える
【「Slick.js」の使い方・カスタマイズ方法】 「Slick.js」の使い方・カスタマイズ方法でよくある事例のメモです。 スライドのドットの大きさを変更する CSSで調整できます。 疑似要素の中身にcontent: "•";を使ってスライダードットを再現しています。ス... -
areaタグをレスポンシブ対応させる方法
画像内にイメージマップをつくってリンクをつけることができるareaタグですが、 アクションを起こせる範囲を指定するため、レスポンシブ対応させるとなると手間がかかります。 【areaタグをレスポンシブ対応させる方法】 結論 CDNから読み込み、もしくはダ... -
jQueryでアコーディオン/ボタンをアニメーション回転させる
【jQueryでアコーディオン/ボタンをアニメーション回転させる】 基本的にはjQueryでアコーディオン（クリック開閉メニュー)と同様の手法 トリガーとなるボタンの位置は絶対配置で指定。 toggleClassでクラスを追加したときにCSSで回転させる。 回転アニメ... -
jQueryでアコーディオン（クリック開閉メニュー)の書き方
【jQueryでアコーディオン（クリック開閉メニュー)】 slideToggle（）を使って実装するのがかんたん。hover,clickをEventListenerにしてslideToggle（）を実行させる例がほとんど。 しかし、slideToggleの場合、css transitionのアニメーションが効かない... -
JavascriptでURLパラメータを取得し条件文を作るやり方
[Javascript]「?」を使ったif文の書き方-三項演算子 -
「Slick.js」指定できるオプション豊富な定番jQueryスライダープラグイン
slickは定番のJavaScriptスライダープラグインです。 jQueryで動作します。 公式サイトでのデモソースパターンとネットでの拡張サンプルコード事例が豊富なので 比較的使いやすいスライダープラグインだと感じます。 【slick ライセンス】 MITライセンス/... -
[Javascript]「?」を使ったif文の書き方-三項演算子
[Javascript]「?」を使ったif文の書き方-三項演算子 -
「Slick.js」でサムネイルはスライドしないで固定させる実践的な使い方
案件でスライドを実装しないといけなくなり、Slider Proで対応しようとしたのですが、 「1枚の画像のときにスライダーを表示させないでくれ」と言われてしまい1枚の画像のケースがありえるの？とツッコミしたくなりました。 スライダーを使うのだから複数... -
スライドJSプラグイン「Slider Pro」の実践的な使い方
JavaScriptのスライドプラグインはたくさん種類がありますが、 その中でも設定項目の多い「Slider Pro」の使い方です。 Slider Proの良いところとしては ・ブレイクポイントを使ったレスポンシブ対応 ・スワイプ検知 ・サムネイルの大きさ指定 これらの項... -
【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法
数あるJavaScriptスライダープラグインの中で、 ・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 【Swiperのメリット】 Swiperはオプションが多く、いろいろなスライダーを作ることができます。 ・IE11対応 ・jQueryが不要 ・スマ... -
jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更/lideUP(),slideDown()で画像を切り替える
アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。今回は... -
【Chart.js】グラフを簡単に作れるJavaScriptライブラリ
Chart.jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。 と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。 エクセルなどのスプレッドシートでグラフを作る感覚に近いです。 グラフの初期テンプレートは用意... -
【jQuery】「next()」「prev()」で要素の取得して画像を変更する。
JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えた...
1