ブラウザが position:fixed に対応しているか確認するJS
2014.07.09
※14/7/9
いくつか問題点?を確認したため記事下部に追記しています。


ようやく旧IEが減ってきて、これで心置きなく position:fixed が使える・・
かと思いきや、スマホでもiOS4以下やAndroid2.X以下は非対応なので、まだしばらくは対策が必要なようです。

そこで、ブラウザが position:fixed に対応しているかを確認できるJSを探してみました。

position:fixedに対応しているかどうか判定する

こちらで紹介されているJSが簡単そうです。


■ダウンロード
GitHubのページに行ってダウンロードします。


■HTMLに記述
HTMLのヘッダー内に記述します。
jQueryを使用しているので、jQueryも忘れずに。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jQuery.support.fixedPosition.js"></script>

■実行
同じくヘッダー内にて実行します。
下記のように書くと、対応していれば「true」、非対応なら「false」が返ってきます。

<script>
$(function(){
	alert($.support.fixedPosition);
});
</script>


※ここから追記

上記の状態でテストしていて気付いたことがありました。

・ページがスクロールバーの出ない長さの場合、非対応でも「true」が返ってくる(iOS4/Android2.X)

・スクリプト実行時にスクロール位置がページ最上部(X=0)の場合、非対応でも「true」が返ってくる(Android2.X)

ちょっとこのままでは十分に使えそうにないので、
何かしら対応できないか試してみようと思います。
| コメント(0)
Dreamweaverでワイルドカード検索&置換
2014.07.02
検索語の一部に、全ての文字の代わりになる「ワイルドカード」を指定して行う検索。
Dreamweaverでは次のようになります。

※「検索および置換」ウィンドウで「正規表現を使用」にチェックを入れる。

■検索
<div id="test"> のtestの部分をワイルドカードにしたい場合、

<div id="(.*)">


また、上記でワイルドカードにした部分を残して置き換えするには
置き換え欄に次のように記述します。


■置換
<span id="$1">


上記で検索&置換を行うと次のようになります。

<div id="test">
   ↓
<span id="test">

| コメント(0)