THE HAM MEDIA BLOG

Google Map Apiを試してみた(ついでにjQueryのプラグイン化)

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
google
map

Google Map APIを使ってみた

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

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

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

続きを読む

透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
plugin
rollover
opacity

opacity rollover

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

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

※追記(09/07/24)
若干修正し、2.1にバージョンアップしました。
(今までのでも問題なく動作します。)
続きを読む

jQuery自作:シンプルカウントダウンタイマー

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
plugin
Timer

jQuery自作:シンプルタイマー

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

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

続きを読む

jQuery自作:簡単な指定だけでテキストを画像と入れ替え(画像置換)ができる”jQuery ReplaceImg Plugin”

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
plugin
プラグイン
画像置換

画像置換が簡単にできるプラグイン

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

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

続きを読む »

jQuery:何度も画像の読み込みをしないロールオーバー

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
プラグイン
plugin

何度も画像の読み込みをしないロールオーバー

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

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

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

続きを読む »

jQuery自作:”jQuery SameHeight Plugin”を使いたいセレクタを指定して使えるようにした

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
Height

jQuery SameHeight Plugin

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

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

続きを読む »

jQuery自作:カラム落ちも防止できる!幅の違うブロックを同じ幅にする”jQuery SameWidth Plugin”

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
width
plugin
プラグイン

幅の違うブロックを同じ幅にする”jQuery SameWidth Plugin”

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

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

続きを読む »

jQuery自作:高さの違うブロックを同じ高さにするプラグイン”jQuery SameHeight Plugin”

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
sameHeight
plugin
プラグイン

高さの違うブロックを同じ高さにするプラグイン”jQuery SameHeight Plugin”

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

続きを読む »

jQuery自作:スタイルシートを切り替えるプラグイン

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
CSS

スタイルシートを切り替えるプラグインを作ってみた

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

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

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

続きを読む »

jQuery自作:半透明のレイヤーで覆われるプラグイン

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
プラグイン
javascript
自作

半透明のレイヤーで覆われるプラグイン

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

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

続きを読む »

jQuery:ロールオーバー画像をクリックで固定させる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
画像

ロールオーバー画像をクリックで固定させる

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

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

続きを読む »

jQuery:マウスオーバーやクリックで背景画像を入れ替えてみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
javascript
jquery
背景

jQuery:マウスオーバーやクリックで背景画像を入れ替えてみる

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

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

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

続きを読む »

jQuery勉強メモ:画像や文字の透明度を利用したロールオーバーをプラグイン化してみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
ロールオーバー
透明度
opacity

画像や文字の透明度を利用したロールオーバー

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

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

続きを読む »

jQueryを使ってマウスホバー時に開閉して中のリストが出現するナビゲーションを作ってみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
ナビゲーション

マウスホバー時に開閉して中のリストが出現するナビゲーション

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

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

続きを読む »

jQueryを使ってアコーディオンの様な開閉できるスクリプトを作ってみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
Javacript
開閉

jQueryを使った開閉スクリプト

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

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

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

続きを読む »

トップに戻る