Calendar

<< 11月  
 123
45678910
11121314151617
18192021222324
252627282930  

Mobile

  • ウィンドウ幅で読み込むJavascriptを切り替える
  • 2018.06.06
  • レスポンシブデザインの際に、PC用とスマホ用で別のJSを使用する必要があったので、
    その方法を記載しておきます。

     

    <script type=”text/javascript”>
    jQuery(document).ready(function($) {
    if (window.matchMedia( ‘(min-width: 768px)’ ).matches) {
    $.ajax({
    url: ‘●●●●●_pc.js’,
    dataType: ‘script’,
    cache: false
    });
    } else {
    $.ajax({
    url: ‘●●●●●_sp.js’,
    dataType: ‘script’,
    cache: false
    });
    }
    });
    </script>

     

    ブレイクポイントはCSSに合わせて適宜変更する必要があります。

    また、Google Chromeではローカル環境では正しく動作しないため、サーバー上で確認する必要があります。

【この記事のタグ】
ajax ECCUBE ワードプレス
ウィンドウ幅で読み込むJavascriptを切り替える はコメントを受け付けていません。
  • スマートフォンサイトのロールオーバーについて
  • 2015.02.27
  • スマートフォンサイトでは、PCサイトとは違いマウスがありませんのでロールオーバー効果は表現できませんが、タップしたときにロールオーバーのような効果をつけることはスマホサイトでも可能です。

    検索してもaddClass()やremoveClass()を使用したclass操作だったり、background-imageを利用した操作だったりと手間がかかるため簡単に画像を差し替えられるスクリプトを作成しました。

     

    <img>にclassを設定するだけで、タップしたときに画像が切り替わります。

    スクリプトは下記になります。
    rollover.jsのような名称を付けたファイルに保存しておいて、使用するときはjQueryと一緒に読み込むようにするとソースもすっきりします。

    プリロード機能もあるので、手間いらずです。

    //ロールオーバー用画像のプリロード

    $(function(){
    $(“.rollover”).each(function(){
    if(String($(this).attr(“src”)).match(/_off\.(.*)$/)){
    var img = new Image();
    img.src = String($(this).attr(“src”)).replace(/_off\.(.*)$/,”_on.$1″);
    }
    });
    });

     

    //_offと_onを切り替える

    $(function(){
    $(“.rollover”).bind(“touchstart”,function(){
    $(this).attr(“src”,$(this).attr(“src”).replace(“_off.”, “_on.”));
    });
    $(“.rollover”).bind(“touchend”,function(){
    $(this).attr(“src”,$(this).attr(“src”).replace(“_on.”, “_off.”));
    });
    });

     

    【使い方】

    jQueryと上記のソースを外部ファイル化(rollover.js)したものを読み込んで、イメージにクラスを指定するだけです。

    その際、画像のファイル名は、「_off.拡張子」というように、「_off」のついた名称にする必要があります。

    <img src=”hogehoge_off.jpg” class=”rollover”>

【この記事のタグ】
ajax ECCUBE ワードプレス
, コメント&トラックバック(0)

▲ PAGE TOP