カテゴリ

JavaScript

JavaScript などに関すること

JavaScript 2分で読了
2009-11-02

facebox.jsを使用してIE6だとセレクトボックスが前面に出てしまう件の対処法

昨日、「Facebox 1.2 - LightBox風に角丸で画像をポップアップ」という記事に次のようなコメントをいただいたので、その対処法を考えてみました。 そんな中、もう一つだけ困ったことが出てきてしまいました。 絶対にプルダウンリストが必要な画面で使いたいのですが、 IE6のバグでプルダウンが前面に表示されてしまうのです...。 サンプルにプルダウンを付けてみました。(IE6のみ変なようです...

JavaScript 5分で読了
2008-12-08

jQuery を使って長いソースや文章をアコーディオンさせるサンプル

長いソースコードや文章を簡単にアコーディオンさせる jQuery のサンプルを作ってみました。 ブログを書いていて、長いソースコードが出てきた場合、それをそのまま pre 要素で掲載しちゃっていいものか迷うときがあります。ソースコードを見て理解したい人には親切だけど、使い方とかだけを見たい人には邪魔だろうなーと。そういったときに、とりあえず非表示にしておいて、見たい人はクリックしてアコーディオンし...

JavaScript 2分で読了
2008-12-05

jQuery でテキストエリア内の文字はどのメソッドで取得する？

「jQuery でテキストエリア内の文字はどのメソッドで取得する？」と、ちょっと疑問に思ったので実験した備忘録です。 jQuery では、指定した要素の中の文字列は「 .text() 」、指定した要素の中のHTML は「 .html() 」で取得できます。また、input 要素（ type="text" ）の value については「 .val() 」で取得できます。 さて、では textare...

JavaScript 5分で読了
2008-11-29

jQuery のセレクタを Firefox と Greasemonkey で練習する

最近、jQuery のセレクタをマスターするのに最適ということで「 Selectors 」というサイトが話題になっています。 実際にそのサイトを使ってみるとかなり良い感じで、ビジュアルで jQuery のセレクタが理解できるので本当に役立ちます。後は実践をこなして練習するのみですね。 さて、その「実践で練習する方法」ですが、ちょっとオススメなのが、 Firefox と Greasemonkey を...

JavaScript 2分で読了
2008-11-11

google-code-prettify + jQuery でソースコードをハイライトする

ソースコードをハイライト表示してくれる JavaScript ライブラリは数多くありますが、今回、このブログに google-code-prettify というライブラリを導入してみました。 少し前までは dp.SyntaxHighlighter（ソースコードをカラフルに読みやすくする - dp.SyntaxHighlighter ）を使っていましたが、どうもイマイチ好きになれなかったので使用を...

JavaScript 15分で読了
2008-11-10

jQuery でファイルをインクルードする （ jQuery によるモジュール化）

通常のスタティックな Web サイトにおいて、Web ページの中で更新頻度の高いパーツを別ファイルにして、それをインクルードするシーンは多々あるかと思います。 Movable Type でも、モジュールやウィジェットを「インデックステンプレートのコンテキストで全ページに表示させたい」なんてとき、インデックステンプレートに読み込み用のファイルを作って、それを MTInclude で読み込むという手法...

JavaScript 6分で読了
2008-11-02

記事投稿時間の横に Twitter みたいな「約～前」を表示する

Movable Type や WordPress の記事投稿時間の横に、Twitter のように、その記事を投稿したのが現在時刻から「約時間～前」というのを表示する JavaScript （ jQuery ）です。 経過時間を解析する仕組みは、「一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版」のカスタマイズのときとほぼ同様で、小粋空間さんのところで紹...

JavaScript 10分で読了
2008-09-25

一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版

小粋空間さんのところで紹介されている「新着エントリーのあるカテゴリーに New マークをつける」の jQuery 版を作ってみました。 このブログの「 Recent Entries 」（最近のブログ記事）のところにある星マーク（New マークのこと）がそれで（下図参照）、3日以内に作成されたブログ記事に表示されるようにしています。 このテクニックは、荒木さんご自身の著書『 Movable Type...

JavaScript 1分で読了
2008-05-17

ブラウザによる正規表現の改行文字の違い

ほとんどのJavaScriptの本で、正規表現で改行文字は「\n」であると解説されていますが、これがブラウザによっては「\n」だったり「\r\n」だったりします。 そこで、実際にどのブラウザがどうなのか調べてみました。 調べ方は単純で、このブログのエントリー投稿欄で、正規表現で「\n」を「n」に、「\r」を「r」に置換してみました。 その結果は次の通り。 Firefox ： \n IE6 ： ...

JavaScript 11分で読了
2008-05-16

Facebox 1.2 - LightBox風に角丸で画像をポップアップ

Facebox 1.2を導入してみました。 これまで、画像のポップアップ表示には yuga.js で使われていた「ThickBox 3.1」を使用していました。ThickBox 3.1 は非常に軽い動作で良いのですが、ブラウザの表示領域より大きい画像を表示させると、自動的に縮小されてしまいます。この自動縮小は基本的には便利なんだけど、画像に書かれている文字も読ませたいときなどはちょっと不便になっ...

JavaScript 2分で読了
2008-05-14

yuga.js 0.5.3 にアップデート

yuga.js を、0.5.1 から 0.5.3 にアップデートしました。 0.5.1 のファイルを少しだけ自分で変更していた部分があったので、一度「WinMerge 日本語版」で2つのファイルを比較して最新版を修正するという手間がかかってしまいました（物忘れが激しいので）。...

JavaScript 11分で読了
2008-04-20

yuga.js 0.5.1 を導入してみた

yuga.js 0.5.1 - 優雅なWeb制作のためのJavaScriptをこのブログで使ってみました。 これがどういった機能があるのか、また導入方法はyuga.js 0.4.2 - 優雅なWeb制作のためのJSとデモ（CSS HappyLife）で説明されています。ただし、こちらはyuga.js 0.4.2の説明なので、最新版の0.5.1はちょっとだけ変わっています。変更点と最新版のダウンロー...

本・雑誌 2分で読了
2008-04-16

WebクリエイティブのためのDOM Scripting - 感想

WebクリエイティブのためのDOM Scriptingを読みました。 これまでJavaScriptライブラリを手探りで使ってきましたが、jQueryやPrototypeなどのライブラリを、もっと理解して使えるようになりたいなと思い、JavaScriptの本を探していました。 探して見ると当然ですがJavaScriptの本はたくさんあるので、どの本がいいか非常に悩みましたが、次のような理由からこの...

JavaScript 7分で読了
2008-02-01

画像もHTMLもオーバーレイ表示 - ThickBox 3

2008-02-27 説明を詳しくしました。 画像やHTMLをオーバーレイで表示するAjaxライブラリ、ThickBox 3.1を導入しました。導入方法は【ハウツー】ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示（マイコミジャーナル）を見れば問題なく導入できると思いますが、ここでも素人なりに丁寧に手順を載せておきます。 まず簡単なサンプル作ったので見てやってください...

JavaScript 1分で読了
2007-10-23

JavaScriptとAJAXでページ上のマウスの動きを記録

実際にデモをやってみましたが、なかなかすごいです。全部のマウスの動き がそのまま再現されるわけではありませんが、大体の動きは分かるので、制作したサイトの情報設計がうまくいっているか確認するのに役立つかもしれません。Ajaxライブラリとして出たら便利なんですけどね。公開前のユーザーテストに使ったりとか。。。 それにしても、Ajaxはまだまだ色々なことができそうですね。 JavaScriptとAJAX...