ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

jQuery スマホで閲覧した場合のみ新着情報6つ目以降を非表示

レスポンシブ対応で困る要素の一つが新着情報。

PCで閲覧した場合だと、15個ぐらい表示させても問題ないけど、スマホだと話は別。
PCと同様に15個表示させようものなら、ページがとんでもない長さになってしまいます。

そんな時は、5つだけ表示させてはいかが。

<script type="text/javascript">
$(window).load(function() {
    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        $("li").slice(5).css("display", "none");
    }
});
</script>
  1. ユーザーエージェントを使って、スマホ&タブレットのみ実行。
  2. .slice()を使って、6つ目以降の新着情報を非表示。

これで、何も考えずに新着情報を追加できますね~。

投稿日
2013年4月25日
カテゴリー
JavaScript

コメントを残す

デザイン・ポータルサイト事業デザインオフィス blow→in
〒598-0021 大阪府泉佐野市日根野7001-2
TEL.072-425-7218(代表)
WEB.https://blow-in.net
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
ブランディング・ネットショップ事業かつらぎフルーツ
〒649-7151 和歌山県かつらぎ町東渋田325-4
TEL.0736-26-8277
WEB.https://katsuragi.shop
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
飲食店事業パンケーキカフェ cafeblow
〒598-0021 大阪府泉佐野市日根野3926
TEL.090-5127-9187
WEB.https://cafeblow.com
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
  • line@アカウント
事業別サイト