Javascript／jQuery– category –

モバイル表示の際に表示するシンプルなスマホナビゲーション（ドロワーメニュー）の実装サンプルです。 ハンバーガーアイコンをクリックすると、ドロワーメニューが表示されるナビゲーションです。アイコンクリック時は、×にマークに変化するアニメーショ...

CKEditor4はデフォルトでは、文字色と文字背景の選択ができないようです。そのため、colorbuttonのプラグインを追加する必要があります。 プラグインダウンロードページ https://ckeditor.com/cke4/addon/colorbutton 下記をconfig.jsに追記し、プラグイン...

CKEditorで、ボタンなどをドラッグアンドドロップしてしまうと、意図しないコードが入り、コンテンツが表示されなくなったりなどの事故が発生することがあります。 事故防止のために、ドロップを禁止にする方法です。 CKEditorのconfigに下記を追加します...

bxSliderでスライドが1枚しかない場合にスライドショーを無効にする方法です。 スライダーを実行する前にスライドの数をチェックし、1枚しかない場合にはbxSliderの初期化をスキップすることで、1枚のみの場合に、スライダーを無効にできます。 【HTMLの構...

色々な使い方ができる slick 、とても便利でよく使わせてもらっています。 slickのオプションの「responsive」ですが、何故か設定が効かない状況がありましたので、備忘録です。 下記のように対応することで、正常に動作するようになりました。 【変更前の...

親タグにCSSを指定、追加する場合は、jQueryを使えば、簡単に対応できます。 例えば、あるボタンの親要素ごと非表示にしたい場合は、下記のように記載します。 サンプルHTML [crayon-6840b8c4538c0655991969/] jQuery [crayon-6840b8c4538c8140505193/] 【...

jQueryプラグイン「Colorbox」をレスポンシブ対応するための方法です。 「Colorbox」は、記事中の画像を簡単にポップアップ表示させることができる、モーダルウインドウプラグインです。 [crayon-6840b8c453b3c267635562/] 上記のように、「 maxWidth」「 ...

CKEditorで、スタイル無しの<span>タグを手入力しても消えてしまうようでした。 <span>タグ自体は、文字のサイズなどのスタイルを変更すると自動で入るのですが、スタイルなしの状態の<span>のみでしたら、入力しても消えてしまいます。...

「 iziModal 」はとてもお洒落なモーダルウィンドウを実装できるjQueryプラグインです。 グループ化した時にナビゲーション（矢印）を表示できるのですが、クリックした時に、線が出てしまいます。 フォーカスした際に出る線ですので、CSSでこれを無効にす...

bxsliderがPCビューでは動作するのですが、スマホビューでだけ動作せず、少し時間を取られてしまったのでメモです。 リセットで、全ての要素に　max-width:100%;　を設定してしまっていました。これを削除したら、動作しました。 [crayon-6840b8c4541d9523...