JavaScript - attr()

フォームの内容を元に任意のUIに遷移

Result See the Pen CSS Grid: Form to Badge by kachibito (@kachibito) on CodePen. フォームの内容から別のUIに遷移する、みたいなの ...

見出しを固定してスクロール分の割合を%とプログレスバーで明示

Result jQuery 見出しの固定はJSではなくCSSのposition: sticky;が使われています html via Sticky Title/Page Progress Bar

表示されている画像を任意の画像に変更する

Result 画像をクリックすると別の任意の画像を選択出来るようになります。 jQuery html via jquery-imgedit
Ads

緯度経度を指定したテキストにマウスを乗せるとGoogleMapも動くようにする

Result マウスホバーでGoogle Mapが動的に移動する、みたいなの。リストには予めカスタムデータ属性で緯度経度を設定してあります。 Google map APIも読み込みます。 jQuery css ...

HTMLをCanvasにして画像としてダウンロードできるようにする

Result See the Pen beGPjj by kachibito (@kachibito) on CodePen. スニペットとは言えませんが・・w html2canvasとjQueryを使ってCanvas化、ダウンロ...

Youtubeの動画再生後に関連動画を表示させない

Result 埋め込みコードにいちいちrel=0パラメーターを加えるのは面倒なので関連動画が自動でOffになるようにする。他のパラメーターも同じ方法で挿入できますね。 jQuery html 埋め込みコードはそのまま...

ページ内の見出しに合わせて目次を自動生成する

input要素にフォーカスするとツールチップが出るようにする

マウスホバーでYoutube動画のサムネイルを連続表示させる

パスワードの表示/非表示をチェックボックスでスイッチできるようにする

クリックまたは数字キーを押したらそれに応じたコンテンツが表示される

要素にID名を加える

画像の拡大鏡を実装するやつ

チェックしたチェックボックスの背景の色を変更する

ラジオボタンでテーブルの内容をフィルタリングする

任意のカラーで画像にマスクをかけ、マウスホバーでフェードアウトさせる

指定された画像が存在しないときに別の画像に置換する

何も存在しない箇所にURL指定付きiframe要素をノードとして追加する

エフェクトなしのシンプルなリストのフィルタリング機能

横並びのタブメニュー

チェックボックスにチェックが入っていないと送信出来ないようにする

リンクに自動でファビコンを付ける

Ads