グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

製作用メモ。
jQuery/JavaScriptを高速化するための記述方法がまとめられています。
こういう、普段なかなか身に着けられない知識はとてもありがたい。

jQuery/JavaScriptの高速化テクニックまとめ
http://matome.naver.jp/odai/2134058372410380801

実践できていたのは1つ目と5つ目くらいでした。。

jQueryのget関数を使ってPHPをリクエストし、
結果を戻り値として受け取る・・だけだったのですが、
勘違いをしていてひどく苦戦したのでメモします。


JS側は

$.get("test.php", function(data){
   alert(data);
});

というように、
PHPを実行してその結果を受けて
コールバック関数で表示させるというものです。

で、肝心のPHP側ですが、
処理の結果を return で返そうとしていて・・
（そもそも関数内じゃないので return は無意味ですね）

戻り値は XMLHttpRequestオブジェクトなので、
単純に print で出力してあげれば受け取ることができました。

コーディングをする際にできるちょっとした工夫をメモ。

■マウスオーバー
画像をふわっとオーバーします。

jQueryで簡単実装！フェードエフェクト付き画像ロールオーバー

サンプル


■マウスオーバー
背景色をふわっとオーバーします。

[jQuery] メニューの背景色をロールオーバーでふわっと変える

サンプル


■画像の表示
ふわっと表示させられます。

画像に遅延表示っぽいエフェクトを与えるだけのm5LazyDisplay

サンプル

PCサイトの階層に「sp」などのスマホサイト用階層を作り、
その中にPCサイトと同じ構造でスマホサイトが作られているときに、
スマホサイトからPCサイトへのURLを自動取得するJSです。

ようするに「PC版を見る」ボタン用のURLを自動で入れるJSです。

タイトルも説明も長いですが、
ソース自体はURLから /sp/ を外すだけの簡単なものです。

2012.9.24 修正
ソースが大雑把過ぎたので追記しました（水色箇所）。

■JS
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
   $("#btn_pc").click(function(){
     var s = location.pathname.split("/sp/");
     location.href = s[0] + '/' + s[1];
   });
});
</script>

■HTML
<a href="javascript:void(0);" id="btn_pc">PC版を見る</a>


サンプル
ダウンロード

赤文字が階層名ですので、任意のフォルダ名に変更してください。

.clickの部分にjQueryを使っていますので、
jQuery使わない方は書き換えてみてください。

※14/10/8　追記
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。

ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。


よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。

ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。

jQuery and Fancybox: How to automatically set the height of an iframe lightbox

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
});

上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
  'scrolling' : 'no',
  'onComplete' : function() {
    $('#fancybox-frame').load(function() {
      $('#fancybox-content').height($(this).contents().find('body').height());
      $('#fancybox-overlay').height($(document).height());
    });
  }
});

これで高さが自動調整されます。
google chromeだとローカルでは動きません。

※12/7/11　追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。

不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。

また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。

ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・

時間があるときにいじってみたいです。