最近あまりに忙殺されているえどです。こんにちわ。
いやほんと、平日なにもする時間がありません。なので、手短に書きたいと思いますｗ
普段制作をしていると、その場でさっと CSS をとりあえず追加してみて、動きがどうなるか見てみたいな、と思うことはありませんか？
それが IE6 ならなおさら。しかも保存した CSS がサーバに反映されるまで多少のタイムラグがあった日には反映されたのを見るまでなにもできません。（もちろん、ローカルのファイルを参照させて開発する、なんてこともできますが、とにかくちょっと今ここで！ っていうのってなにげにあるんですよね）
んで、新しい PC になって特にそう思うことがよくあったので、それならいっそ、とブックマークレットを作ってみました。
作りが違うんで、IE 用とそれ以外のブラウザ用で分けてます。
そして下のやつがその作ってみたブックマークレットです。
CSSを手軽に追加するブックマークレット(IE6対応) - jsdo.it - share JavaScript, HTML5 and CSS
使い方は簡単です。
コーディングをしているときなどに、ちょっとこのスタイルを追加したい、というときに実行します。
すると右上に入力ボックスが出てくるので、あとはそこに普段通りに CSS を書くだけです。
table td {...}みたいに継承関係も含めて記述可能です。もちろん複数のセレクタやプロパティを書いても大丈夫です。
Firebug では、その要素自体にスタイルを追加する、みたいなことはできますが、継承関係を持ったスタイルを追加したり、class 自体にスタイルが割り当てられてない場合に、class そのものにスタイルを追加できない、という物足りなさがありました。
そういう不便さもあったので作ったものです。よかったら使ってみてください。
iPhone のステータスバーをタップするとページ上部に移動するのは元々用意されているのですが、最下部へ行く方法がありません。（もしなにかやる方法があったら教えてください(;´д｀)）
なので、ちょっとめんどくさいですが自作のブックマークレットを活用しています。
twitter でそんなことが投稿されていたので、もしかしたら誰かの役に立つかなーと思ったので記事にしてみました。
ずばり、以下のスクリプトをブックマークして、それを最下部に移動したいページでブックマークから実行すると、ページの最下部に移動します。
ちょっと色々あって、後方互換モードのせいでハマって 1 時間あまり無駄にしたので、それを無駄にしないためにも記事を書いてみたり。
内容はタイトル通りで、モードで苦戦したので、修正しようとしているサイトがそもそもなんのモードで動いているのかを判定するブックマークレットを作ってみた。下のリンクをブックマーク（お気に入り）に入れて、色んなところで使ってみてください。
ちなみに補足ですが、document.compatModeで取得できる値は、標準準拠モードがCSS1Compat、後方互換モードがBackCompatです。
今回はちょっとした Tips というか、こんな風にできたの？（と自分で思った）っていうのを書いてみたいと思います。最近、ますます CSS から遠ざかってる気がする
今回のサンプルを使うタイミングとしては、検索のテキストボックスなどにあらかじめ「検索キーワードを入力」のようにサンプルなんかを表示しておき、テキストボックスがフォーカスされたらその文字を消す、というようなもの。n
え、こんな書き方できるの？！ と思いませんでしょうか。
自分は思いましたｗ
大抵の場合、onclick="chek();"などのように実行する関数を設定するだけだと思います。（場合によってはreturnをつけたり、複数関数を設定したりはありますが）n
しかしこのonで始まるイベントハンドラ内には script タグで記述するように自由に改行を含めることができます。
言ってみれば、script タグ内に書けることはすべて書ける、ということです。n
さて、今回の肝となるのは改行ではありません。
（実際、見やすさを無視すれば全部 1 行で書くことができます）
肝となるのは、onfocus内（その他にも onclick など他のものも同様です）で onfocusを上書きしているところ。n
最初の onfocus の実行時に、自身の_defaultValueに元々設定されている valueを保存します。
（この _defaultValue は任意の変数です。DOM はオブジェクトなので自由に変数を追加することができます）n
続いて自身のvalueを空白に設定したのち、onblurとonfocusにそれぞれ関数を設定しています。
こうすることで、2 回目以降の onfocus 時には最初の 2 行は実行されなくなります。n
処理内容としては、フォーカスが外れたときにもし空白なら初期のテキストを表示しなおし、フォーカスが当たったときにもし初期値の場合はまた空白に戻す、という処理を行っています。n
これを利用することの利点としては、現在のテキストボックスの値がどうなのかを識別するためのフラグ用の変数や、デフォルトの値を保持しておく変数を用意する必要がなく、またデフォルトのテキストがなんであっても確実に "デフォルトの値かどうか" を識別することができます。n
ちなみに、上記のものを関数かすると以下のような感じで書くことができます。n
前々から、イージング（徐々に速くなったり遅くなったりする機能）の処理だけをしてくれるライブラリみたいのないかなぁと思っていました。
が、なかなか見つからず、勉強の意味も含めて自作してみました。
イージング自体は こちら を参考にしました。
さらに、jQuery の構造を参考にしながら、メソッドチェーンの仕組みを取り入れてみました。
また、jQuery 的なプラグイン作成も可能になっているので、独自の関数を定義することもできます。
それ以外にも、処理をストップさせたり、途中で設定を変更するなどのイージングの処理を制御するための関数がいくつか用意されています。
設定方法や、使い方などの詳細はデモページに一覧で書いてあるのでそちらをご覧ください。
さて、またしてもJavascriptなネタです(;´Д｀)
というか、今回は備忘録的に書いてます。
あまり、コンテンツ（ブラウザ全体の、表示領域外の部分も含む）の高さを取得するサンプルがわりと少なかったので自作して備忘録としてアップしました。
表示領域以外の高さを取得するには「body(documentElement).scrollHeight」を使います。
ただこれは、表示領域よりコンテンツの高さが高くないと数値が少なくなってしまうため、表示領域の高さを取得する「body(documentElement).clientHeight」と比較して大きい方を採用しています。
さらに、互換モードや準拠モードで取得できる値が違うため、bodyとdocumentElement（html要素）のふたつの値をそれぞれ比較して、一番大きい値を採用しています。
そのため、「body」と「documentElement」のふたつの要素と、さらに「clientHeight」と「scrollHeight」のふたつ、合計4つの値を比較して、一番大きいものがコンテンツ（および表示領域）の最大サイズ、となるわけです。
フローティングポップアップウィンドウを表示するスクリプトを作ってみました。
「はい」や「いいえ」などを押したときに色々と処理をさせたかったので自作しました。
JavaScriptのalert関数を使うとどうしても味気ないものになってしまうので、
デザインされた alert や confirm を使いたい場合に使ってみてください。
また、表示できる内容はテキスト、DOM ノード、iframe、画像となっています。
最大化・最小化ボタンをつけたり、閉じるボタンを非表示にしたり、
また、複数のウィンドウを開かせないようにモーダルとしてウィンドウを開くこともできます。
そしてこれらの機能はすべて、同時に設定することができます。
設定できるパラメータについては以下に一覧表示しています。
http://script.aculo.us/ のJS ライブラリを使ったことがある人なら知っていると思うけど、この JS ライブラリ、読み込む際の src 属性の最後に?load=effectsなどとして読み込むエフェクトの種類を指定できる。n
便利だなーと思いつつ、どうやってこれを実現してるんだろう？ と疑問に思っていた。
そして、色々自分で JavaScript を自作していると、読み込ませる時点であらかじめ決められたパラメータを読み込ませたいな、という欲求が出てきた。n
そこで、色々調べているうちにやっと解答が見つかった。
結論から言うと、読み込まれている script タグの要素をすべて取得し、自分自身の src を見つけ出し、さらにそこから?load=effectなどのパラメータを取り出し処理する、というもの。n
一見めんどくさいけど、script タグの src 属性にパラメータを設定できるので、JS ファイルを読み込んだあとにさらに初期化用関数なんかを実行させる手間を考えると、1 行の src 属性だけで完結できるのでとても便利だ。n
ということで、読み込むための関数を作ってみたので公開したいと思う。n
仕事でちょっとタイトル通りのことをする必要が生じたので、それを簡単に実装する JavaScript を作ってみた。
簡単に内容を説明すると、
iframeElement.contentWindow.document.body.scrollHeight
（iframeElementはiframeオブジェクト）
というプロパティでiframe内のbody要素の高さを取得します。
これ以外にも offsetHeight とか clientHeight なんかでもほぼ同様の値を取得できるが、IE6 ではこのプロパティだけしか高さを取得できなかったのでこれを使ってます。
ver2.0 では主にiframeElement.contentWindow.document.documentElement.offsetHeightを使うように仕様変更しています。
そして、その取得した数値を iframe 自身の高さに設定してやる、というだけのものです。
いちおう簡単に実装、を目的としたので作った JS ファイルとそれの使い方も解説しておきます。
このスクリプトによる高さの取得は、同一ドメインのページを表示する際だけに使用できます。別ドメインのページを iframe で表示した際は、ページの DOM に対してスクリプトがアクセスできないため、高さの取得はできません。
今回、偶然遭遇した IE6 のバグ（？）をメモしておきます。
現象は、img 要素でマークアップした画像のボタンに a 要素の onclick なんかで処理をさせる場合のもの。n
今回、form の外から submit() を実行する必要があったので、onclick に関数を設定し、その関数内で処理を行ったあと、form の submit() を実行させたのですが・・。
なんでか、IE6 だけどうしても動かない。なにをしても動かない。
原因はよくわからないが、onclickに設定した関数のあとにreturn falseを追加したらうまく動いた。n
社内で協議の結果、a 要素自身の動作と onclick で設定した submit() の処理がぶつかっているのでは？ ということに。
その証拠になるかは分からないけど、submit 処理をたとえば
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
