徒然 - テスト

「position:fixed」が使えないiOS5, Android2.2未満では、iScrollやjQuery Mobileを使うか
「position:absolute」を使って疑似的に実装するやり方があると思います。

（関連）
・スマホでiScrollを使わず、疑似「position:fixed」を実現させるテスト
・スマホのアドレスバーを非表示にした備忘録

で、横方向のカルーセルタイプのスクロールに対しては、
TouchSliderを利用したら、他に影響をあたることも動作が鈍くなることもなく実現できたので、とても良いと思いました。

さらに、「id」ではなく「class」が使われており、カスタマイズ性にも優れていそうなので、これからいろいろいじってみます。

iOS5はもちろん、iOS4でもサクサク動いたのがうれしいです。

詳しくはこちら
↓
TouchSlider ― JavaScript slide content

自分用テストです。

iOS5、Android2.2より前では（蛇足ですがIE6も）「position:fixed」が使えないのでiScrollを使うという方法がありますが、実際にやってみたらページの内容が盛りだくさんなためか、動きが重たくなってしまいました。

そこでシンプルに「position:absolute」を使って意図する位置に要素を配置してみようと、下のソースを書いてみました。

でも、たぶんこれも動きが遅いと予想されるので、どのくらい重たいかのテストです。

結局、「スマートフォンでは、スタイルのposition:fixedが使えない!! | 村式流 イッパシエンジニアへの道」にあるように、スクロール中は非表示にして何秒後かに表示させるというやり方が一番良いのでしょうか。少し目障りな感じがしますが。

（赤い四角はタップ（クリック）で消えます）

【追記】取り急ぎのテストなので横方向のpositionは省略しました。というのはウソ。書き忘れました(^_^;)

【追記２】拡大・縮小に対しては、とりあえず今回はユーザーによる拡縮禁止なので考慮に入れず。細かいことは別途試してみたいと思います。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css">
#test20120322{
	width:300px;
	height:100px;
	position:absolute;
	z-index:666;
	top:50%;
	left:50%;
	margin:-50px 0 0 -150px;
	padding:10px;
	background:#f00;
	color:#fff;
	text-align:center;
	line-height:100px;
}
</style>
<div id="test20120322">（クリックでこの表示を削除）</div>
<script type="text/javascript">
var positionY0=$("#test20120322").position().top;
$("#test20120322").click(function(){
	$(this).remove();
});
$(window).scroll(function(){
	$("#test20120322").css("top",(positionY0-0+$(this).scrollTop())+"px");
});
</script>

今年撮った動画のベスト（その２）です。

（その１）はこちら。



日本にいると「アイルランド英雄」と言われても、どの位なのか分かりにくいものですが、７月に実際にロンドンに行ってその人気ぶりを実感したのが Thin Lizzy です。

High Voltage Festivalの初日、別のステージでのアーティストが終わった後、急いでメイン・ステージのThin Lizzyのところへ行くと、立錐の余地のない混雑ぶりでした。

そこで、VIPチケットを買った人のみ入れる「GRANDSTAND SEATING」エリアを上がって撮ったのがこの映像↓です。後ろ歩きで上がって行ったので、最初は激しく揺れ、見苦しくてすみません m(_ _)m


一画面ではとても全景をとらえきれないほどのオーディエンス。おそらく、東京ドームの２～３個分は人が集まっていたのではないでしょうか。

(続きを読む…)