スマホでピンチ拡大したときの倍率習得

0

       var zoom = document.body.clientWidth / window.innerWidth;  


    ipadでスクロールを無効化。画面を固定する

    0

      document.addEventListener('touchmove', function(e) {
          e.preventDefault();
      }, {passive: false});


      document.documentElement.addEventListener('touchstart', function (e) {
          if (e.touches.length >= 2) {e.preventDefault();}
      }, {passive: false});


      var t = 0;
      document.documentElement.addEventListener('touchend', function (e) {
          var now = new Date().getTime();
          if ((now - t) < 350){
              e.preventDefault();
          }
          t = now;
      }, false);


      touchswipeする要素の中のタグを無効化。excludedElements

      0

        書いたとおり。

        TIPSなさすぎ。

         $("#osusume .framein").swipe( {
                swipeLeft:function(event, direction, distance, duration, fingerCount) {
                },
                swipeRight:function(event, direction, distance, duration, fingerCount) {
                },
                preventDefaultEvents:false,
                allowPageScroll:"none",
                excludedElements:"a",
                maxTimeThreshold:200
            });


        IEでbackground-attachment: fixedがガタつく問題を解決

        0

          パララックス的な表現につかう、背景画像の固定cssが

          IEだと最新版でもガタガタする不具合がある。 ググって解決方法を探したので、覚書。

          if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident¥/7¥./) || navigator.userAgent.match(/Edge¥/12¥./)) { $('body').on("mousewheel", function () { event.preventDefault(); var wd = event.wheelDelta; var csp = window.pageYOffset; window.scrollTo(0, csp - wd); }); }

           

          引用元:http://cloud-collector.link/2016/05/08/ie-fixed-scroll-bug/

           


          フォントサイズをリキッドさせるjQueryプラグイン

          0

            使用頻度が増えてきたので、毎回書くのが面倒になり、ライブラリ化。

            もとのフォントサイズとウインドウサイズの比率をベースに

            ウインドウの可変にあわせてサイズをリキッドさせる。

            レスポンシブで、デバイステキストを使いたいけど、デザイン崩したくない時などに。

             

             

            http://jsdo.it/design_peke/4H5G


            AudioContext覚書き

            0

              html5のaudioは問題が多いのでAudioContextを使いたいが

              そこまで高機能じゃなくていいので、自分が使いやすい程度に整理。

              IEでの代替処理に対応させた。

               


              【特長】
              ・ボリューム設定可能
              ・ループあり(BGM等)、なし(SE等)両対応
              ・読み込み後コールバック対応
              ・IEの場合、代替処理

              【サンプル】


                  var snd1=new WebSound("http://jsrun.it/assets/K/B/5/T/KB5Tv.mp3",1,false,function(){
                      alert("snd1 ready!")
                  });
                   var snd2=new WebSound("http://jsrun.it/assets/K/B/5/T/KB5Tv.mp3",0.5,true,function(){
                      alert("snd2 ready!")
                  });

                  function playSound(str){
                        eval(str).playSound();
                  }
                  

               function stopSound(str){
                        eval(str).stopSound();
                  }

               

              【コード】

              http://jsdo.it/design_peke/02PA/edit

               

               

               


              JSのオブジェクトをソートする(chrome対応)

              0

                JavaScriptの配列にはもともとソート機能がついているが、デフォルトだと昇順にしか並ばない。また、オブジェクトの配列の場合はそのまま使えない。

                 

                なので、今までは

                 array.sort(function (a,b){
                           return a.prop - b.prop;
                        });

                のようにしてたが、a.propとb.propが同じ値のとき、chromeで正しくソートされない。これは、returnで0が返されたときの解釈がブラウザごとに異なるため。

                 

                そこで「もとのオブジェクトに配列用の連番を付与し、同じ値のときはその連番でソートする」といった代替処置が必要。加えて、文字列のソートができると便利なので、関数を整理する。以下サンプル。

                 

                ソート関数サンプル http://jsdo.it/design_peke/swqj

                 

                ちなみに、普通の配列を降順にするには、余計な関数を使わず

                array.sort();

                array.reverse();

                とやってしまうのが無難。せこいけど。

                 


                iframeの高さを自動調整する覚書

                0

                  iframeの中身のハイトを取得して、親フレーム上でのサイズを調整。リロードするタイミングでも自動調整する。

                   

                  $(function(){
                      $("iframe").each(function(){
                          $(this).load(function(){
                              $(this).height(this.contentWindow.document.documentElement.scrollHeight);
                          })
                      })
                  })


                  jScrollPaneの自動初期化

                  0
                    毎回忘れるのでリマインド

                    $(function(){
                        $('.scroll-pane').jScrollPane({
                            autoReinitialise: true
                        });    
                    })
                     

                    IE8アニメーションの、opacityに関する備忘録(Strict)

                    0
                      今回はStrictのケース

                      ■IE8は透過pngにopactyかけると汚くなる。以下の様に回避。
                      $(function() {
                          if(navigator.userAgent.indexOf("MSIE") != -1) {
                              $('img').each(function() {
                                  if($(this).attr('src').indexOf('.png') != -1) {
                                      $(this).css({
                                          'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + $(this).attr('src') + '", sizingMethod="scale");'
                                      });
                                  }
                              });
                                      
                          }
                      });
                      IE8はabsolute要素の透過が効かない。<span>等で入れ子にし、外側(absolute)を座標用。内側をopacity用にする。
                      IE8はbackground-imageに透過pngを使うとアニメーションが汚くなる。なるべく実体として配置する。
                      ■pngを軽量化すると、opactyで画像が欠けたり、ヘンなシカクが出たりすることがある。
                       

                      | 1/2PAGES | >>

                      selected entries

                      categories

                      archives

                      recent comment

                      recommend

                      profile

                      BOOKS

                      links

                      search this site.

                      others