#054 iPadでライトボックスを表示するときに!スクロールが!できるように!したよ!

どうも、帰りの電車では必ず隣の人に迷惑をかけます。
ライスです。

今回はちょっと技術的な話です。
まあ、たいしたアレでもないですが、ちょっと解決方法を見つけるのに手間取ったんで。
PCサイトで、ライトボックス的なJSってよく使うと思うんですが、
iPhoneとかiPadで見た時(Android端末は未検証ですごめんなさい)に、
iframeでhtmlファイルを読み込むと、
ウィンドウサイズよりモーダルウィンドウ(表現合ってるかな?)のサイズが大きい場合、
スクロールが出来ないんですよね。

iPhoneとかiPadのSafariでは、iframeのoverflowが効かない、のが原因ぽいです。
まあ、そらそうか、っていうのもあるんですけど、いかんせん、いかんせん。

参照:iPadのSafariではiframeのoverfrowが効かない
http://www.luigibox.com/00_lab/iframeForiPadSafari/

で、上記の通りやってみたんですが、
モーダルウィンドウの画面全体でスクロールを有効にしたい云々、諸々ありまして、うなってたら・・・アレですわ。

colorbox使って、モーダルウィンドウとして読み込むhtmlファイルのソースを
divで構成してやったらできました。htmlタグは使わずに、divで。
かなり強引かもしれんけど、なんとかいけました。

/*************************
<html>
<head>
・・・
</head>
<body id=”page”>

<div id=”container”>
・・・
</div>

</body>
</html>
*************************/

↓↓↓↓↓

/*************************
<div id=”page”>

<div id=”container”>
・・・
</div>

</div>
*************************/

参照:colorbox
http://www.jacklmoore.com/colorbox

色々と保証はできないですが、もし、今回のような問題でお困りの方は一度試してみてくださいまし。

#052 Notes on jQuery.belatedPNG

ie6でpngを透過表示するには、DD_belatedPNG.js にお世話になる事があると思うのですが、

opacityを弄びたいので、jquery.belatedPNG.js を使用させて頂きます。

背景に画像指定すれば問題ないかと思うのですが、親divに対してfixpngを行うとie6で効かないみたいでした。

あと、こちらでは再現できなかたったのですが、position指定した時挙動が不安定になることがあったので、位置を弄ぶ時は注意が必要なのかもしれません。