jQuery 2024.3.27
遷移先ページへ以下を記述する
$(window).load(function () {
var lochref = window.location.href;
if (lochref.indexOf("#") > -1) {
var anchor = lochref.slice(lochref.indexOf("#"));
window.setTimeout(function () {
$("body, html").animate(
{
scrollTop: $(anchor).offset().top,
},
1
);
}, 1);
}
});
jQuery 2024.3.13
/* ===============================================
# faq
=============================================== */
jQuery(function ($) {
$(".question").on("click", function () {
/*クリックでコンテンツを開閉*/
$(this).next().slideToggle(200);
/*矢印の向きを変更*/
$(this).toggleClass("open", 200);
});
});
<script>
$(document).ready(function () {
$('form').attr('action', function (i, val) {
return val + '#section';
});
});
</script>
jQuery 2023.10.29
$(window).scroll(function() {
var height = $(window).height();
if ($(window).scrollTop() > height) {
$('header').addClass('is-show');
} else {
$('header').removeClass('is-show');
}
});
<script>
jQuery(function($) {
if ($('.error')[0] || $('.mw_wp_form_confirm')[0] || $('.mw_wp_form_complete')[0]) {
$("body").addClass("mw_wp_form_dn");
}
const email01 = $('input:text[name="email"]').val();
if (typeof email01 !== "undefined") {
$("body").addClass("mw_wp_form_dn");
}
});
</script>
<div class="tab-area">
<div class="tab active">
タブ１
</div>
<div class="tab">
タブ２
</div>
<div class="tab">
タブ３
</div>
</div>
<div class="content-area">
<div class="content show">
タブ１コンテンツ
</div>
<div class="content">
タブ２コンテンツ
</div>
<div class="content">
タブ３コンテンツ
</div>
</div>
.tab-area {
display: flex;
.tab {
align-items: center;
border: 1px solid #000;
color: #000;
cursor: pointer;
display: flex;
justify-content: center;
}
.tab.active {
background-color: #000;
color: #fff;
}
}
.content-area {
.content {
display: none;
}
.content.show {
display: block;
}
}
$(function () {
let tabs = $(".tab");
$(".tab").on("click", function () {
$(".active").removeClass("active");
$(this).addClass("active");
const index = tabs.index(this);
$(".content").removeClass("show").eq(index).addClass("show");
});
});
domainsToDecorateにドメイン名を書き、
queryParamsに引き継ぎたいパラメータを書くだけ。
<script>
(function() {
var domainsToDecorate = [
'domain1.com', //add or remove domains (without https or trailing slash)
'domain2.net'
],
queryParams = [
'utm_medium', //add or remove query parameters you want to transfer
'utm_source',
'utm_campaign',
'something_else'
]
// do not edit anything below this line
var links = document.querySelectorAll('a');
// check if links contain domain from the domainsToDecorate array and then decorates
for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) {
if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 && links[linkIndex].href.indexOf("#") === -1) {
links[linkIndex].href = decorateUrl(links[linkIndex].href);
}
}
}
// decorates the URL with query params
function decorateUrl(urlToDecorate) {
urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
var collectedQueryParams = [];
for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
if (getQueryParam(queryParams[queryIndex])) {
collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
}
}
return urlToDecorate + collectedQueryParams.join('&');
}
// borrowed from https://stackoverflow.com/questions/831030/
// a function that retrieves the value of a query parameter
function getQueryParam(name) {
if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
return decodeURIComponent(name[1]);
}
})();
</script>
<video id="video01" src="movie.mp4" autoplay muted loop controls playsinline></video> <div class="control"> <divid="play" class="hidden"><iclass="fa fa-play"></i></div> <divid="stop"><iclass="fa fa-pause"></i></div> <divid="mute"><iclass="fa fa-volume-off"></i><iclass="fa fa-volume-up hidden"></i></div> </div> <!-- /.control -->
$(function() {
// 操作対象のvideoを指定
var video = $('#video01').get(0);
// 動画の再生
$('#play').click(function() {
$('#play').addClass('hidden');
$('#stop').removeClass('hidden');
video.play();
});
// 動画の一時停止
$('#stop').click(function() {
$('#play').removeClass('hidden');
$('#stop').addClass('hidden');
video.pause();
});
// 動画の頭出し（任意の秒へ移動）
$('#atama').click(function() {
video.currentTime = 0; // 入れた秒の位置へ移動（例は0秒）
});
// 音声ミュート（トグル式）
$('#mute').click(function() {
if (video.muted) {
video.muted = false;
$('#mute .fa-volume-off').addClass('hidden');
$('#mute .fa-volume-up').removeClass('hidden');
} else {
video.muted = true;
$('#mute .fa-volume-off').removeClass('hidden');
$('#mute .fa-volume-up').addClass('hidden');
}
});
//音量アップ
$('#vol-up').click(function() {
if (video.volume <= 0.75) {
video.volume = video.volume + 0.25;
$("#vol").text(video.volume);
}
});
//音量ダウン
$('#vol-down').click(function() {
video.volume = video.volume - 0.25;
$("#vol").text(video.volume);
});
//音量表示
$("#vol").text(video.volume);
});
jQuery 2021.11.27
luxy.jsとページ内リンクを共存させるには、javascriptで指定したidへ飛ばせばよい。
jQuery 2020.10.9
Waypoints
http://imakewebthings.com/waypoints/
