JQueryプラグインなどJavascriptに関すること
CSS シンプルなスマホナビゲーションの実装サンプル【CSS+jQuery】
モバイル表示の際に表示するシンプルなスマホナビゲーション（ドロワーメニュー）の実装サンプルです。ハンバーガーアイコンをクリックすると、ドロワーメニューが表示されるナビゲーションです。アイコンクリック時は、×にマークに変化するアニメーションも...
Javascript／jQuery CKEditor4でColorButtonが有効にならない
CKEditor4はデフォルトでは、文字色と文字背景の選択ができないようです。そのため、colorbuttonのプラグインを追加する必要があります。プラグインダウンロードページ下記をconfig.jsに追記し、プラグインを有効にします。しか...
Javascript／jQuery CKEditor4で、エディター内へのドロップを禁止する
CKEditorで、ボタンなどをドラッグアンドドロップしてしまうと、意図しないコードが入り、コンテンツが表示されなくなったりなどの事故が発生することがあります。事故防止のために、ドロップを禁止にする方法です。CKEditorのconfigに...
Javascript／jQuery bxSliderでスライドが1枚しかない場合にスライドショーを無効にする
bxSliderでスライドが1枚しかない場合にスライドショーを無効にする方法です。スライダーを実行する前にスライドの数をチェックし、1枚しかない場合にはbxSliderの初期化をスキップすることで、1枚のみの場合に、スライダーを無効にできま...
Javascript／jQuery slickで「responsive」の設定が効かない
色々な使い方ができる slick 、とても便利でよく使わせてもらっています。slickのオプションの「responsive」ですが、何故か設定が効かない状況がありましたので、備忘録です。下記のように対応することで、正常に動作するようになりま...
CSS 親タグにCSSを追加・適用する
親タグにCSSを指定、追加する場合は、jQueryを使えば、簡単に対応できます。
例えば、あるボタンの親要素ごと非表示にしたい場合は、下記のように記載します。
サンプルHTML
jQuery
CSSのみで対応できるか？
ちなみに、CSS...
Javascript／jQuery jQueryプラグイン「Colorbox」をレスポンシブ化する
jQueryプラグイン「Colorbox」をレスポンシブ対応するための方法です。「Colorbox」は、記事中の画像を簡単にポップアップ表示させることができる、モーダルウインドウプラグインです。上記のように、「 maxWidth」「 max...
Javascript／jQuery CKEditorで、styleなしのspanタグを許可する
CKEditorで、スタイル無しの<span>タグを手入力しても消えてしまうようでした。
<span>タグ自体は、文字のサイズなどのスタイルを変更すると自動で入るのですが、スタイルなしの状態の<span>のみでしたら、入力しても消えてしまい...
Javascript／jQuery jQueryプラグイン iziModal の矢印をクリックした時の線を消す
「 iziModal 」はとてもお洒落なモーダルウィンドウを実装できるjQueryプラグインです。
グループ化した時にナビゲーション（矢印）を表示できるのですが、クリックした時に、線が出てしまいます。
フォーカスした際に出る線ですので、CS...
Javascript／jQuery jQueryプラグイン「bxslider」がスマホで動作しない場合の対処方
bxsliderがPCビューでは動作するのですが、スマホビューでだけ動作せず、少し時間を取られてしまったのでメモです。リセットで、全ての要素に max-width:100%; を設定してしまっていました。これを削除したら、動作しました。PC...