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クラスができることを強く望む。



                    文字列内のURLを自動的にリンク設定

                    0
                      動的に読み込んだ文字列の中のURLを認識して、自動的にリンクに変換するおまじない。

                      var text="hogehoge http://hogehoge.jp/"
                      text=text.replace(/(http:¥/¥/[¥x21-¥x7e]+)/gi, "<a href='$1'>$1</a>");

                      ※円マークになってる箇所はバックスラッシュ



                      | 1/2PAGES | >>

                      selected entries

                      categories

                      archives

                      recent comment

                      recommend

                      profile

                      BOOKS

                      links

                      search this site.

                      others