背景の明度を自動的に判別し、要素の色を最適化してくれるスクリプト「backgroundcheck」を紹介します。
Category Archives: Javascript
positionのabsolute指定で親要素の高さが潰れてしまったときの対処法。
positionを多用してレイアウトしていると親BOXの高さが潰れてしまうことがよくありますね。デザイン上問題なければそのまま放ったらかしにしてもよいのですが、CSSなどで親要素を装飾したい場合はしっかり高さを復活させてあげましょう。
jQuery 簡単にGoogle Mapsを設置できるプラグイン
ホームページにGoogle Mapsを表示させるのはそんなに難しくないですが、マーカーを表示させたり、マーカーのアイコンを変更したりなどのちょっとしたカスタマイズは少し面倒ですよね。その面倒を軽減してくれるjQueryのプラグインを見つけたので紹介します。Google Mapsを表示させるプラグインはgmap.jsも人気ですが、こちらも使いやすそうです。
「jquery.googlemap.js」で簡単にGoogle Mapsを表示させる方法
使い方は非常に簡単です。まず、こちらからファイルがダウンロードしましょう。
head内にjqueryとプラグインファイル、GoogleMap APIを読み込むコードを記入します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://www.google.fr/jsapi"></script> <script type="text/javascript"> google.load("maps", "3.4", { other_params: "sensor=false&language=ja" }); </script> <script type="text/javascript" src="jquery.googlemap.js"></script>
次にbody内のGoogleMapを表示させたいところにブロック要素を作ります。(*cssで width と height を指定する必要があります。)
<div id="map" style="width: 300px; height: 300px;"></div>
あとは そのブロック要素を指定してJavascript を少し記入するだけです。
$(function() { $("#map").googleMap(); })
ただし、なぜかデフォルトでフランスのパリが中心に表示されますので、オプションで場所を指定してあげます。記入方法は次の通りです。
$(function() { $("#map").googleMap({ zoom: 13, // ここの数字で倍率を調整できます! coords: [35.690346,139.700603], // ここの数値で中心地を指定できます。 }); })
東京都新宿駅を中心にしてみました。この座標を求める数値は、こちらのページで簡単に調べられます。
住所にマークをつけたい場合は、addMarker()を使います。例えば新宿駅にマークをつけたい場合。
$(function() { $("#map").googleMap(); $("#map").addMarker({ coords: [35.690346,139.700603], // ここにマークを置きたい場所の経度、緯度を指定します。 }); })
これで簡単にマーカーつきのgooglemapを表示させる事が出来ました。
次にマーカーをオリジナルの画像に変えてみます。先ほどのコードに一行追加するだけです。
$(function() { $("#map").googleMap(); $("#map").addMarker({ coords: [35.690346,139.700603], // ここにマークを置きたい場所の経度、緯度を指定します。 icon: 'koko.png', // 画像へのパスを記入します!, }); })
こんな風に文字を入れる事も出来ます。簡単ですね。
ひとつ残念な点で、マーカーを指定した場合、倍率の指定が出来ないようです。
jQueryで要素をランダムにフェードインで表示させる方法
画像表示をフェードインさせることで、そのWebサイトの印象はがらりと大きく変わります。ここでは、実装が簡単で使う機会が多そうな、「champagne.js」を紹介します。リストの要素等をランダムな順番でフェードイン表示をさせる事が出来ます。インパクトのあるサイト作りに活躍しそうです。
カラムの高さをjQueryを使って簡単に揃える方法
複数のカラムでレイアウトを配置するとき、それぞれのカラムの高さを揃えるのって以外と難しかったりします。特にdiv要素を使ったブロック要素の場合です。
例えば、簡単な2カラムのサイトレイアウトでも、サイドバーの高さとメインコンテンツの高さを揃えたいけどどうすればいいの?ということがありますよね。
カラム(ブロック要素)の高さを揃える方法としてはCSSで揃える方法、jQueryのプラグインを使う方法、他にもたくさんあります。
ここでは、私が見つけたなかで一番簡単な方法を紹介します。