jQueryの記事一覧｜あめぞう

jQuery 2021.11.27

luxy.jsとページ内リンクを共存させるには

luxy.jsとページ内リンクを共存させるには、javascriptで指定したidへ飛ばせばよい。

jQuery 2020.10.9

画面に現れたらクラスを付与する

Waypoints
http://imakewebthings.com/waypoints/

HTML jQuery WordPress 2020.4.24

画面幅によって読み込みファイルを変える〜レスポンシブウェブデザイン

<script>
  jQuery(document).ready(function($) {
    //PC環境の場合
    if (window.matchMedia('(min-width: 768px)').matches) { //切り替える画面サイズ
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/pc.js',
        dataType: 'script',
        cache: false
      });
      //スマホ環境の場合
    } else {
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/sp.js',
        dataType: 'script',
        cache: false
      });
    };
  });
</script>

CSS jQuery 2019.7.20

【CSS】height: 100vh;を確実にする

.my-element {
  min-height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
  min-height: calc(var(--vh, 1vh) * 100);
}

const setFillHeight = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

let vw = window.innerWidth;

window.addEventListener('resize', () => {
  if (vw === window.innerWidth) {
  　// 画面の横幅にサイズ変動がないので処理を終える
    return;
  }

  // 画面の横幅のサイズ変動があった時のみ高さを再計算する
  vw = window.innerWidth;
  setFillHeight();
});

// 初期化
setFillHeight();

jQuery 2019.7.11

【JavaScript】指定した期間中だけ表示を変えたい

<script>
<!--
window.onload = function() {
var now = new Date();
var start = new Date('2001/1/1 0:00:00'); // 表示開始日時
var end = new Date('2020/12/31 23:59:59'); // 表示終了日時
 
if ( start <  now && now < end ) {
    document.getElementById("campaign").style.display="block";
}
}
-->
</script>

<div id="campaign" style="display: none;">
ここに表示させたい内容を書き込む
</div>

jQuery 2018.6.10

iframeでコンテンツの長さに合わせて高さを自動調整

iframeの高さをJavaScriptで自動的に調整する方法

jQuery 2018.5.26

スムーススクロールを使いたい

https://sakic.jp/blog/web/smooth-scroll

$(function () {
  // 全てのアンカータグを対象にする
  $('a').click(function (e) {
    var anchor = $(this),
      href = anchor.attr('href'),
      pagename = window.location.href;
    // 現在のurlのハッシュ以降を削除
    pagename = pagename.replace(/#.*/, '');
    // リンク先のurlから現在の表示中のurlを削除
    href = href.replace(pagename, '');
    if (href.search(/^#/) >= 0) {
      // 整形したリンクがページ内リンクの場合はページ内スクロールの対象とする
      // 通常の遷移処理をキャンセル
      e.preventDefault();
      var speed = 500;
      // 前段階で整形したhrefを使用する
      // var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $("html, body").animate({
        scrollTop: position
      }, speed, "swing");
      // ロケーションバーの内容を書き換え
      location.hash = href;
      return false;
    }
  });
});

jQuery 2017.10.30

レスポンシブウェブデザインでイメージマップを使いたい

使い方はとてもかんたんです。

jQuery RWD Image Maps

1. 上のページから、「jquery.rwdImageMaps.min.js」をダウンロードします。
2. コードを貼り付けておしまい。

<script src="js/jquery.rwdImageMaps.min.js"></script>
<script>
  $(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
  });
</script>

jQuery