THE HAM MEDIA BLOG

先日、Google Mapを利用する機会があったのですが、最初は単に地図があればいいということだけだったようなので、Google MapのAPIとかを利用せずに、地図の右上にあるリンクの作成ででてくるiflameを表示させようと思っていた。

しかし、APIの利用方法ってどうだったかなー？なんて思ったので、以前利用したことがあったのですが、再度調べてみることに。

今はバージョンが３も出ているのですが、それは利用したことがなかったので、それの利用方法メモです。

以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。

今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。

ちょっとしたカウントダウンのタイマーが必要になったので、簡単に作ってプラグインにしてみた。

かなりシンプルに、ただ単純にカウントダウンしていくだけ。

「画像置換が簡単にできないかなー」
なんて言われたことが過去にあったのを思い出した。
CSSでの設定を覚えたら簡単にできるのですが、
それよりも簡単に使えないかなーと考えていたら、
「あ、プラグインでいいじゃん！」
なんていいのか良くわからないまま昨日から構想はじめて、さっきようやく完成した。
いろいろなテストとか実験しながら作ったら時間かかった（汗）
でも作りというかスクリプトはものすごく簡単だったりする。

このプラグインを使えば、画像置換を簡単に行えると思う。
出来云々はおいといて、とりあえず紹介！

jQueryのロールオーバーもたくさん出ていますが、
多くで使われているのは、画像のsrcを変化させるものだと思います。
例えばyuga.jsでのロールオーバーもsrcを変化させるものだ。

僕もそのスクリプトをを今まで使っていたが、
それだとIE6などでは何度も画像をダウンロードしにいってしまう。
また、場合によっては他のブラウザでもちらつきなどが起きる場合もある。

特に問題はないのだけど、気になる人もいるという話を聞いて、
ちらつきが起きなかったり、何度も読みに行かないようにするスクリプトを
考えて作ってみることにした。

先日作った「jQuery SameHeight Plugin」
今まではclassにsameHeightをつけなければ使用できませんでしたが、
ブクマコメントに、「$('hoge')sameHeight();みたいに使いたい」
というのが書いてあったので、対応してみました。

今までどおり、class="sameHeight"に対応はもちろん、
ユーザー指定のセレクタにも対応するようにしました。

先日高さの違うブロックを同じ高さにするプラグインを作りましたが、
（高さの違うブロックを同じ高さにするプラグイン”jQuery SameHeight Plugin”）
それの横幅バージョンを作ってみました。

また、カラム落ちを防ぐ機能もついているので、
横幅が揃っている場合でも使えるものになるのではないかと思います。

高さの違うブロックを同じ高さにする方法は既に沢山でているのですが、
jQueryでできないかなって考えてみて、作ってみた。
これを使えば、内容量によってブロックの高さが変わっても、
自動的に揃えることができます。

先日jQueryの実験をして、
head部分にもアクセスできることがわかったので、
CSSを切り替えられるようなものを作ってみた。

部分的なCSSの変更であれば、
jQueryのCSSで変更するほうが簡単だけど、
たくさんの量のCSSを変更するような場合は
あらかじめCSSを書いておいて、
それに切り替えるようするほうが楽。

なので、簡易的に切り替えられるものを作ってみた。

前回のエントリーで画面にレイヤーなどが表示されるような
jQueryのプラグインを試して紹介したが、
今回はそれっぽいものを自分で作ってみることにした。

Lightboxにしろムーダルボックスにしろ、
半透明のレイヤーで画面が覆われるスクリプトが多々あって、
どうやって作るんだ？なんて思っていたけど、
画面全体を覆うレイヤーがあればいいのか！
なんて思ってみたので、実験してみることにした。

jQueryを使うとロールオーバーとかも楽に設定できるし、
先日のように、クリックで背景を変更することも可能だ。

今日はロールオーバー部分でクリックしたとき、
クリックした部分の画像は、ロールオーバー時のままにしておきたい、
そのままの状態にしておくようにするスクリプトにしてみた。

jQueryを使って、マウスオーバーやクリックをしたときに、
背景画像を変更するという案件が入りそうだったので、
実験的に作ってみました。

マウスオーバーしたときや、クリックした時に、
背景の画像が変わります。

jQueryを使えば基本的な事だけでできることです。

昨日のプラグインの記述方法を利用して、
自分がよく使う機能をプラグイン化してみた。

今回のは、以前にも紹介した、透明度を利用したロールオーバー。
時々利用するのでプラグインの記述方法で書き直してみた。

なんとなく、今回の案件で使っているのを載せておきます。

ちょっとばかり、動作に不満はあるのですが、
とりあえずサンプルを載せておきます。

先日、同じ業界で働こうとしている友人に、
Q&A部分をクリックで開閉できるようにしたい。
と言われたので、作ろうとしたけどなんだかうまくいかなかった。

classとかidとかで名前を付けなくても、
動作するような開閉プログラムができないかなってことで数日悩んでみた。

悩んだ結果、うまく動作するのができたので紹介しておく。