iOS5のSafariでlabelとcheckboxが連動しない対策

iOS5のSafariでは、forで紐付けたlabelとcheckboxを連動できない。

<input id="test_check" type="checkbox">
<label for="test_check">チェックする</label>

この対策でよく見かける方法が、空のjavascriptのclickイベントを記述するやり方。

<input id="test_check" type="checkbox">
<label for="test_check" onClick="">チェックする</label>

一括指定もできる。labelとcheckboxのセットが大量にある場合はこっちのほうが便利。
ただし、labelをクリックしたときに動作させるjavascriptを組み込みたい場合は競合の心配があるので注意。

<input id="test_check" type="checkbox">
<label for="test_check">チェックする</label>
$("label").click(function(){});

スマートフォンのオーバーレイを開いた瞬間の誤タップ防止

スマートフォン、というかAndroid端末むけのオーバーレイ対策としては
オーバーレイの背面にかくれたリンクもタップできてしまうトラブルが有名ですが
他にも困ったことがあったのでメモ。

オーバーレイを表示させるボタンのタップ位置とオーバーレイ上のリンクが重なると
開いたと同時にリンクをタップしてしまい、誤動作を起こしてしまいます。

“スマートフォンのオーバーレイを開いた瞬間の誤タップ防止” の続きを読む

iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize

回転イベントorientationchange

画面が回転したときに何かさせたいときはorientationchangeで設定できます。
※Androidは2.2から対応しました。2.1の端末では動きません。

$(window).on(“orientationchange”,function(){
	alert("画面が回転しました"); // ここに実行したい処理を書く
});

回転したときだけ実行する場合は、これでいけますが
ページ読み込み直後にも処理を実行したい場合だったら、
resizeもセットで設定します。

$(window).on(“orientationchange resize”,function(){
	alert("この端末の横幅は"+window.innerWidth+"pxです");
});

サンプルページ

“iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize” の続きを読む

jQuery+ajaxでRSSフィードのxmlを読み込む

jQueryのajaxでwordpressのRSSフィードを読み込んで表示させるサンプル。

$.ajax({
	url: '【フィードのURI】',
	async: true,
	cache: false,
	dataType:"xml",
	success: function(xml){
		$(xml).find('item').each(function(){
				$('【取得したタイトルを出力したい場所】').prepend($(this).find('title').text());
			}
		});
	}
});

Chromeはfile://でhtmlを開くとフレーム内ページがクロスサイト扱いになる

ローカルのファイルをブラウザで直接開いている時(いわゆる、htmlファイルをダブルクリックして開いたfile://始まりのアドレスで表示される状態)だと
Chiromeは相対パスで指定したページ同士でもクロスサイト(つまりhttpからパスを書いている外部ドメインのウェブサイト)扱いになるもよう。

“Chromeはfile://でhtmlを開くとフレーム内ページがクロスサイト扱いになる” の続きを読む

IE6でposition:fixed;

cssで固定表示させるためにはposition:fixed;を設定しますが
IE6がこのプロパティに対応していないという…。

IE6用にposition:absolute;でいったん絶対位置表示を設定しておいて、
javascriptのスクロールイベントでスクロールした分だけcssのtopの値を増やすという手もありますが
これだとスクロールしたときガタつきがでてしまいます。

IE6だけの対策をわざわざ行うなら、スクロールがなめらかに仕上がるので expression のほうがおすすめです。

“IE6でposition:fixed;” の続きを読む

Firefoxとjavascriptのwindow.close()

久々に実装不可事例を見つけたのでメモ。

Firefoxは、javascriptで開いたwindowしかjavascript制御で閉じさせることができない。
これは、セキュリティポリシーでそう取り決めて実装されている仕様なので
サイト制作者レベルが小技でどうにかすることはできません。

つぎ、お客様に実装希望をいただいたら、実現不可であることを丁寧に説明することにしよう…。

以下サイトの検証がかなり参考になりました。

参考サイト
http://www.drk7.jp/MT/archives/001591.html

html5のplaceholderをIEで再現するjQueryプラグイン

練習で、html5のplaceholder(プレースホルダー)をIEでも再現するためのプラグインを作ってみました。

このように、対応ブラウザ向けの記述だけでIEでもプレースホルダーらしい機能がついた状態になります。

<input type="text" name="name" placeholder="名前を入力して下さい">

試作版ということで、主にこんなところが抜けています

  • プレースホルダーの内容がフォームより長い場合は、はみ出す
  • フォームをブロック要素(div)で囲う仕組みなので、どんなレイアウトでも簡単に組み込めるか不明
    とりあえず、よくある<table>タグで組んであるフォームでは差し支えなかった…。
  • スタイルシート部分が決め打ち状態なのでカスタマイズは面倒

jQuery1.7 + IE6,7,8,9で、動いてることを確認しています。
1.7にした深い意味はないし、メジャーバージョンに更新する時は1.6から対応に落とそう。

デモも設置してないし、適当すぎやな。

“html5のplaceholderをIEで再現するjQueryプラグイン” の続きを読む