「MediaWiki:Mobile.js」の版間の差分

提供:パルワールド 攻略Wiki
移動先:案内検索
編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
編集の要約なし
タグ: 手動差し戻し
 
(同じ利用者による、間の21版が非表示)
1行目: 1行目:
/* ここにある全てのJavaScriptはモバイル版サイトの利用者に影響します */
//トップに戻るボタン
/* ここにある全てのJavaScriptはモバイル版サイトの利用者に影響します */
 
 
// HTMLコンテンツを変数に格納
var htmlContent = `
<div id="mobileMenuBar" class="fadeIn" style="display: block; position: fixed; top: 0px;">
    <ul class="gNav-menu">
        <li><a class="mw-selflink selflink">TOP</a></li>
        <li><a href="/RightMenu">攻略メニュー</a></li>
        <li><a href="/フォーラム">コミュニティ</a></li>
    </ul>
</div>`;
 
// #content要素を選択
var contentElement = document.querySelector('#content');
 
// HTMLコンテンツをcontentElementに追加
contentElement.innerHTML = htmlContent;
 
 
/*メニューバー*/
/*メニューバー*/
var lastScrollTop = 0;
var menuBar = document.getElementById("mobileMenuBar");
 
 
window.addEventListener("scroll", function(){
  var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
 
  if (currentScroll > lastScrollTop){
      // 下にスクロールしているとき
      if (currentScroll > 100) {
      menuBar.style.display = 'block';
      menuBar.style.position = 'fixed'; // スクロール時には固定
      menuBar.style.top = '0px';
      }
  } else {
      // 上にスクロールしているとき
      if (currentScroll <= 0) {
          // ページの一番上にいるとき
          menuBar.style.display = 'none';
      } else if (currentScroll > 100) {
          menuBar.style.display = 'block';
          menuBar.style.position = 'fixed'; // スクロール時には固定
          menuBar.style.top = '0px';
      }
  }
  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // ネガティブな値を防ぐ
}, false);
// TOPへ
 
$(document).ready(function() {
$(document).ready(function() {
    // FontAwesomeアイコンを使用してボタンを作成
     var backToTopButton = $('<div/>', {
     var backToTopButton = $('<div/>', {
         id: 'back-to-top',
         id: 'back-to-top',
61行目: 9行目:
     }).appendTo('body');
     }).appendTo('body');


    // ボタンをすぐに表示
     backToTopButton.show();
     backToTopButton.show();


    // 非アクティブタイマーを管理する変数
     var inactivityTimer;
     var inactivityTimer;


    // スクロールやマウス動作でタイマーをリセットする関数
     function resetInactivityTimer() {
     function resetInactivityTimer() {
         backToTopButton.show(); // スクロール時にボタンを表示
         backToTopButton.show();
         clearTimeout(inactivityTimer); // タイマーをリセット
         clearTimeout(inactivityTimer);
         inactivityTimer = setTimeout(function() {
         inactivityTimer = setTimeout(function() {
             backToTopButton.fadeOut(); // 2秒間非アクティブ状態で非表示にする
             backToTopButton.fadeOut();
         }, 2000); // 2000ミリ秒 = 2秒
         }, 2000);
     }
     }


    // スクロールとマウス動作でタイマーをリセット
     $(window).scroll(resetInactivityTimer);
     $(window).scroll(resetInactivityTimer);
     $(window).mousemove(resetInactivityTimer);
     $(window).mousemove(resetInactivityTimer);


    // 初期タイマー設定
     resetInactivityTimer();
     resetInactivityTimer();
});
// bgwrapper
document.addEventListener('DOMContentLoaded', function() {
    // 目的の要素を選択します。
    var targetElement = document.querySelector('.pre-content.heading-holder');
    // 目的の要素が存在する場合にのみ処理を進めます。
    if (targetElement) {
        // 新しい div 要素を作成します。
        var newDiv = document.createElement('div');
        newDiv.className = 'bgwrapper';
        // この新しい div を目的の要素の後に挿入します。
        targetElement.parentNode.insertBefore(newDiv, targetElement.nextSibling);
    }
});
});

2024年1月17日 (水) 02:29時点における最新版

//トップに戻るボタン
$(document).ready(function() {
    var backToTopButton = $('<div/>', {
        id: 'back-to-top',
        html: '<i class="fa-solid fa-chevron-up"></i>',
        click: function() {
            window.scrollTo(0, 0);
        }
    }).appendTo('body');

    backToTopButton.show();

    var inactivityTimer;

    function resetInactivityTimer() {
        backToTopButton.show();
        clearTimeout(inactivityTimer);
        inactivityTimer = setTimeout(function() {
            backToTopButton.fadeOut();
        }, 2000);
    }

    $(window).scroll(resetInactivityTimer);
    $(window).mousemove(resetInactivityTimer);

    resetInactivityTimer();
});
// bgwrapper
document.addEventListener('DOMContentLoaded', function() {
    // 目的の要素を選択します。
    var targetElement = document.querySelector('.pre-content.heading-holder');

    // 目的の要素が存在する場合にのみ処理を進めます。
    if (targetElement) {
        // 新しい div 要素を作成します。
        var newDiv = document.createElement('div');
        newDiv.className = 'bgwrapper';

        // この新しい div を目的の要素の後に挿入します。
        targetElement.parentNode.insertBefore(newDiv, targetElement.nextSibling);
    }
});
Copyright © 2003-2024 ヘイグ All Rights Reserved.