JavaScript
-
自動ページ遷移をキャンセルする
10秒とかで勝手にページ遷移する仕掛けが施されたページにずっと留まりたい時は、素早くDevToolsを開いてonbeforeunloadイベントを仕掛けることで…
-
RippleボタンJSライブラリ
Google様のマテリアルデザインでよく見るあの波紋が広がるようなボタンクリックエフェクト「Ripple」Material.io > Ripple >…
-
<a> の href はパースされている
つい忘れてしまうことメモ。 <a> タグの href 属性にセットされた値はブラウザで自動的にパースされている。 その結果は JavaScript …
-
flatpickr 土日・祝日対応
flatpickr でもやってみた。 土日に色をつける 祝日も色をつける 土日祝は無効 明日以降のみ有効 ※jQuery使用 祝日データは Holidays J…
-
jQuery DateTimePicker 土日・祝日対応
jQueryプラグイン DateTimePicker で 土日に色をつける 祝日も色をつける 土日祝は無効 明日以降のみ有効 の実装例。 日時： 祝日データは …
-
【jQuery】色調補正トーンカーブを自作する
JavaScriptとCanvasで、Photoshopなどによくある「トーンカーブ」用の部品を自作してみた。トーンカーブとは次のようなものだが、 Photos…
-
タッチデバイスでhoverを無効化（:hoverセレクタ削除）
タッチデバイスの時は、CSSセレクタで「:hover」を持つルールを削除する。 ※:hoverと:hoverでないセレクタをカンマ区切りで複数ならべると、ぜんぶ…
-
JavaScriptで英数字とハイフンを全角から半角に変換する
-
bxSliderでクリックできない時
bxSlider は特に何もしないとスライド内に <a> を置いてもクリックできない（無視される）もよう。 v4.2.5 だとPCはクリックできない…
-
AWS Amplify (React) を Windows10 で始めるメモ
AWS Amplify JavaScript Get Started (React) https://aws-amplify.github.io/docs/js…
-
【jQuery】bodyのスクロールを止める（レスポンシブ）
モーダルやメニューなどをライトボックス風に画面全体にオーバーレイ表示した時、 裏になったコンテンツ（<body>全体）をスクロールできないよう固定し…
-
HTML5 Canvas 座標と画面ピクセルの関係
HTML5 Canvas の moveTo / lineTo でぴったり1ピクセルの水平線・垂直線を描く時、座標を 0.5 ずらさないとボヤける。 Canvas…
-
【jQuery】textareaの複数行プレースホルダー
<textarea>のプレースホルダーに、やたら長い改行あり文章を使いたくなってしまった時。 プレースホルダーを複数行にする方法はあるようだが、 t…
-
【jQuery】色相環カラーピッカーを自作する
ブラウザJavaScriptで動く色相環つきカラーピッカーが欲しい。 Farbtastic Color Picker という素晴らしい実装が公開されているので、…
-
スライダーのA要素ドラッグがクリックになってしまったら
bxSliderなどのスライダー用ライブラリで、スライド1つをA要素にして、スライドをクリックしたら別ページに飛ばしたい時。 動いた～★と思ったら、マウスでドラ…
-
静的ページとWPtouchのクッキー連携
あるHTML/CSS/JSで作った（静的ページな）Webサイトには、PC向け画面（横幅が広い）とスマホ向け画面（横幅が狭い）と２つのモードがあった。スマホ向け画…
-
【jQuery】画像ドラッグする時はdragstartをキャンセル
jQueryでドラッグ＆ドロップを実装する時、よくこういう書き方をするが、 $(‘xxx’).mousedown(function(ev){ // ドラッグ開始…
-
画像ロード完了を待つ
jQueryで<img>画像の幅と高さを取得して何か処理をする時、単純にこう書くと、 <img src=”img.jpg” width=300…
-
IE8以下でも半透明ボーダー (3)
Raphaël (SVG/VML)でも試してみたのでいちおう記録しておく。実用するのは 前回 の実装でよいと思うが。IE8での動作負荷も前回のやつの方が軽い気が…
-
IE8以下でも半透明ボーダー (2)
前回 の敗北からどれくらい経ったか・・・やはり俺ごときでは到底敵わぬ相手だったのか・・・俺の力はこの程度なのか・・・むっ、ひらめいた！！！ まず、目的の画像にま…