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で画像が欠けたり、ヘンなシカクが出たりすることがある。
                     

                    enchant.jsのバウンスの式

                    0
                      enchant.jsのSpriteは、オフセット座標の基準点が左上なのに、拡大縮小・回転の基準点はオブジェクトの中心。通常はたいした問題じゃないけど、拡大縮小する場合の当たり判定には注意。
                      オブジェクトのX座標=x
                      オブジェクトの幅=w
                      オブジェクトのサイズ=s
                      ステージの幅=Wのとき

                      右の壁のバウンスX1=W-((w*s-w)/2+w)
                      左の壁のバウンスX2=(w*s-w)/2;

                      従ってxの範囲は
                      (w*s-w)/2<=x<=W-((w*s-w)/2+w)


                      めんどくさいので、いっそGroupに入れ子にして中央配置してしまえば計算は楽だが、Group自体はopacity等の表示に関するプロパティがないので、これはこれで注意が必要。バージョンアップでSpriteのcontainerクラスができることを強く望む。



                      | 1/2PAGES | >>

                      selected entries

                      categories

                      archives

                      recent comment

                      recommend

                      profile

                      BOOKS

                      links

                      search this site.

                      others