カテゴリー:Javascript小技

リスト表示へ

デバッグ用CSSをその場で書けるブックマークレットを作ってみた

2010年8月17日 23:23

とにかくその場で追加したいんです

最近あまりに忙殺されているえどです。こんにちわ。
いやほんと、平日なにもする時間がありません。なので、手短に書きたいと思いますw

普段制作をしていると、その場でさっと CSS をとりあえず追加してみて、動きがどうなるか見てみたいな、と思うことはありませんか?
それが IE6 ならなおさら。しかも保存した CSS がサーバに反映されるまで多少のタイムラグがあった日には反映されたのを見るまでなにもできません。(もちろん、ローカルのファイルを参照させて開発する、なんてこともできますが、とにかくちょっと今ここで! っていうのってなにげにあるんですよね)

んで、新しい PC になって特にそう思うことがよくあったので、それならいっそ、とブックマークレットを作ってみました。
作りが違うんで、IE 用とそれ以外のブラウザ用で分けてます。

作ってみたブックマークレット

そして下のやつがその作ってみたブックマークレットです。

CSSを手軽に追加するブックマークレット(IE6対応) - jsdo.it - share JavaScript, HTML5 and CSS

使い方

使い方は簡単です。
コーディングをしているときなどに、ちょっとこのスタイルを追加したい、というときに実行します。
すると右上に入力ボックスが出てくるので、あとはそこに普段通りに CSS を書くだけです。
table td {...}みたいに継承関係も含めて記述可能です。もちろん複数のセレクタやプロパティを書いても大丈夫です。

Firebug では、その要素自体にスタイルを追加する、みたいなことはできますが、継承関係を持ったスタイルを追加したり、class 自体にスタイルが割り当てられてない場合に、class そのものにスタイルを追加できない、という物足りなさがありました。

そういう不便さもあったので作ったものです。よかったら使ってみてください。

iPhoneでページ最下部へ移動するブックマークレット

2009年9月11日 12:23

iPhone のステータスバーをタップするとページ上部に移動するのは元々用意されているのですが、最下部へ行く方法がありません。(もしなにかやる方法があったら教えてください(;´д`))

なので、ちょっとめんどくさいですが自作のブックマークレットを活用しています。
twitter でそんなことが投稿されていたので、もしかしたら誰かの役に立つかなーと思ったので記事にしてみました。
ずばり、以下のスクリプトをブックマークして、それを最下部に移動したいページでブックマークから実行すると、ページの最下部に移動します。

iPhone からのブックマーク登録用リンク

上記のリンクを、iPhone でブックマークして使ってください。

標準準拠モード・後方互換モードを判定するブックマークレットを作ってみた。

2009年3月26日 15:09

ちょっと色々あって、後方互換モードのせいでハマって 1 時間あまり無駄にしたので、それを無駄にしないためにも記事を書いてみたり。

内容はタイトル通りで、モードで苦戦したので、修正しようとしているサイトがそもそもなんのモードで動いているのかを判定するブックマークレットを作ってみた。下のリンクをブックマーク(お気に入り)に入れて、色んなところで使ってみてください。

ちなみに補足ですが、document.compatModeで取得できる値は、標準準拠モードがCSS1Compat、後方互換モードがBackCompatです。

モード判定のブックマークレット

テキストボックスのデフォルト値を表示・非表示するJavascript

2009年2月23日 18:11

今回はちょっとした Tips というか、こんな風にできたの?(と自分で思った)っていうのを書いてみたいと思います。最近、ますます CSS から遠ざかってる気がする

今回のサンプルを使うタイミングとしては、検索のテキストボックスなどにあらかじめ「検索キーワードを入力」のようにサンプルなんかを表示しておき、テキストボックスがフォーカスされたらその文字を消す、というようなもの。n

トグルテキストボックスデモ

HTML ソース

え、こんな書き方できるの?! と思いませんでしょうか。
自分は思いましたw
大抵の場合、onclick="chek();"などのように実行する関数を設定するだけだと思います。(場合によってはreturnをつけたり、複数関数を設定したりはありますが)n

しかしこのonで始まるイベントハンドラ内には script タグで記述するように自由に改行を含めることができます。
言ってみれば、script タグ内に書けることはすべて書ける、ということです。n

さて、今回の肝となるのは改行ではありません。
(実際、見やすさを無視すれば全部 1 行で書くことができます)
肝となるのは、onfocus内(その他にも onclick など他のものも同様です)で onfocusを上書きしているところ。n

最初の onfocus の実行時に、自身の_defaultValueに元々設定されている valueを保存します。
(この _defaultValue は任意の変数です。DOM はオブジェクトなので自由に変数を追加することができます)n

続いて自身のvalueを空白に設定したのち、onbluronfocusにそれぞれ関数を設定しています。
こうすることで、2 回目以降の onfocus 時には最初の 2 行は実行されなくなります。n

処理内容としては、フォーカスが外れたときにもし空白なら初期のテキストを表示しなおし、フォーカスが当たったときにもし初期値の場合はまた空白に戻す、という処理を行っています。n

これを利用することの利点としては、現在のテキストボックスの値がどうなのかを識別するためのフラグ用の変数や、デフォルトの値を保持しておく変数を用意する必要がなく、またデフォルトのテキストがなんであっても確実に "デフォルトの値かどうか" を識別することができます。n

ちなみに、上記のものを関数かすると以下のような感じで書くことができます。n

Javascript関数サンプルソース

Input 要素への適用

イージングを簡単に実装するJavascriptライブラリ

2009年1月26日 00:19

イージングイメージ

更新履歴

2009/01/29
スムーススクロールの内容がもれていたため追記しました。
また、"easing-effect.js" 内のスムーススクロール関数を x 座標、y 座標両方を指定できるよう修正しました。

前々から、イージング(徐々に速くなったり遅くなったりする機能)の処理だけをしてくれるライブラリみたいのないかなぁと思っていました。
が、なかなか見つからず、勉強の意味も含めて自作してみました。

イージング自体は こちら を参考にしました。
さらに、jQuery の構造を参考にしながら、メソッドチェーンの仕組みを取り入れてみました。

また、jQuery 的なプラグイン作成も可能になっているので、独自の関数を定義することもできます。
それ以外にも、処理をストップさせたり、途中で設定を変更するなどのイージングの処理を制御するための関数がいくつか用意されています。

設定方法や、使い方などの詳細はデモページに一覧で書いてあるのでそちらをご覧ください。

イージングライブラリデモ

コンテンツ全体の高さを取得するJavascript

2009年1月 5日 12:05

さて、またしてもJavascriptなネタです(;´Д`)
というか、今回は備忘録的に書いてます。

あまり、コンテンツ(ブラウザ全体の、表示領域外の部分も含む)の高さを取得するサンプルがわりと少なかったので自作して備忘録としてアップしました。

Javascriptソース

表示領域以外の高さを取得するには「body(documentElement).scrollHeight」を使います。
ただこれは、表示領域よりコンテンツの高さが高くないと数値が少なくなってしまうため、表示領域の高さを取得する「body(documentElement).clientHeight」と比較して大きい方を採用しています。

さらに、互換モードや準拠モードで取得できる値が違うため、bodyとdocumentElement(html要素)のふたつの値をそれぞれ比較して、一番大きい値を採用しています。

そのため、「body」と「documentElement」のふたつの要素と、さらに「clientHeight」と「scrollHeight」のふたつ、合計4つの値を比較して、一番大きいものがコンテンツ(および表示領域)の最大サイズ、となるわけです。

フローティングポップアップウィンドウを簡単に実装するJavascript

2008年12月31日 01:20

更新履歴

[10/04/10]
リサイズ可能なウィンドウを表示した場合に、縮小すると再現なく小さくなってしまう問題を修正しました。
これに伴って、versionを1.8.1に変更しています。
[09/10/08]
yasuさんのご指摘で、IE6 でウィンドウ縮小時に白い余白が残ってしまう問題を修正しました。
これに伴って、version が 1.8 に変更されています。
[09/09/04]
prototype.js などの、$関数を使うライブラリと競合しないよう修正しました。
これに伴い、version が 1.7 に変更されています。
[09/04/21]
IE6 で、ウィンドウが select 要素の下に潜り込んでしまう問題を修正しました。
これに伴い、version が 1.6 に変更されています。リサイズ部分の処理にエラーがあったため、それを修正しました。ver1.6 をダウンロードされた方で、リサイズがうまく動かないって人はもう一度ダウンロードし直してください(;´Д`)
[09/03/31]
少し前の version のファイルに指し換わってしまっていたため、最新のものをアップしなおしました。
Opera や IE7 での iframe の表示がおかしい場合は新しいものをダウンロードしなおしてみてください。
[09/02/12]
JS 本体について、zip 内に圧縮したものと通常のもの(_src がついたもの)がありますが、圧縮したほうについては、ある環境では IE で表示位置がずれるという不具合がありました。通常のものを使用した場合は問題が出ていませんので、もしそういった問題が発生した場合は "_src" が付いているほうの JS ファイルを利用してみてください。
[09/01/02]
Opera,IE7 で iframe の高さが正常に表示されない不具合を修正。

フローティングポップアップウィンドウを表示するスクリプトを作ってみました。
「はい」や「いいえ」などを押したときに色々と処理をさせたかったので自作しました。
JavaScriptのalert関数を使うとどうしても味気ないものになってしまうので、
デザインされた alert や confirm を使いたい場合に使ってみてください。

また、表示できる内容はテキスト、DOM ノード、iframe、画像となっています。
最大化・最小化ボタンをつけたり、閉じるボタンを非表示にしたり、
また、複数のウィンドウを開かせないようにモーダルとしてウィンドウを開くこともできます。

そしてこれらの機能はすべて、同時に設定することができます。
設定できるパラメータについては以下に一覧表示しています。

フローティングポップアップウィンドウ デモ

外部Javascriptのsrc属性で、URL引数を取得する

2008年12月 2日 13:05

http://script.aculo.us/ のJS ライブラリを使ったことがある人なら知っていると思うけど、この JS ライブラリ、読み込む際の src 属性の最後に?load=effectsなどとして読み込むエフェクトの種類を指定できる。n

便利だなーと思いつつ、どうやってこれを実現してるんだろう? と疑問に思っていた。
そして、色々自分で JavaScript を自作していると、読み込ませる時点であらかじめ決められたパラメータを読み込ませたいな、という欲求が出てきた。n

そこで、色々調べているうちにやっと解答が見つかった。
結論から言うと、読み込まれている script タグの要素をすべて取得し、自分自身の src を見つけ出し、さらにそこから?load=effectなどのパラメータを取り出し処理する、というもの。n

一見めんどくさいけど、script タグの src 属性にパラメータを設定できるので、JS ファイルを読み込んだあとにさらに初期化用関数なんかを実行させる手間を考えると、1 行の src 属性だけで完結できるのでとても便利だ。n

ということで、読み込むための関数を作ってみたので公開したいと思う。n

iframe内の高さを取得し、内容に合わせて高さを変更するJavascript

2008年12月 1日 13:16

更新履歴

[09/06/10]
ブラウザによっては iframe の縮小ができなかった問題を修正しました。

仕事でちょっとタイトル通りのことをする必要が生じたので、それを簡単に実装する JavaScript を作ってみた。

簡単に内容を説明すると、
iframeElement.contentWindow.document.body.scrollHeight
iframeElementiframeオブジェクト)
というプロパティでiframe内のbody要素の高さを取得します。
これ以外にも offsetHeight とか clientHeight なんかでもほぼ同様の値を取得できるが、IE6 ではこのプロパティだけしか高さを取得できなかったのでこれを使ってます。

ver2.0 では主にiframeElement.contentWindow.document.documentElement.offsetHeightを使うように仕様変更しています。

そして、その取得した数値を iframe 自身の高さに設定してやる、というだけのものです。
いちおう簡単に実装、を目的としたので作った JS ファイルとそれの使い方も解説しておきます。

このスクリプトによる高さの取得は、同一ドメインのページを表示する際だけに使用できます。別ドメインのページを iframe で表示した際は、ページの DOM に対してスクリプトがアクセスできないため、高さの取得はできません。

iframe内の高さを取得し内容に合わせて高さを変更するJavascript デモ

aタグのonclickを使うときの落とし穴(IE6)

2008年11月14日 19:09

今回、偶然遭遇した IE6 のバグ(?)をメモしておきます。
現象は、img 要素でマークアップした画像のボタンに a 要素の onclick なんかで処理をさせる場合のもの。n

今回、form の外から submit() を実行する必要があったので、onclick に関数を設定し、その関数内で処理を行ったあと、form の submit() を実行させたのですが・・。
なんでか、IE6 だけどうしても動かない。なにをしても動かない。
原因はよくわからないが、onclickに設定した関数のあとにreturn falseを追加したらうまく動いた。n

【推測】

社内で協議の結果、a 要素自身の動作と onclick で設定した submit() の処理がぶつかっているのでは? ということに。
その証拠になるかは分からないけど、submit 処理をたとえば

1  2  3