css
背景画像にLazyload。
背景画像にLazyLoadをあてれるのかと思って試してみたところ、普通に出来るようでした。 例のpadding-topを使った高さをあわせる方法で、背景画像のサイズもウィンドウに応じて可変します。 スマホの縦に長いページなんかには、画像の読み込みを遅らせられるので有効かも。
jQuery
JS関数の存在チェック
メモ代わりに。 jsでfunction_existsのように関数が定義されているかチェックします。 Javascript if( typeof function_name == ‘function’ ){ … 同じ様に、jQueryのプラグインの場合。 jQueryプラグイン if( [‘plugin_name’] || $.fn[‘plugin_name’] ){ …
jQuery
スムーズなページ遷移 pjax
最近見かける事が多くなったjquery プラグイン、またgithubで使われていることで有名な、pjaxを実装してみます。 pjaxとは、pushState + ajax を意味する造語だそう。 そしてpushStateとはHTML5で導入されたURLを操作するAPIのこと。 これを使うことで、ajaxでコンテンツを入れ替えてもページ移動が行われる→ブラウザの進む・戻るボタンが使える、PVが取れる。 さらに重複するコンテンツの読み込みがなくなるので、スムーズな遷移が実現出来て、ウェブサイトやアプリケーションなどのUX向上に繋がります。 https://github.com/defunkt/jquery-pjax 対応ブラウザは以下。 caniuse.com/#search=pushstate pushStateが実装されていない、E9以下では使えません。 まずは静的ページへ実装してみます。 静的ページ内の、#pjax-container内部のコンテンツを入れ替える想定。 サンプル Sample page jquery と、jquery.pjax.jsを読み込んでいます。 その後、mypjax.jsで実装しています。 最初は$.pjaxをコールした後にanimateするような実装だったが、コンテンツが一瞬表示されてから透過を初めてしまうケースがあったので、 animateのコールバックでpjaxするのが吉。 if ($.support.pjax) { $(document).on(‘click’, ‘a’, function(e) { e.preventDefault(); var href = $(this).attr(‘href’); $(‘#pjax-container’).animate({ opacity : 0 }, 300, function(){ $.pjax({ url: href, container : ‘#pjax-container’, fragment : ‘#pjax-container’, timeout : 2000 }); }); […]
CSS3
CSS3 transition
オーバーレイを出すときにオブジェクトを上から表示させて、消すときに下にやりたかったのでそのデモ。 オブジェクトを真ん中に持っていく時に、absoluteで指定したのがこれ。 調べていくうちにtransitというプラグインの事を知ったので、それを使ってみたのがこれ。 http://ricostacruz.com/jquery.transit/
jQuery
jsonp
Ajax関連メモ。 jsonpを使った場合。 var w_jsonfile = 'http://xxxxxx.jp/hoge.php'; $.ajax({ type:"POST", url:jsonfile, dataType: "jsonp", jsonpCallback: 'callback', success:function(data){ console.log(data); }, error :function(XMLHttpRequest,textStatus){ console.log(textStatus); } }); ポイントは、jsonpの場合は、jsonpCallbackパラメータが必要。 jQuery 1.5以降はこれで戻り値を指定する様になったようだ。 詳しくは、http://api.jquery.com/jQuery.ajax/ で、hoge.phpではxmlからjsonへ変換して、上に倣ってcallback()の形で返す。 $xml = "fuga.xml"; $result = simplexml_load_file($xml); $encode = json_encode($result); header("Content-Type: text/javascript; charset=utf-8"); echo sprintf("callback(%s)",$encode); これでOK。
jQuery
スマホ用サイドメニュー ２
さて、ナビが出てくる所の動きは理解出来た。 後googleナビに近づけるためには、ナビの上下の動きがどうもカクカクした感じがあるので、何とかならんかと本家を見てみた。 google のソースでは、ナビ内をスライドすると、 transition : -moz-transform 0ms ease-in-out 0s がついて、 transform の値が translate3d(0px, -109px, 0px) のようになる。 これを再現するには。。 touchstart、touchmove, touchendの部分をちょっと変えます。 $(settings.menu_list).bind({ ‘touchstart’: function(e) { menu_list_height = $(settings.menu_list).height(); sfY = event.touches[0].screenY; }, ‘touchmove’: function(e) { mfY = event.changedTouches[0].screenY; var moveY = smY + mfY – sfY; // moving $(this).css({ “-webkit-transition”: “all “+timer+”ms cubic-bezier(0.075, 0.82, 0.165, 1)”, ‘-webkit-transform’:’translate3d(0px,’+ moveY +’px,0px)’, }); […]
jQuery
スマホ用サイドメニュー
http://qiita.com/items/64e4589e37944bf032d9 こちらで紹介されてるスライドメニューの縦板をテストしてみた。 普通にスマホでjQueryとかでアニメーションをやろうとすると、かなりもっさりしてしまう。 そこで、スマホだからこそcss3を使って実装する視点、確かにそうだよねと脱帽。 処理はシンプルで、touchイベントを使ってtouch.start, touch.endでの挙動をそれぞれ制御し、 スライドすべき時にクラスをつけている、って感じだ。 しかしCSS３の-webkit-transition，あなどれない、、、これはいけるやんか。 サンプル：http://shnr.net/samples/m.slide/ これで良い感じの縦スライドが実装できる。
jQuery
jQuery deffered
jQuery deffered について ajaxでスクリプトを書くときに、ajaxで取った値を基に別のリクエストを送って、返り値を一回目のリクエストと合わせて表示、 なんてことをやる必要があった。 最初recursiveだけで組んでみたが、良い機会なのでdefeerdと組み合わせて使ってみる。かなり見通しが良くなった（と思う） 下の例では、jsonで受け取った結果をflagでrecursive_one, recursive_twoに分けて操作している。 また、json内には順不同でflag = true, false が混在するものとし、true のものから順に展開する。 $(function(){ $.ajax({ type:”GET”, url:jsonfile, dataType: “json”, success:function(data){ GetResults.getContents_first(data).done(function(data) { GetResults.getContents_second(data).done(function() { GetResults.finalFunction(); }); }); }, error :function(XMLHttpRequest,textStatus){ console.log(textStatus); } }); }); var GetResults = { getContents_first: function(data) { var defer = $.Deferred(); var total = data.somearticle.length; var num = 0; var […]
jQuery
Practice for jquery plugin.
プラグイン作成の練習。 スクロールと同時にランダムに動くプラグインを作成しました。 基本ソースは以下。 ■HTML <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>Parallax Test</title> <meta name=”keywords” content=””> <meta name=”description” content=””> <link rel=”stylesheet” href=”css/style.css” media=”all”> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script> <script src=”js/jquery.randomScroll.js”></script> <script> $(function() { $(“#parallax”).shparallax({ scrollValueDiv : “#scrollValue” }); }); </script> </head> <body> <h1>Just scroll it.</h1> <p class=”indicator”>スクロール値 | <span id=”scrollValue”>0</span></p> <ul id=”parallax”> <li id=”item1″></li> <li id=”item2″></li> <li id=”item3″></li> […]
jQuery
PowerTip
Powertip Powertipを使って、フォームの入力補助テキストを表示する。 とても便利だったので、簡単にメモ。 １．下のようなHTMLフォームを用意する。 <form> <label>Name</label> <input type=”text” name=”name” class=”name” id=”field_01″> <label>Email</label> <input type=”text” name=”email” class=”email” id=”field_02″> <label>Comment</label> <textarea></textarea> <input type=”submit” value=”submit”> </form> ２．powertipライブラリのjs, css ファイルを読みこませる。 ダウンロード ↓ http://stevenbenner.github.io/jquery-powertip/ <script type=”text/javascript” src=”assets/js/powertip/core.js”></script> <script type=”text/javascript” src=”assets/js/powertip/csscoordinates.js”></script> <script type=”text/javascript” src=”assets/js/powertip/displaycontroller.js”></script> <script type=”text/javascript” src=”assets/js/powertip/placementcalculator.js”></script> <script type=”text/javascript” src=”assets/js/powertip/tooltipcontroller.js”></script> <script type=”text/javascript” src=”assets/js/powertip/utility.js”></script> <script type=”text/javascript” src=”assets/js/powertip/powertip.js”></script> <link rel=”stylesheet” href=”assets/css/powertip/jquery.powertip.css” > ３．新たにcontact.js等でファイルを作成し、powertip表示スクリプトを記述していく。 […]