JavaScript - Archives

アップロードするファイルの名前、サイズ、コンテンツタイプを取得する

Result 選択したファイルの名前、サイズ、コンテンツタイプをリストにしてアップロード前に表示します。inputにmultiple入れてますので複数選択も可能です。 jQuery html via Stack O...

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

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

li要素をクリックでハイライトする

Result li要素をクリックでハイライトする。1つの情報が多いリストの可視性を高めたり等、他にも応用できそう。このままのコードだとネストされたリストは子要素も全てハイライトするので入れ子に対応するには少し工夫が必要になります。 ...
Ads

レスポンシブWebデザイン対応のメガメニュー

Result See the Pen megamenu.js - Last responsive megamenu you'll ever need by Mario Loncarek (@riogrande) on CodePen. ...

textareaで行ごとにナンバリングする

Result コード見せたいけどSyntax highlight使うほどじゃない時とかに。gistでいいんじゃ、と言われたらそれまでですが。 jQuery css html foobar hogehuga via...

inputやtextareaで、指定した文字数を超えた際に警告文を出す

Result maxlength属性は何かとアレなので文字数自体は制限せずに、予め設定した文字数を超過した際に警告文を出すようにする jQuery html via Maximum Characters lim...

文字列をリアルタイム検索してハイライトする

Result jQuery css html via Real-Time Search in JavaScript by Osvaldas Valutis.

テキストをツートンカラーにする

Result jQuery css html via Is it possible to apply CSS to half of a character?

普通のリストに任意の文字列と番号を加える・改正

「普通のリストに任意の文字列と番号を加える」のコードが、同じページ内で複数作ると上手く動作しない、と連絡を頂いたので改正版。 Result jQuery index()メソッドで取得したインデックス番号は0からなので1を足...

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

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

テーブル上にあるマウスの位置を表示させる

Result テーブル上のマウスの位置を表示する jQuery css html via

テーブル内で空の要素をハイライトさせる

Result 動的に作られたテーブル向けになりそうです。空の要素がある行を削除、みたいな応用もできそう。 jQuery css html via

簡易的なSyntax Highlighterを実装する

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

文章内のURLを自動リンク化する

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

Vimeoのサムネイルを取得する

リンク先をiframeを使い、Lightbox風に表示させる

モバイル時はタップ式、PCサイトではドロップダウンに切り替える

テキストを1文字ずつclass付きのspanで囲う

YoutubeのURLだけでその場で動画再生できるようにする

マウスを乗せると背景画像が動く

Ads