jQueryプラグイン「carouFredSel」が無効に
jQuery.carouFredSelをスマホ向けサイトで使用していたところ、Ratina向け画像切り替えスクリプトと干渉して表示が崩れるという現象があったので、とりあえずRatina向けスクリプトを外して対応。
どうやら「$(‘img’).each…」が干渉したみたいなので、任意のclass名に切り替えて改めてRatina向けスクリプトを再度設置。これで大丈夫。
jQuery.carouFredSelをスマホ向けサイトで使用していたところ、Ratina向け画像切り替えスクリプトと干渉して表示が崩れるという現象があったので、とりあえずRatina向けスクリプトを外して対応。
どうやら「$(‘img’).each…」が干渉したみたいなので、任意のclass名に切り替えて改めてRatina向けスクリプトを再度設置。これで大丈夫。
なんとも長いタイトルですが、要するにスマホサイト構築時にjQuery Mobileを利用していて、サイト内リンクとして「hoge.html#top」というような記述をアンカータグに入れる場合のおハナシです。
ちなみにこれをやるとページ遷移後は真っ白になります。jQuery Mobileではページ移動をAjaxでもって行うことが基本なので、それを回避するにはコチラやコチラのような手法をとります。
ですが、このやり方では冒頭で取り上げたケースは回避できませんでした。調べても何も出てこない‥‥。で、どうするかというと
を思いつき、後者をとりました。
パスの記述から#を外し、代わりにid名を変数として加えて、リンク先のhtmlに以下のようなscriptを加えます。
<script type="text/javascript"> $(function() { var anchor = '#'+getUrlVars()['doc']; $("html,body").animate({scrollTop:$(anchor).offset().top},600); }); </script>
力技(笑)。この場合は変数名を”doc”とし、それを受け取ってjQueryのページ内移動先にしました。
まあ、これをしなくていいような設計を初めから出来ればいいのだけど。