HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

jQuery UIのDatepickerを実装したのですが、「本日の日付」をセットする「Today」ボタンが効きません。
少し調べてみると、本件についてはさまざまな記事を見つけることができるのですが、どうやらデフォルトのバグのようです。

今回、発生したのは以下の環境です。

  • jQuery 3.2.1
  • jQuery UI 1.12.1

例えばオフィシャルのサンプルに倣って、以下のように「Today」ボタンと「Done」ボタンを表示する設定であるオプション「showButtonPanel」をセットして、Datepickerを構築します。

$("#datepicker").datepicker({
	showButtonPanel: true
});

Datepicker

そうすると上図のように両ボタンは表示されますが、なぜか「Today」ボタンが機能せず、押すことができません。

オフィシャルのサンプルページでも確認してみましたが、同様に機能していないようです。
Datepicker | jQuery UI

HTMLのテキストフォームを構築する際に、excelのオートコンプリート機能のような、入力補完をしてくれるしくみをHTML5で実装します。

過去にこのような機能をを実装するのに、苦労してJavaScriptで無理やり実現した記憶があります。
しかし、最近、同様の機能を実装しなければならなくて改めて調べてみると、HTML5のみで実装できるようになっているんですね。こりゃ楽だ。

では、実際のコードですが、以下のように記述すると、オートコンプリート機能が有効になります。
例えば、input textタグに「list」要素に任意の「example1」を付加すると、同名のIDを指定した「datalist」タグのoption要素が入力候補としてセットされます。

jQueryで数字がカウントアップ、または、カウントダウンするアニメーションを実装します。

ショッピングサイトや保険見積もりサイトなどで、商品やオプションを選択すると、合計金額がカウントするアニメーションをよく見かけます。
今回、それを実装する機会があったので、ここにメモとして残しておきます。

例えば、以下のHTMLの金額の数字部分をカウントするとします。

<div id="price">
<span>0</span> 円
</div>

0から1000へアニメーションを実行するJavaScriptコードは以下のとおりです。

$({count: 0}).animate({count: 1000}, {
	duration: 1000,
	easing: 'linear',
	progress: function() { 
	    $('#price span').text(Math.ceil(this.count)); 
	}
});

JavaScriptを使わずCSSのみでフォームのSELECTタグを装飾する方法です。

以前に、jQueryのプラグインを利用してSELECTタグを装飾する方法を紹介しました。
フォームセレクトを装飾するjQueryベースプラグイン「customSelect」

それまでは、フォームのCSSのみでの装飾は困難だったので、スクリプトを利用する必要がありました。
しかし、最近ではモダンブラウザのCSS3対応が進み、現在ではほとんどの環境で、スタイルのみで好みのデザインへ変更することができるようになりました。

これがデフォルトのフォームSELETタグの表示です。

Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要:スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目があります。
レンダリング中にJavaScriptを読み込むことで、画面表示に遅延が生じているという警告のようです。
(CSSについては別途考えます)

そこで、HTML5から追加された属性「async」と「defer」を使って、スクリプトの読み込みを非同期にし、画面表示の高速化を図ってみたいと思います。

概要

HTMLのソースは上から順に解析されます。
ソース上部に大量のJavaScriptを読み込んだ場合、その読み込みに時間がかかる分だけ画面の表示が遅くなります。

少し前までは、JavaScriptはhead部分ではなく、bodyの閉じタグの直前で読み込むことが奨励されていました。
読み込み順を変更することで、レンダリングへの影響を抑えようということですが、この方法では結局、トータルの読み込み時間としては改善していないんですね。

jQueryプラグイン「RWD Image Maps」を利用すれば、簡単にイメージマップリンクをレスポンシブ対応させることができます。

例えば、以下のように100×100のサイズの画像「sample.jpg」に対してイメージマップを用意します。

<img src="sample.jpg" usemap="#sample" alt="サンプル" >
<map name="sample">
<area href="sample1.html" shape="rect" alt="四角形のリンク" coords="10,10,30,30">
<area href="sample2.html" shape="circle" alt="円形のリンク" coords="50,50,10">
<area href="sample3.html" shape="poly" alt="多角形のリンク" coords="60,60,80,80,70,90">
</map>

画像に対して、四角形のリンク、円形のリンク、多角形のリンクの3つのエリアを設定しています。
通常だと、これをレスポンシブ対応のサイトに設置し、画面の大きさに応じて画像サイズを拡縮した場合、イメージマップのリンクエリアがズレてしまいます。

このような場合に、以下のプラグインを導入することで、簡単にイメージマップをレスポンシブ対応することができます。

GitHub – stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin

5年ほど前に以下の記事を書きました。
jQueryプラグイン「jquery.cookie.js」でお手軽にクッキーを操作する
久しぶりに公式サイトをのぞいてみるとjQueryを使わない、JavaScriptのプラグインとして開発が移っていたようです。

js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

改めて、便利な使い方を確認したいと思います。

導入方法

導入方法はとても簡単です。
上記サイトから「js.cookie.js」をダウンロードして読み込みます。

<script type="text/javascript" src="/js/js.cookie.js"></script>

cookieの操作だけが目的の場合に、jQueryを読み込まなくてもよいので容量が軽くて済みます。また、jQueryのバージョンなどベースライブラリの依存も考慮する必要もなくなりました。

画像サイズを変更せずにCSSのborderで画像の枠を装飾するテクニックです。

リンク画像にマウスオーバーでborderをつけることがよくありますが、
リンクエリアのサイズを変えずに、かつ、画像サイズを変えずに、となると少しテクニックが必要です。

例えば以下のような例です。
マウスオーバーで10pxの太さの赤いborderを表示させていますが、カクっとサイズが変わる感じが嫌ですね。

てんとう虫
※分かりやすくするために極端な太さを例にしています。

単純にaタグにボーダーを追加してしまうと、その分だけリンクエリアが広がってしまいます。
てんとう虫

そこで、以下のようにCSSを用意してあげれば、borderを追加してもリンクエリアのサイズは変わりません。

JavaScriptやjQueryでクリックイベントを設置した際に、そのイベントを子要素、孫要素へ伝播させないための処理を紹介します。

よくあるケースとして、ライトボックスのようなしくみを構築したときを考えます。
ブラウザの画面全体をグレーアウトして、その上のレイヤに画像、動画やフォームなどのコンテンツを配置します。

<div class="lightbox">
	<div class="grayout">
		<div class="contents">
画像、動画やフォームなどのコンテンツ
		</div>
	</div>
</div>

今回はjQueryで、グレーアウトしたエリアをクリックすると、ライトボックスをクローズするような処理を追加します。

$('.grayout').click(function(){
	$('.lightbox').fadeOut();
});

しかし、そのままではコンテンツエリア「class=”contents”」までイベントが伝播してしまい、コンテンツエリアをクリックしてもクローズしてしまいます。
そこで、コンテンツエリアをクリックしてもイベントが発生しないように以下の処理を追加します。

$('.contents').click(function(event){
	event.stopPropagation();
});

これで大丈夫です。
忘れてしまいがちなので、メモまで。

Googleマップストリートビューで表示可能な目的地近くの座標を取得する方法です。

ストリートビューを使ったことのある人はご存知と思いますが、ヒト型のマーカーをストリート上のブルーのラインの上にドラッグしてストリートビューを表示させます。
ストリートビューは全ての座標で表示可能ではありません。ブルーのラインの範囲にポジションを置かないと正しく表示されないのです。
つまり、APIで範囲外の座標位置を指定してしまうと、ストリートビューを表示できずにエラーになってしまいます。

APIを開発する上で、このエラーを避けるために「StreetViewService」の関数「getPanoramaByLocation」を利用することで、目的の近くのストリートビュー表示可能座標を取得することができます。

ストリートビュー表示可能ポイントを取得する

例えば、以下のような処理で考えてみます。

Monthly Archives

Search